/**
 * import.less
 * [ This contains all the imports for the common less files ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     04.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
  *
 *
*/
/**
 * colors.less
 * [ Color definitions ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     04.2015
 * @author:   Daniela Valero, Søren Birkemeyer - Sapient GmbH
 * @licensor: Sapient GmbH
 *
*/
/* ==========================================================================
   Brand colors. Do not use in the LESS files.
   ========================================================================== */
/*
   Shades of blue
   ========================================================================== */
/* ==========================================================================
   Functionality Colors - Use only these colors in the less files
   ========================================================================== */
/*
   Transparent colors
   ========================================================================== */
/*
   backgrounds
   ========================================================================== */
/* Borders
   ========================================================================== */
/* Font colors
   ========================================================================== */
/* Misc
   ========================================================================== */
/* ==========================================================================
   Color variables with Old naming conventions but still used
   ========================================================================== */
/*
   a. Paths
   ========================================================================== */
/*
   b. Typography
   ========================================================================== */
/*
   c. Layout / grid variables
   ========================================================================== */
/* ==========================================================================
                  Component's Variables
   ========================================================================== */
/*
   Add this
   ========================================================================== */
/*
   Accordion
   ========================================================================== */
/*
   Breadcrumb
   ========================================================================== */
/*
   Button
   ========================================================================== */
/*
   Carousel 2
   ========================================================================== */
/*
   Cookie note
   ========================================================================== */
/*
   Country Selector
   ========================================================================== */
/*
   External content
   ========================================================================== */
/*
   FAQ Panel
   ========================================================================== */
/*
   Form
   ========================================================================== */
/*
   Hotspot
   ========================================================================== */
/*
   HTML Content
   ========================================================================== */
/*
   Logo
   ========================================================================== */
/*
   Nav-Carousel
   ========================================================================== */
/*
   Main nav
   ========================================================================== */
/*
   Meta-Nav
   ========================================================================== */
/*
   Page
   ========================================================================== */
/*
   Pagination
   ========================================================================== */
/*
   Product details
   ========================================================================== */
/*
   Product Finder
   ========================================================================== */
/*
   Search
   ========================================================================== */
/*
   Search field
   ========================================================================== */
/*
   Social Bar
   ========================================================================== */
/*
   Stage
   ========================================================================== */
/*
   Title
   ========================================================================== */
/*
   Teaser
   ========================================================================== */
/*
   Teaser gallery
   ========================================================================== */
/*
   Text image
   ========================================================================== */
/*
   Section title
   ========================================================================== */
/*
   Unordered list
   ========================================================================== */
/*
   Video
   ========================================================================== */
/*
   YouTube
   ========================================================================== */
/*
 * mediaqueries.less
 * [ Contains variables for mobile-first media queries for global use in all components ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     2015-05-04
 * @author:   Søren Birkemeyer, sbirkemeyer@sapient.com
 * @licensor: SAPIENTNITRO
 */
/**
 * These variables are available via the shared henkel-lib styles (\henkel-lib\common\less\shared\mixins-mediaqueries.less)
 * They are NOT mobile-first and should be avoided if for new components.
 * Legacy styles should be adapted to the new setup whenever possible.

@all:                   ~"all";
@screen:                ~"screen";
@print:                 ~"print";
@mobile:                ~"screen and (max-width: 640px), screen and (max-device-width: 640px)";
@mobile-small:          ~"screen and (max-width: 320px), screen and (max-device-width: 320px)";
@mobile-portrait:       ~"screen and (max-width: 640px) and (orientation: portrait), screen and (max-device-width: 640px) and (orientation: portrait)";
@mobile-landscape:      ~"screen and (max-width: 640px) and (orientation: landscape), screen and (max-device-width: 640px) and (orientation: landscape)";
@tablet:                ~"screen and (min-width: 641px) and (max-width: 1024px), screen and (min-device-width: 641px) and (max-device-width: 1024px)";
@tablet-portrait:       ~"screen and (min-width: 641px) and (max-width: 1024px) and (orientation: portrait)";
@tablet-landscape:      ~"screen and (min-width: 641px) and (max-width: 1024px) and (orientation: landscape)";
@moblet:                ~"screen and (max-width: 1024px)";
@moblet-portrait:       ~"screen and (max-width: 1024px) and (orientation: portrait)";
@desktop:               ~"screen and (min-width: 1025px)";
@tabdesk:               ~"screen and (min-width: 641px)";
@portrait:				~"screen and (orientation: portrait)";
@landscape:				~"screen and (orientation: landscape)";

 */
/**
 * Brand MEDIA QUERIES
 * The mobile-first media queries to be used in this brand
 *
 * @USAGE
 * mobile:  no media query, base styles = mobile styles
 * tablet:  styling for tablet min-width and upwards (inherited by desktop)
 * desktop: styling for desktop min-width and upwards
 *
 */
@font-face {
  font-family: 'Lato';
  src: url('../../../designs/loctite-responsive/www/common/fonts/lato-regular.eot');
  src: url('../../../designs/loctite-responsive/www/common/fonts/lato-regular.eot?#iefix') format('embedded-opentype'), url('../../../designs/loctite-responsive/www/common/fonts/lato-regular.woff2') format('woff2'), url('../../../designs/loctite-responsive/www/common/fonts/lato-regular.woff') format('woff'), url('../../../designs/loctite-responsive/www/common/fonts/lato-regular.ttf') format('truetype'), url('loctite-responsive.skin.default/lato-regular.svg#latobold') format('svg');
}
@font-face {
  font-family: 'Lato';
  font-weight: bold;
  src: url('../../../designs/loctite-responsive/www/common/fonts/lato-bold.eot');
  src: url('../../../designs/loctite-responsive/www/common/fonts/lato-bold.eot?#iefix') format('embedded-opentype'), url('../../../designs/loctite-responsive/www/common/fonts/lato-bold.woff2') format('woff2'), url('../../../designs/loctite-responsive/www/common/fonts/lato-bold.woff') format('woff'), url('../../../designs/loctite-responsive/www/common/fonts/lato-bold.ttf') format('truetype'), url('loctite-responsive.skin.default/lato-bold.svg#latobold') format('svg');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  src: url('../../../designs/loctite-responsive/www/common/fonts/lato-italic.eot');
  src: url('../../../designs/loctite-responsive/www/common/fonts/lato-italic.eot?#iefix') format('embedded-opentype'), url('../../../designs/loctite-responsive/www/common/fonts/lato-italic.woff2') format('woff2'), url('../../../designs/loctite-responsive/www/common/fonts/lato-italic.woff') format('woff'), url('../../../designs/loctite-responsive/www/common/fonts/lato-italic.ttf') format('truetype'), url('loctite-responsive.skin.default/lato-italic.svg#latobold') format('svg');
}
/*
   CSS3 mixins
   ========================================================================== */
/*
   Flexbox mixins
   ========================================================================== */
/*
   Background combinations
   ========================================================================== */
/*
   Font size mixin
   ========================================================================== */
/*
   Components mixins
   ========================================================================== */
/*
   Product Finder arrows with shadow and gradients
   ========================================================================== */
/*
   Z-Index Management
   ========================================================================== */
/*
*  Idea behind it: http://www.smashingmagazine.com/2014/06/12/sassy-z-index-management-for-complex-layouts/
*  The compiler we have available (less 1.3.3) doesn't support too many things
*  So, we have found this 'hack' to create functions who manage the z-index for us...
*  We love them.
*  Usage:
*     p {
*       .get-z-index(background-gradient);
*     }
*
* Note: Do not use quotes.
* Note 2: Do not call the function directly
*/
/*
 * grid.less
 * [ Contains grid mixins for global use in all components ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     2015-05-04
 * @author:   Søren Birkemeyer, sbirkemeyer@sapient.com
 * @licensor: SAPIENTNITRO
 */
/**
 * mixins-texture.less
 * [ Here we define all the texture mixins required to be used along Loctite-Responsive ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     04.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 *
 *
*/
/**
 * navigation-mixins.less
 * [ Here you'll find and define mixins which are used by the navigation and its submenus, either in meta-nav or in main-nav ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 *
*/
/*
   Mixins for mobile
   ========================================================================== */
/*
   Mixin for Desktop navigation
   ========================================================================== */
/*
   Triangle of the submenu in the navigation
   ========================================================================== */
/*
   Definition of the styles of the <ul> elements in navigation
   ========================================================================== */
/**
 * defaults-skin.less
 * [ This file add default styles to elements used globally in the project ]
 * @mobileFirst
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 */
#ui a {
  font-size: 13px;
  display: inline-block;
  line-height: 1;
  text-decoration: none;
  color: #fff;
}
#ui a:focus,
#ui a:hover {
  background-color: transparent;
  color: #fff;
  text-decoration: underline;
}
#ui a:link,
#ui a:visited {
  color: inherit;
}
#ui p,
#ui span {
  font-size: 13px;
  line-height: 1.333;
  color: #fff;
}
#ui ul,
#ui ol {
  list-style: none;
}
#ui .hidden {
  display: none !important;
}
#ui button,
#ui input[type="button"],
#ui input[type="submit"] {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
  outline: transparent;
  font-family: Lato, 'Helvetica', sans-serif;
}
#ui input:focus,
#ui button:focus textarea:focus,
#ui select:focus,
#ui a:focus,
#ui a:active {
  outline: transparent;
}
#ui .button {
  background: -webkit-gradient(linear, left top, left bottom, from(#c50223), to(#99011b));
  background: -webkit-linear-gradient(top, #c50223, #99011b);
  background: -moz-linear-gradient(top, #c50223, #99011b);
  background: -ms-linear-gradient(top, #c50223, #99011b);
  background: -o-linear-gradient(top, #c50223, #99011b);
  background-color: #c50223;
  -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  cursor: pointer;
  display: inline-block;
  padding: 7px 15px;
  text-transform: uppercase;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
#ui .button span,
#ui .button a {
  color: #fff;
  padding-right: 35px;
  position: relative;
  text-transform: uppercase;
  word-wrap: break-word;
  white-space: nowrap;
  font-size: inherit;
}
#ui .button span:before,
#ui .button a:before {
  content: "";
  position: absolute;
}
#ui .button span:before,
#ui .button a:before {
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -110px -90px;
  width: 21px;
  height: 14px;
  display: inline-block;
  right: 2px;
  top: 2px;
}
#ui .button span:after,
#ui .button a:after {
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  content: "";
  padding-left: 15px;
}
#ui .button a {
  line-height: normal;
}
#ui .button a:hover,
#ui .button a:active,
#ui .button a:focus {
  text-decoration: none;
}
#ui .button:hover,
#ui .button:active,
#ui .button:focus {
  text-decoration: none;
}
#ui .skiplinktarget {
  display: none;
}
#ui .textimage ul,
#ui .taglist ul,
#ui .faqpanel ul,
#ui .textimage ol,
#ui .taglist ol,
#ui .faqpanel ol {
  margin: 10px 0;
  margin-left: 15px;
}
#ui .textimage li,
#ui .taglist li,
#ui .faqpanel li {
  padding-bottom: 10px;
  padding-left: 10px;
}
#ui .textimage li,
#ui .taglist li,
#ui .faqpanel li,
#ui .textimage li span,
#ui .taglist li span,
#ui .faqpanel li span {
  font-size: 13px;
  line-height: 1.333;
  color: #fff;
}
#ui .textimage li span,
#ui .taglist li span,
#ui .faqpanel li span {
  display: block;
}
#ui .textimage ul li,
#ui .taglist ul li,
#ui .faqpanel ul li {
  margin-left: 12px;
  position: relative;
}
#ui .textimage ul li:before,
#ui .taglist ul li:before,
#ui .faqpanel ul li:before {
  border: 3px solid #c50223;
  content: "";
  left: -12px;
  position: absolute;
}
#ui .textimage ul li:before,
#ui .taglist ul li:before,
#ui .faqpanel ul li:before {
  top: 6.5px;
}
#ui .textimage ol,
#ui .taglist ol,
#ui .faqpanel ol {
  margin-left: 27px;
}
#ui .textimage ol li,
#ui .taglist ol li,
#ui .faqpanel ol li {
  position: relative;
}
#ui .textimage ol li .listitemstyle,
#ui .taglist ol li .listitemstyle,
#ui .faqpanel ol li .listitemstyle {
  color: #c50223;
  background-color: #cccccc;
  content: "";
  display: inline-block;
  float: left;
  font-weight: bold;
  margin: -2px 0 0 -24px;
  padding: 2px 5px;
  text-align: center;
}
@media screen and (min-width: 641px) {
  #ui a {
    font-size: 13px;
  }
  #ui p,
  #ui span {
    font-size: 13px;
  }
  #ui .button {
    font-size: 13px;
    padding-bottom: 7px;
    padding-top: 7px;
  }
  #ui .textimage li,
  #ui .taglist li,
  #ui .faqpanel li {
    font-size: 13px;
  }
}
@media screen and (min-width: 1025px) {
  #ui .main-nav .level2 li a,
  #ui #header .meta-nav .level2 li a,
  #ui .main-nav .level3 li a,
  #ui #header .meta-nav .level3 li a {
    border-bottom-width: 0;
    display: block;
    padding: 10px 0 10px 18px;
    text-align: left;
    text-transform: none;
    font-weight: normal;
  }
  #ui .main-nav .level2 li a:before,
  #ui #header .meta-nav .level2 li a:before,
  #ui .main-nav .level3 li a:before,
  #ui #header .meta-nav .level3 li a:before {
    color: #c50223;
    content: "\BB";
    font-size: 16px;
    font-weight: bold;
  }
  #ui .main-nav .level2 li a:before,
  #ui #header .meta-nav .level2 li a:before,
  #ui .main-nav .level3 li a:before,
  #ui #header .meta-nav .level3 li a:before {
    margin-left: -18px;
    margin-right: 5px;
  }
  #ui .main-nav .level2 li:hover a,
  #ui #header .meta-nav .level2 li:hover a,
  #ui .main-nav .level3 li:hover a,
  #ui #header .meta-nav .level3 li:hover a,
  #ui .main-nav .level2 li:focus a,
  #ui #header .meta-nav .level2 li:focus a,
  #ui .main-nav .level3 li:focus a,
  #ui #header .meta-nav .level3 li:focus a {
    color: #c50223;
    text-decoration: none;
  }
  #ui .main-nav li:hover .level2,
  #ui #header .meta-nav li:hover .level2,
  #ui .main-nav li.hover .level2,
  #ui #header .meta-nav li.hover .level2 {
    margin-left: 22px;
    position: relative;
    margin-left: 0;
    left: -18px;
  }
  #ui .main-nav li:hover .level2:before,
  #ui #header .meta-nav li:hover .level2:before,
  #ui .main-nav li.hover .level2:before,
  #ui #header .meta-nav li.hover .level2:before {
    border: 11px solid transparent;
    border-bottom-color: #fff;
    content: "";
    left: -22px;
    position: absolute;
  }
  #ui .main-nav li:hover .level2:before,
  #ui #header .meta-nav li:hover .level2:before,
  #ui .main-nav li.hover .level2:before,
  #ui #header .meta-nav li.hover .level2:before {
    top: -22px;
    left: 18px;
  }
  #ui .main-nav .level2,
  #ui #header .meta-nav .level2 {
    top: 9px;
  }
  #ui .main-nav .level2 li,
  #ui #header .meta-nav .level2 li {
    float: none;
    border-right: 0;
    border-top: 1px solid #cccccc;
    display: block;
    position: relative;
  }
  #ui .main-nav .level2 li:first-child,
  #ui #header .meta-nav .level2 li:first-child {
    border-top: 0;
  }
  #ui .main-nav li:hover > .level3,
  #ui #header .meta-nav li:hover > .level3,
  #ui .main-nav li.hover > .level3,
  #ui #header .meta-nav li.hover > .level3 {
    margin-left: 22px;
    position: relative;
    margin-left: 0;
    margin-top: -35px;
    left: -220px;
    top: -5px;
  }
  #ui .main-nav li:hover > .level3:before,
  #ui #header .meta-nav li:hover > .level3:before,
  #ui .main-nav li.hover > .level3:before,
  #ui #header .meta-nav li.hover > .level3:before {
    border: 11px solid transparent;
    border-left-color: #fff;
    content: "";
    left: -22px;
    position: absolute;
  }
  #ui .main-nav li:hover > .level3:before,
  #ui #header .meta-nav li:hover > .level3:before,
  #ui .main-nav li.hover > .level3:before,
  #ui #header .meta-nav li.hover > .level3:before {
    left: 188px;
    top: 20px;
  }
  #ui .main-nav li:hover > .level3 a,
  #ui #header .meta-nav li:hover > .level3 a,
  #ui .main-nav li.hover > .level3 a,
  #ui #header .meta-nav li.hover > .level3 a {
    color: inherit;
  }
  #ui .main-nav .level3,
  #ui #header .meta-nav .level3 {
    height: 35px;
    left: 0;
    top: 0px;
    position: absolute;
    width: 220px;
  }
  #ui .main-nav .level3 li:hover a,
  #ui #header .meta-nav .level3 li:hover a,
  #ui .main-nav .level3 li.hover a,
  #ui #header .meta-nav .level3 li.hover a {
    color: #c50223;
    text-decoration: none;
  }
}
@font-face {
  font-family: 'heli';
  src: url('../../../designs/henkel-lib/common/font/heli/heli.eot');
  src: url('../../../designs/henkel-lib/common/font/heli/heli.eot?#iefix') format('embedded-opentype'), url('../../../designs/henkel-lib/common/font/heli/heli.svg#cqsicon') format('svg'), url('../../../designs/henkel-lib/common/font/heli/heli.woff') format('woff'), url('../../../designs/henkel-lib/common/font/heli/heli.ttf') format('truetype');
}
/**
 * HENKEL library css: icons
 * @description: global icon definitions (heli font)
 */
#ui .icon-heli {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
}
#ui .icon-heli-triangle:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\21";
  font-size: 1.25em;
  letter-spacing: -0.1em;
  margin-left: -0.15em;
  position: relative;
  top: 0.1em;
}
#ui .icon-heli-triangle-2:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\22";
}
#ui .icon-heli-triangle-3:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\23";
}
#ui .icon-heli-triangle-4:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\24";
}
#ui .icon-arrow:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\25";
}
#ui .icon-arrow-2:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\26";
}
#ui .icon-arrow-3:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\27";
}
#ui .icon-arrow-4:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\28";
}
#ui .icon-plus:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\29";
}
#ui .icon-minus:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\2a";
}
#ui .icon-checkmark:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\2b";
}
#ui .icon-cancel:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\2c";
}
#ui .icon-loading:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\2d";
}
#ui .icon-radio-unchecked:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\2e";
}
#ui .icon-heli-contentpage:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\2f";
}
#ui .icon-heli-productpage:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\30";
}
#ui .icon-copy:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\31";
}
#ui .icon-heli-articlepage:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\32";
}
#ui .icon-minus-2:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\33";
}
#ui .icon-plus-2:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\34";
}
#ui .icon-close:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\35";
}
#ui .icon-picture:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\36";
}
#ui .icon-tag:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\37";
}
#ui .icon-play:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\38";
}
#ui .icon-microphone:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\39";
}
#ui .icon-calendar:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\3a";
}
#ui .icon-help:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\3b";
}
#ui .icon-info:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\3c";
}
#ui .icon-phone:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\3d";
}
#ui .icon-attachment:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\3f";
}
#ui .icon-reload-CW:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\40";
}
#ui .icon-record:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\41";
}
#ui .icon-stop:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\42";
}
#ui .icon-checkbox-partial:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\43";
}
#ui .icon-checkbox-unchecked:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\44";
}
#ui .icon-checkbox:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\45";
}
#ui .icon-radio-checked:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\46";
}
#ui .icon-navbar:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\4e";
}
#ui .icon-search:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\53";
}
#ui .icon-nav-prev:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\70";
}
#ui .icon-nav-next:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\6e";
}
#ui .icon-nav-top:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\74";
}
#ui .icon-nav-bottom:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\64";
}
#ui .icon-login:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\5f";
}
#ui .icon-user:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\55";
  height: 30px;
}
/**
 * comp: skiplink
 */
@media all {
  #ui .skiplink {
    top: 35px;
    left: 200px;
  }
  #ui .skiplink a {
    font-weight: bold;
    font-family: Lato, 'Helvetica', sans-serif;
    margin-left: 5px;
  }
  #ui .skiplink a:active,
  #ui .skiplink #ui .skiplink a:focus {
    background: #FFCA00;
    color: #DC2A20;
  }
}
/*
 * page.less
 * [ Contains all LESS code for the overall styles ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     04.2015
 * @author:   Daniela Valero, dvaler@sapient.com
 * @licensor: SAPIENTNITRO
 *
 */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  overflow-y: auto;
}
html,
body {
  height: 100%;
  min-height: 100%;
}
body {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
  color: #fff;
  font-family: Lato, 'Helvetica', sans-serif;
  font-size: 100%;
  line-height: 1.5;
}
/* added in case page-author.less is not loaded */
body.cq-wcm-edit {
  overflow-y: visible;
}
#ui {
  min-height: 100%;
  position: relative;
  width: 100%;
}
#ui:before {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.4, #0060a4), color-stop(1, #003a74));
  background-image: -moz-linear-gradient(center top, #0060a4 40, #003a74 100);
  background-image: -ms-linear-gradient(top, #0060a4 40, #003a74 100);
  background-image: -o-linear-gradient(top, #0060a4 40, #003a74 100);
  background-image: linear-gradient(top, #0060a4 40, #003a74 100);
  z-index: -1;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: #0060a4;
}
.landingpage--kintsuglue #ui:before {
  background-image: none;
  height: 118px;
}
#ui .wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -o-box;
  display: box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  -o-box-orient: vertical;
  box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}
#ui #main {
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;
  width: 100%;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  -o-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0 20px;
  position: relative;
}
.homepage #ui #main #j-content {
  position: absolute;
}
.landingpage--kintsuglue #ui #header {
  height: 94px;
}
#ui #content.afterStage {
  position: relative;
  margin-top: 20px;
}
#ui #sidebar-right {
  width: 100%;
}
#ui #sidebar-left {
  display: none;
}
#ui #meta {
  float: right;
  padding-bottom: 4px;
  padding-top: 21px;
}
#ui .solid #content {
  background: #e2e2e2;
  border-radius: 5px;
  color: #333333;
  border-radius: 0;
  -webkit-box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  padding: 20px;
}
#ui.col2r #content {
  width: 100%;
}
.homepage #ui #content {
  margin-bottom: 20px;
  margin-top: 0;
}
.contentpage #ui #content,
.articlepage #ui #content,
.contentpage #ui #sidebar-right,
.articlepage #ui #sidebar-right {
  margin-bottom: 20px;
}
.articlepage #ui #content {
  background: #e2e2e2;
  border-radius: 5px;
  color: #333333;
  border-radius: 0;
  -webkit-box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  padding: 20px;
}
@media screen and (min-width: 641px) {
  #ui #content,
  #ui #sidebar-right {
    margin-bottom: 20px;
  }
  #ui #sidebar-right {
    float: right;
    width: 32%;
  }
  #ui.col2r #content {
    width: 66.66666666%;
    float: left;
    margin-right: 0;
  }
}
@media screen and (min-width: 1025px) {
  #ui.col2r #content {
    width: 75%;
  }
  #ui #main {
    padding: 0;
  }
  #ui #sidebar-right {
    width: 24%;
  }
}
/*
 * header.less
 * [ Contains all LESS code for header layout ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     2015-05-011
 * @author:   Søren Birkemeyer, sbirkemeyer@sapient.com
 * @licensor: SAPIENTNITRO
 *
 * @name Header (layout)
 * @description This is not a real component, but layout styles for the global header are in this file.
 *
 * @markup
 <header class="cl" id="header" role="banner">
    <div id="headerWrapper">
        <h1 class="rd">
          English
        </h1>
        <div id="meta">
            <a id="j-meta-nav" href="#"></a>
            <nav class="meta-nav">
                <ul class="h-nav level1">
                    <li class="hassub">
                        <a href="/content/test/loctite-responsive/master/www/en/meta/meta-nav/contact---dialog.html"
                           title="Contact &amp; Dialog">
                            Contact &amp; Dialog
                            <span></span>
                        </a>
                        <ul class="level2 rd">
                            <li>
                                <a href="/content/test/loctite-responsive/master/www/en/meta/meta-nav/contact---dialog/contact.html"
                                   title="Contact">Contact</a></li>
                            <li>
                                <a href="/content/test/loctite-responsive/master/www/en/meta/meta-nav/contact---dialog/dialog.html"
                                   title="Dialog">Dialog</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="/content/test/loctite-responsive/master/www/en/meta/meta-nav/faq.html" title="FAQ">
                            FAQ
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="countryswitch">
                <a href="/content/test/loctite-responsive/master/www/en/meta/countryselector.html" title="Master - english">
                    <span>Country</span>
                    <img src="/assets/img/demo.heli.flag_germany.png" alt="Master">
                </a>
            </div>
            <div class="search input-box">
                <form class="cl" role="search" method="get"
                      action="/content/test/loctite-responsive/master/www/en/meta/search.html">
                    <p class="searchfield"><input type="search" id="f-header-search" placeholder="" name="q" value=""></p>
                    <p class="searchbutton">
                        <button></button>
                    </p>
                </form>
            </div>
        </div>
        <figure class="logo parbase image">
            <a href="/content/test/loctite-responsive/master/www/en.html">
                <img title="" alt="" class="cq-dd-image " src="/assets/img/header-logo.png">
            </a>
        </figure>
        <a id="j-main-nav" href="#"></a>
        <div id="navigationWrapper">
            <nav id="main-nav" class="main-nav" role="navigation">
                <div class="level1">
                    <ul class="h-nav">
                        <li class=" hassub">
                        <a href="/content/test/loctite-responsive/master/www/en/democontent.html" title="Democontent">Democontent</a>
                        <div class="level2">
                        <ul class="rd dropdown">
                        <li class=" hassub">
                            <a href="/content/test/loctite-responsive/master/www/en/democontent/contentpages.html" title="Contentpages">Contentpages</a>
                            <div class="level3">
                                <ul class="rd dropdown">
                                    <li class=" ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/contentpages/contentpage-1-column.html"
                                           title="Contentpage 1 Column">Contentpage 1 Column</a>
                                    </li>
                                    <li class=" ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/contentpages/contentpage-2-columns.html"
                                           title="Contentpage 2 Columns">Contentpage 2 Columns</a>
                                    </li>
                                    <li class="last ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/contentpages/contentpage-2-columns1.html"
                                           title="Contentpage 2 Columns inverted">Contentpage 2 Columns inverted</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class=" ">
                            <a href="/content/test/loctite-responsive/master/www/en/democontent/articlepage.html" title="Articlepage">Articlepage</a>
                        </li>
                        <li class=" hassub">
                            <a href="/content/test/loctite-responsive/master/www/en/democontent/column-controls.html" title="Column Controls">Column
                                Controls</a>
                            <div class="level3">
                                <ul class="rd dropdown">
                                    <li class=" ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/column-controls/column-control-articlepage.html"
                                           title="Column Control Articlepage">Column Control Articlepage</a>
                                    </li>
                                    <li class=" ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/column-controls/column-control-contentpage-2col-coloured.html"
                                           title="Column Control Contentpage 2Col Coloured">Column Control Contentpage 2Col Coloured</a>
                                    </li>
                                    <li class=" ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/column-controls/column-control-stage.html"
                                           title="Column Control Stage">Column Control Stage</a>
                                    </li>
                                    <li class=" ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/column-controls/column-control-contentpage-1col.html"
                                           title="Column Control Contentpage 1Col">Column Control Contentpage 1Col</a>
                                    </li>
                                    <li class="last ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/column-controls/column-control-contentpage-2col.html"
                                           title="Column Control Contentpage 2Col">Column Control Contentpage 2Col</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class=" hassub">
                            <a href="/content/test/loctite-responsive/master/www/en/democontent/teasergallery.html" title="Teasergallery">Teasergallery</a>
                            <div class="level3">
                                <ul class="rd dropdown">
                                    <li class=" ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/teasergallery/repair-a-broken-cup.html"
                                           title="Repair a broken cup">Repair a broken cup</a>
                                    </li>
                                    <li class=" ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/teasergallery/repair-broken-glass.html"
                                           title="Repair broken glass">Repair broken glass</a>
                                    </li>
                                    <li class=" ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/teasergallery/repair-a-broken-vase.html"
                                           title="Repair a broken vase">Repair a broken vase</a>
                                    </li>
                                    <li class=" ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/teasergallery/repair-a-plastic-toy.html"
                                           title="Repair a plastic toy">Repair a plastic toy</a>
                                    </li>
                                    <li class=" ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/teasergallery/repair-a-shoe.html"
                                           title="Repair a shoe">Repair a shoe</a>
                                    </li>
                                    <li class="last ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/teasergallery/repair-a-broken-sunglasses.html"
                                           title="Repair a broken sunglasses">Repair a broken sunglasses</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class=" hassub">
                            <a href="/content/test/loctite-responsive/master/www/en/democontent/stage.html" title="Stage">Stage</a>
                            <div class="level3">
                                <ul class="rd dropdown">
                                    <li class=" ">
                                        <a href="/content/test/loctite-responsive/master/www/en.html" title="Stage with Image, Text and Teaser">Stage
                                            with Image, Text and Teaser</a>
                                    </li>
                                    <li class=" ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/stage/stage-with-image--text.html"
                                           title="Stage with Image, Text">Stage with Image, Text</a>
                                    </li>
                                    <li class="last ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/stage/stage-only-text.html"
                                           title="Stage only Text">Stage only Text</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class=" ">
                            <a href="/content/test/loctite-responsive/master/www/en/democontent/productdetails.html" title="Productdetails">Productdetails</a>
                        </li>
                        <li class=" ">
                            <a href="/content/test/loctite-responsive/master/www/en/democontent/video.html" title="Video">Video</a>
                        </li>
                        <li class=" hassub">
                            <a href="/content/test/loctite-responsive/master/www/en/democontent/teaser.html" title="Teaser">Teaser</a>
                            <div class="level3">
                                <ul class="rd dropdown">
                                    <li class="last ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/teaser/marginal-teaser.html"
                                           title="Marginal teaser">Marginal teaser</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class=" hassub">
                            <a href="/content/test/loctite-responsive/master/www/en/democontent/text-image.html" title="Text&amp;Image">Text&amp;Image</a>
                            <div class="level3">
                                <ul class="rd dropdown">
                                    <li class=" ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/text-image/text-image-contentpage-2col-column-control.html"
                                           title="Text&amp;Image Contentpage 2Col Column Control">Text&amp;Image Contentpage 2Col Column
                                            Control</a>
                                    </li>
                                    <li class=" ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/text-image/text-image-contentpage-2col.html"
                                           title="Text&amp;Image Contentpage 2Col">Text&amp;Image Contentpage 2Col</a>
                                    </li>
                                    <li class=" ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/text-image/text-image-articlepage.html"
                                           title="Text&amp;Image Articlepage">Text&amp;Image Articlepage</a>
                                    </li>
                                    <li class="last ">
                                        <a href="/content/test/loctite-responsive/master/www/en/democontent/text-image/text-image-productpage.html"
                                           title="Text&amp;Image Productpage">Text&amp;Image Productpage</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class=" ">
                            <a href="/content/test/loctite-responsive/master/www/en/democontent/campaign.html" title="campaign">campaign</a>
                        </li>
                        <li class=" ">
                            <a href="/content/test/loctite-responsive/master/www/en/democontent/youtube.html" title="Youtube">Youtube</a>
                        </li>
                        <li class=" ">
                            <a href="/content/test/loctite-responsive/master/www/en/democontent/accordion.html" title="Accordion">Accordion</a>
                        </li>
                        <li class="last ">
                            <a href="/content/test/loctite-responsive/master/www/en/democontent/download.html" title="Download">Download</a>
                        </li>
                        </ul>
                        </div>
                        </li>
                        <li class=" hassub">
                            <a href="/content/test/loctite-responsive/master/www/en/how-to.html" title="How to">How to</a>
                        </li>
                        <li class=" hassub">
                            <a href="/content/test/loctite-responsive/master/www/en/products.html" title="Products">Products</a>
                        </li>
                        <li class=" hassub">
                            <a href="/content/test/loctite-responsive/master/www/en/gluefinder.html" title="Glue Finder">Glue Finder</a>
                        </li>
                        <li class="last hassub">
                            <a href="/content/test/loctite-responsive/master/www/en/did-you-know.html" title="Did you know">Did you know</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</header>
 */
#ui #headerWrapper {
  zoom: 1;
  padding: 0 20px;
}
#ui #headerWrapper:before,
#ui #headerWrapper:after {
  content: "";
  display: table;
}
#ui #headerWrapper:after {
  clear: both;
}
#ui #header {
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;
  width: 100%;
  margin-bottom: 0;
  position: relative;
}
@media screen and (min-width: 641px) {
  #ui #headerWrapper {
    padding: 0 20px;
  }
}
@media screen and (min-width: 1025px) {
  #ui #headerWrapper {
    padding: 0;
  }
}
/*
 * footer.less
 * [ Contains all LESS code for the overall styles ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     2015-05-07
 * @author:   Søren Birkemeyer, sbirkemeyer@sapient.com
 * @licensor: SAPIENTNITRO
 *
 * @name Footer (layout)
 * @description This is not a real component, but layout styles for the global footer are in this file. Navigation can be found in footer-nav.less and the copyright note is styled in footnote.less
 *
 * @markup
 * <footer class="cl" id="footer">
 *   <div class="footer-wrapper">
 *     <a id="j-footer" href="#"></a>
 *     <figure class="logo parbase footer-logo image">
 *       <img title="" alt="" class="cq-dd-image " src="/assets/img/footer-logo.png">
 *     </figure>
 *     <small class="footnote">© 2015 </small>
 *     <nav class="meta-nav">
 *       <ul class="h-nav level1">
 *         <li class="">
 *           <a href="/content/test/loctite-responsive/master/www/en/meta/footer-nav/sitemap.html" title="Sitemap">
 *             Sitemap
 *           </a>
 *         </li>
 *         <li class="">
 *           <a href="/content/test/loctite-responsive/master/www/en/meta/footer-nav/imprint.html" title="Imprint">
 *             Imprint
 *           </a>
 *         </li>
 *         <li class="">
 *           <a href="/content/test/loctite-responsive/master/www/en/meta/footer-nav/terms-of-use.html" title="Terms of use">
 *             Terms of use
 *           </a>
 *         </li>
 *         <li>
 *           <a href="/content/test/loctite-responsive/master/www/en/meta/footer-nav/privacy-policy.html" title="Privacy Policy">
 *             Privacy Policy
 *           </a>
 *         </li>
 *       </ul>
 *     </nav>
 *   </div>
 * </footer>
 */
#ui #footer {
  background-color: #0060a4;
}
#ui #footer #j-footer {
  display: none;
}
#ui #footer .footer-wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;
  width: 100%;
  padding: 5px 20px 35px;
  position: relative;
}
#ui #footer .logo,
#ui #footer .footnote {
  position: absolute;
  right: 20px;
}
#ui #footer .logo {
  bottom: 10px;
}
#ui #footer .footnote {
  bottom: 15px;
  color: #fff;
  font-size: 12px;
  font-family: Lato, 'Helvetica', sans-serif;
  right: 132px;
}
@media screen and (min-width: 641px) {
  #ui #footer .footer-wrapper {
    padding: 0;
  }
  #ui #footer .logo,
  #ui #footer .footnote {
    float: right;
    position: static;
  }
  #ui #footer .logo {
    padding-top: 5px;
  }
  #ui #footer .footnote {
    border-left: 1px solid #3380b6;
    -moz-box-shadow: inset 1px 0 #003a74;
    -webkit-box-shadow: inset 1px 0 #003a74;
    box-shadow: inset 1px 0 #003a74;
    padding: 9px 10px 8px;
  }
}
/*
 * colctrl-skin.less
 * [ Contains all LESS code for the column control component ]
 * Note: This less file is mobile first
 *
 * @project:  Henkel Loctite Responsive
 * @date:     2015-05-04
 * @author:   Søren Birkemeyer, sbirkemeyer@sapient.com
 * @licensor: SAPIENTNITRO
 *
 */
#ui .cq-colctrl-lt0,
#ui .cq-colctrl-lt1,
#ui .cq-colctrl-lt2,
#ui .cq-colctrl-lt3 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  zoom: 1;
  margin-left: -18px;
  margin-right: -18px;
}
#ui .cq-colctrl-lt0:before,
#ui .cq-colctrl-lt1:before,
#ui .cq-colctrl-lt2:before,
#ui .cq-colctrl-lt3:before,
#ui .cq-colctrl-lt0:after,
#ui .cq-colctrl-lt1:after,
#ui .cq-colctrl-lt2:after,
#ui .cq-colctrl-lt3:after {
  content: "";
  display: table;
}
#ui .cq-colctrl-lt0:after,
#ui .cq-colctrl-lt1:after,
#ui .cq-colctrl-lt2:after,
#ui .cq-colctrl-lt3:after {
  clear: both;
}
#ui [class*="cq-colctrl-lt0-c"],
#ui [class*="cq-colctrl-lt1-c"],
#ui [class*="cq-colctrl-lt2-c"],
#ui [class*="cq-colctrl-lt3-c"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  float: left;
  margin: 0;
  min-height: 1px;
  padding-left: 18px;
  padding-right: 18px;
  position: relative;
}
#ui [class*="cq-colctrl-lt0-c"],
#ui [class*="cq-colctrl-lt1-c"],
#ui [class*="cq-colctrl-lt2-c"],
#ui [class*="cq-colctrl-lt3-c"],
#ui [class*="cq-colctrl-lt6-c"] {
  width: 100%;
}
@media screen and (min-width: 641px) {
  #ui [class*="cq-colctrl-lt0-c"] {
    width: 50%;
  }
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt0-c"] {
    padding-left: 5px;
    padding-right: 5px;
  }
  #ui [class*="cq-colctrl-lt1-c"] {
    width: 33.33333333%;
  }
  #ui [class*="cq-colctrl-lt6-c"] {
    width: 25%;
  }
  #ui .cq-colctrl-lt2-c0 {
    width: 66.66666666%;
  }
  #ui .cq-colctrl-lt2-c1 {
    width: 33.33333333%;
  }
  #ui .cq-colctrl-lt3-c0 {
    width: 33.33333333%;
  }
  #ui .cq-colctrl-lt3-c1 {
    width: 66.66666666%;
  }
}
#ui #header .logo {
  margin-left: 15px;
  margin-bottom: 20px;
  float: left;
}
#ui #header .logo a {
  float: none;
}
#ui #header .logo img {
  display: block;
  max-width: 100%;
}
#ui #header .logo figcaption {
  clear: none;
  color: #0060a4;
  float: left;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  padding: 33px 0 0 10px;
  width: 200px;
}
@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  #ui #header .logo {
    margin: 10px 0 0 0;
    max-width: 150px;
    width: 100%;
  }
}
@media screen and (min-width: 641px) {
  #ui #header .logo {
    width: 241px;
    margin: 0 0 0 20px;
  }
  .landingpage--kintsuglue #ui #header .logo {
    margin-top: 21px;
  }
}
@media screen and (min-width: 1025px) {
  #ui #header .logo {
    margin: 0 34px 20px 0;
  }
}
/**
 *  main-nav.less
 * [ Here the styles of the navigation are defined, for mobile and desktop ]
 *
 * @mobileFirst
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 *
 * @name Main Navigation
 * @description The menu consists of a first level menu bar and a popup menu for the second and if requested for the third level. The menu elements are links to the pages of the content hierarchy.
 *
 */
#ui {
  overflow-x: hidden;
  /*
       Mobile navigation
       ========================================================================== */
}
#ui #navigationWrapper {
  display: none;
}
#ui .wrapper {
  -webkit-transition: -webkit-transform 300ms ease 0;
  -moz-transition: -moz-transform 300ms ease 0;
  transition: -webkit-transform 300ms ease 0;
  transition: transform 300ms ease 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /*
           Icons of mobile navigation
           ========================================================================== */
  /*
           Icon to close the mobile navigation
           ========================================================================== */
  /*
           Class to move content and show mobile navigation
           ========================================================================== */
}
#ui .wrapper .indicatorlist {
  display: block;
  float: right;
  margin: 40px 0px 20px 0;
  padding: 0;
}
.landingpage--kintsuglue #ui .wrapper .indicatorlist {
  margin-bottom: 8px;
}
#ui .wrapper .indicatorlist li {
  display: inline-block;
  float: right;
  margin-left: 5px;
  max-height: 42px;
  max-width: 42px;
  padding: 5px;
}
#ui .wrapper .indicatorlist li:hover button {
  color: #c0e2fb;
}
#ui .wrapper .indicatorlist button {
  border: none;
  display: initial;
  width: 32px;
}
#ui .wrapper .indicatorlist button:before {
  font-size: 30px;
}
#ui .wrapper .navbarswitch {
  z-index: 50;
  background: rgba(51, 51, 51, 0.25);
  cursor: pointer;
  display: none;
  min-height: 100%;
  position: absolute;
  right: 0px;
  top: 0;
  width: 12.8125%;
}
#ui .wrapper .navbarswitch .icon-nav-next {
  padding: 0;
  position: absolute;
  top: 0;
  width: 18px;
  height: 100%;
  right: 0;
  background: #0060a4;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  color: inherit;
  height: 50px;
  margin-top: -50px;
  top: 50%;
  width: 40px;
}
#ui .wrapper .navbarswitch .icon-nav-next:before {
  color: inherit;
  font-size: 40px;
  left: 0;
  line-height: 0;
  position: absolute;
  top: 37%;
}
#ui .wrapper .navbarswitch .icon-nav-next:before {
  content: "\203A";
}
#ui .wrapper .navbarswitch .icon-nav-next:before {
  left: 40%;
}
#ui .wrapper.navbar {
  -webkit-transform: translate3d(-87.1875%, 0, 0);
  -moz-transform: translate3d(-87.1875%, 0, 0);
  -ms-transform: translate3d(-87.1875%, 0, 0);
  -o-transform: translate3d(-87.1875%, 0, 0);
  transform: translate3d(-87.1875%, 0, 0);
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  position: absolute;
  width: 100%;
}
#ui .wrapper.navbar video,
#ui .wrapper.navbar embed {
  display: none;
  -webkit-transform-style: preserve-3d;
}
#ui .wrapper.navbar .navbarswitch {
  display: block;
}
#ui #navbar {
  background: #0060a4;
  height: 100%;
  -ms-overflow-style: none !important;
  overflow-y: auto;
  padding: 20px 5px 20px 0;
  position: fixed;
  -webkit-overflow-scrolling: touch;
  width: 87.1875%;
}
#ui #navbar.transition {
  -webkit-transition: -webkit-transform 300ms ease 0;
  -moz-transition: -moz-transform 300ms ease 0;
  transition: -webkit-transform 300ms ease 0;
  transition: transform 300ms ease 0;
  display: block;
  right: -87.1875%;
  top: 0;
}
#ui #navbar.active {
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
#ui #navbar nav {
  clear: both;
  display: block;
  float: none;
}
#ui #navbar nav.main-nav {
  margin: 0;
  margin-bottom: 30px;
  position: relative;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
#ui #navbar nav.main-nav [class*="level"] {
  -webkit-transition: all 300ms ease 0;
  -moz-transition: all 300ms ease 0;
  -ms-transition: all 300ms ease 0;
  -o-transition: all 300ms ease 0;
  transition: all 300ms ease 0;
  clear: both;
  display: block;
  float: none;
  position: absolute;
  width: 100%;
}
#ui #navbar nav.main-nav [class*="level"] {
  left: 100%;
}
#ui #navbar nav.main-nav [class*="level"].curlevel {
  left: 0;
}
#ui #navbar nav.main-nav .prevlevel {
  left: -100%;
}
#ui #navbar nav.main-nav li {
  background: #e2e2e2;
  border-radius: 0;
  color: #003a74;
  border-bottom: 2px solid #0060a4;
  margin: 0;
  padding: 16px 10px;
}
#ui #navbar nav.main-nav li span {
  color: inherit;
  text-transform: uppercase;
  font-weight: bold;
}
#ui #navbar nav.main-nav li:last-of-type {
  border-bottom-width: 0;
}
#ui #navbar nav.main-nav li:hover {
  background: #c50223;
  color: #fff;
}
#ui #navbar nav.main-nav li .icon-nav-next:before {
  content: "";
}
#ui #navbar nav.main-nav li a {
  display: inline-block;
  line-height: 20px;
  margin-left: 20px;
  position: relative;
}
#ui #navbar nav.main-nav li button,
#ui #navbar nav.main-nav li.hassub button {
  padding: 0;
  position: absolute;
  top: 0;
  width: 18px;
  height: 100%;
  left: -19px;
}
#ui #navbar nav.main-nav li button:before,
#ui #navbar nav.main-nav li.hassub button:before {
  color: inherit;
  font-size: 24px;
  left: 0;
  line-height: 0;
  position: absolute;
  top: 37%;
}
#ui #navbar nav.main-nav li button:before,
#ui #navbar nav.main-nav li.hassub button:before {
  content: "\203A";
}
#ui #navbar nav.main-nav li .txt {
  display: inline-block;
}
#ui #navbar nav.main-nav li.backlink button {
  padding: 0;
  position: absolute;
  top: 0;
  width: 18px;
  height: 100%;
  left: -19px;
}
#ui #navbar nav.main-nav li.backlink button:before {
  color: inherit;
  font-size: 24px;
  left: 0;
  line-height: 0;
  position: absolute;
  top: 37%;
}
#ui #navbar nav.main-nav li.backlink button:before {
  content: "\2039";
}
#ui #navbar nav.main-nav li ul li a {
  font-size: 13px;
  line-height: 1.333;
  color: #fff;
  color: #333333;
  font-weight: normal;
}
#ui #navbar nav.main-nav li ul li a:focus,
#ui #navbar nav.main-nav li ul li a:hover {
  color: #c50223;
}
@media screen and (min-width: 641px) {
  #ui .wrapper.navbar {
    -webkit-transform: translate3d(-57.1875%, 0, 0);
    -moz-transform: translate3d(-57.1875%, 0, 0);
    -ms-transform: translate3d(-57.1875%, 0, 0);
    -o-transform: translate3d(-57.1875%, 0, 0);
    transform: translate3d(-57.1875%, 0, 0);
  }
  #ui #navbar {
    width: 57.1875%;
  }
  #ui #navbar.transition {
    right: -57.1875%;
  }
}
@media screen and (min-width: 1025px) {
  #ui #navbar,
  #ui #header .indicatorlist,
  #ui .navbarswitch {
    display: none;
  }
  #ui #navigationWrapper {
    float: right;
    display: block;
  }
  #ui .main-nav {
    margin: 0;
    width: 100%;
  }
  #ui .main-nav .h-nav {
    margin: 0;
    padding: 0;
    text-align: justify;
  }
  #ui .main-nav li {
    display: inline-block;
    margin: 0;
  }
  #ui .main-nav .level1 {
    -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.5);
    border-radius: 15px;
  }
  #ui .main-nav .level1 > ul > li {
    background: #f4f5f7;
    background: -moz-linear-gradient(top, #f4f5f7 0%, #f3f4f6 20%, #e9eaee 39%, #e3e5e9 46%, #dddfe4 49%, #ced3da 64%, #a8aebb 95%, #a6acb9 96%, #838b9b 98%, #768091 98%, #768090 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f5f7), color-stop(20%, #f3f4f6), color-stop(39%, #e9eaee), color-stop(46%, #e3e5e9), color-stop(49%, #dddfe4), color-stop(64%, #ced3da), color-stop(95%, #a8aebb), color-stop(96%, #a6acb9), color-stop(98%, #838b9b), color-stop(98%, #768091), color-stop(100%, #768090));
    background: -webkit-linear-gradient(top, #f4f5f7 0%, #f3f4f6 20%, #e9eaee 39%, #e3e5e9 46%, #dddfe4 49%, #ced3da 64%, #a8aebb 95%, #a6acb9 96%, #838b9b 98%, #768091 98%, #768090 100%);
    background: -o-linear-gradient(top, #f4f5f7 0%, #f3f4f6 20%, #e9eaee 39%, #e3e5e9 46%, #dddfe4 49%, #ced3da 64%, #a8aebb 95%, #a6acb9 96%, #838b9b 98%, #768091 98%, #768090 100%);
    background: -ms-linear-gradient(top, #f4f5f7 0%, #f3f4f6 20%, #e9eaee 39%, #e3e5e9 46%, #dddfe4 49%, #ced3da 64%, #a8aebb 95%, #a6acb9 96%, #838b9b 98%, #768091 98%, #768090 100%);
    background: linear-gradient(to bottom, #f4f5f7 0%, #f3f4f6 20%, #e9eaee 39%, #e3e5e9 46%, #dddfe4 49%, #ced3da 64%, #a8aebb 95%, #a6acb9 96%, #838b9b 98%, #768091 98%, #768090 100%);
    font-size: 13px;
    line-height: 1.333;
    color: #fff;
    color: #333333;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    border-left: 1px solid #a2a4aa;
    cursor: pointer;
    padding: 9px 20px;
    position: relative;
  }
  #ui .main-nav .level1 > ul > li:focus,
  #ui .main-nav .level1 > ul > li:hover {
    text-decoration: none;
  }
  #ui .main-nav .level1 > ul > li.hover,
  #ui .main-nav .level1 > ul > li:hover,
  #ui .main-nav .level1 > ul > li.current,
  #ui .main-nav .level1 > ul > li.current:hover {
    background: #7a7a7b;
    background: -moz-linear-gradient(top, #7a7a7b 0%, #848586 14%, #868788 14%, #888989 17%, #98999b 32%, #a4a5a8 46%, #a4a6aa 50%, #a7a9ad 52%, #acafb5 63%, #adb1b9 74%, #aab0ba 85%, #a4aab7 96%, #828a9a 98%, #767f90 98%, #768090 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7a7a7b), color-stop(14%, #848586), color-stop(14%, #868788), color-stop(17%, #888989), color-stop(32%, #98999b), color-stop(46%, #a4a5a8), color-stop(50%, #a4a6aa), color-stop(52%, #a7a9ad), color-stop(63%, #acafb5), color-stop(74%, #adb1b9), color-stop(85%, #aab0ba), color-stop(96%, #a4aab7), color-stop(98%, #828a9a), color-stop(98%, #767f90), color-stop(100%, #768090));
    background: -webkit-linear-gradient(top, #7a7a7b 0%, #848586 14%, #868788 14%, #888989 17%, #98999b 32%, #a4a5a8 46%, #a4a6aa 50%, #a7a9ad 52%, #acafb5 63%, #adb1b9 74%, #aab0ba 85%, #a4aab7 96%, #828a9a 98%, #767f90 98%, #768090 100%);
    background: -o-linear-gradient(top, #7a7a7b 0%, #848586 14%, #868788 14%, #888989 17%, #98999b 32%, #a4a5a8 46%, #a4a6aa 50%, #a7a9ad 52%, #acafb5 63%, #adb1b9 74%, #aab0ba 85%, #a4aab7 96%, #828a9a 98%, #767f90 98%, #768090 100%);
    background: -ms-linear-gradient(top, #7a7a7b 0%, #848586 14%, #868788 14%, #888989 17%, #98999b 32%, #a4a5a8 46%, #a4a6aa 50%, #a7a9ad 52%, #acafb5 63%, #adb1b9 74%, #aab0ba 85%, #a4aab7 96%, #828a9a 98%, #767f90 98%, #768090 100%);
    background: linear-gradient(to bottom, #7a7a7b 0%, #848586 14%, #868788 14%, #888989 17%, #98999b 32%, #a4a5a8 46%, #a4a6aa 50%, #a7a9ad 52%, #acafb5 63%, #adb1b9 74%, #aab0ba 85%, #a4aab7 96%, #828a9a 98%, #767f90 98%, #768090 100%);
    border-right-color: transparent;
  }
  #ui .main-nav .level1 > ul > li:first-child,
  #ui .main-nav .level1 > ul > li.pie_first-child {
    -webkit-border-radius: 15px 0 0 15px;
    -moz-border-radius: 15px 0 0 15px;
    border-radius: 15px 0 0 15px;
    border-left: 0;
    padding-left: 24px;
  }
  #ui .main-nav .level1 > ul > li.last {
    -webkit-border-radius: 0 15px 15px 0;
    -moz-border-radius: 0 15px 15px 0;
    border-radius: 0 15px 15px 0;
    padding-right: 24px;
  }
  #ui .main-nav .level1 > ul > li.first.last {
    border-radius: 15px;
  }
  #ui .main-nav .level1 > ul > li > a {
    font-size: 13px;
    line-height: 1.333;
    color: #fff;
    color: #333333;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
  }
  #ui .main-nav .level1 > ul > li > a:focus,
  #ui .main-nav .level1 > ul > li > a:hover {
    text-decoration: none;
  }
  #ui .main-nav .level1 > ul > li a {
    text-shadow: 0 1px 2px #fff;
  }
  #ui .main-nav .level2 ul,
  #ui .main-nav .level3 ul {
    z-index: 20;
    background-color: #fff;
    padding: 20px;
  }
  #ui .main-nav li:hover .level2 > ul,
  #ui .main-nav li.hover .level2 > ul,
  #ui .main-nav li:hover > .level3 > ul,
  #ui .main-nav li.hover > .level3 > ul {
    left: 0;
    overflow: visible;
  }
  #ui .main-nav .level2 {
    position: relative;
  }
  #ui .main-nav .level2 ul {
    -webkit-box-shadow: -6px 10px 19px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: -6px 10px 19px -2px rgba(0, 0, 0, 0.5);
    box-shadow: -6px 10px 19px -2px rgba(0, 0, 0, 0.5);
    margin-left: 0;
    position: absolute;
    width: 188px;
  }
  #ui .main-nav .level3 ul {
    -webkit-box-shadow: -7px 7px 19px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: -7px 7px 19px -2px rgba(0, 0, 0, 0.5);
    box-shadow: -7px 7px 19px -2px rgba(0, 0, 0, 0.5);
    z-index: 30;
    width: 188px;
  }
}
/**
 * meta-nav.less
 * [ Meta navigation - Appears on top of the page]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @name Meta Navigation
 * @description Vertical nav list on "mobile"/"tablet" and horizontal nav list on "desktop". Nav-icon represents hidden navbar which contains the meta-navigation amongst others.
 *
 * @markup
 * <div id="header">
 * <div id="meta">
 *     <a id="j-meta-nav" href="#"></a>
 *     <nav class="meta-nav">
 *         <ul class="h-nav level1">
 *             <li class="hassub">
 *                 <a href="#" title="About">About<span></span></a>
 *                 <ul class="level2 rd">
 *                     <li><a href="#" title="Corporate Culture">Corporate Culture</a></li>
 *                     <li><a href="#" title="Business Sectors">Business Sectors</a></li>
 *                     <li><a href="#" title="Corporate Compliance">Corporate Compliance</a></li>
 *                 </ul>
 *             </li>
 *             <li class="">
 *                 <a href="href="#"" title="Contact &amp; Dialog">Contact &amp; Dialog</a>
 *             </li>
 *             <li>
 *                 <a href="#" title="FAQ">FAQ</a>
 *             </li>
 *         </ul>
 *     </nav>

 *     <div class="countryswitch">
 *         <a href="#" title="Masterpage">
 *             <span>Country</span><img src="http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/flags/belgium.jpg" alt="Master">
 *         </a>
 *     </div>

 *     <div class="languageswitch">
 *         <ul class="h-nav">
 *             <li class="current">
 *                 <a href="#" title="Masterpage">EN</a>
 *             </li>
 *             <li>
 *                 <a href="#" title="Beispielseite"> DE</a>
 *             </li>
 *         </ul>
 *     </div>

 *     <div class="search input-box">
 *         <form class="cl" role="search" method="get" action="#">
 *             <p class="searchfield">
 *                 <input type="search" id="f-header-search" placeholder="Search" name="q" value="">
 *             </p>
 *             <p class="searchbutton"><button>Search</button></p>
 *         </form>
 *     </div>
 * </div>
 * </div>
 *
 * <div id="navbar">
 *    <nav class="meta-nav">
 *         <script class="config">
 *         new Object({
 *             enquire: [{
 *                 breakpoint: 'moblet',
 *                 reference: '#meta .meta-nav',
 *                 type: 'copy'
 *             }]
 *         });
 *         </script>
 *         <ul class="h-nav level1">
 *             <li class="hassub">
 *                 <a href="#" title="About">About<span></span></a>
 *                 <ul class="level2 rd">
 *                     <li><a href="#" title="Corporate Culture">Corporate Culture</a></li>
 *                     <li><a href="#" title="Business Sectors">Business Sectors</a></li>
 *                     <li><a href="#" title="Corporate Compliance">Corporate Compliance</a></li>
 *                 </ul>
 *             </li>
 *             <li class="">
 *                 <a href="#" title="Contact &amp; Dialog">Contact &amp; Dialog</a>
 *             </li>
 *             <li><a href="#" title="FAQ">FAQ</a>
 *             </li>
 *             <li>
 *                 <a href="#" title="Download &amp; Services">Download &amp; Services</a>
 *             </li>
 *         </ul>
 *     </nav>
 * </div>
 *
 *
 *
*/
#ui {
  /*
            Meta navigation inside mobile menu
            ========================================================================== */
}
#ui #header .meta-nav,
#ui #meta {
  display: none;
}
#ui .meta-nav a {
  font-size: 13px;
  line-height: 1.333;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
}
#ui #navbar .meta-nav {
  margin-left: 40px;
}
#ui #navbar .meta-nav a {
  margin-bottom: 15px;
}
#ui #navbar .meta-nav ul > li {
  margin-bottom: 10px;
}
#ui #navbar .meta-nav li {
  width: 100%;
}
#ui #navbar .meta-nav li li {
  padding-left: 20px;
}
#ui #navbar .meta-nav li .rd {
  left: 0;
  overflow: visible;
  position: relative;
}
@media screen and (min-width: 1025px) {
  #ui #meta {
    display: block;
  }
  #ui #header .meta-nav {
    z-index: 25;
    display: inline-block;
    float: left;
    position: relative;
  }
  #ui #header .meta-nav li:hover .level2,
  #ui #header .meta-nav li.hover .level2,
  #ui #header .meta-nav li:hover > .level3,
  #ui #header .meta-nav li.hover > .level3 {
    left: 0;
    overflow: visible;
  }
  #ui #header .meta-nav li:hover .level2,
  #ui #header .meta-nav li.hover .level2 {
    left: 10px;
    position: absolute;
    top: 28px;
  }
  #ui #header .meta-nav .h-nav {
    margin: 0;
    padding: 0;
  }
  #ui #header .meta-nav .level1 .hassub a {
    position: relative;
    left: -12px;
  }
  #ui #header .meta-nav .level1 .hassub a:after {
    background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: -140px -75px;
    width: 25px;
    height: 25px;
    display: inline-block;
    content: "";
    position: absolute;
    top: -6px;
    right: -22px;
  }
  #ui #header .meta-nav .level1 .hassub.hover a,
  #ui #header .meta-nav .level1 .hassub:hover a {
    position: relative;
    left: -12px;
  }
  #ui #header .meta-nav .level1 .hassub.hover a:after,
  #ui #header .meta-nav .level1 .hassub:hover a:after {
    background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: -75px -135px;
    width: 25px;
    height: 25px;
    display: inline-block;
    content: "";
    position: absolute;
    top: -6px;
    right: -22px;
  }
  #ui #header .meta-nav .level1 > li {
    border-left: 1px solid;
    padding: 0 10px;
  }
  #ui #header .meta-nav .level1 > li:first-child {
    border-left: 0;
  }
  #ui #header .meta-nav .level2,
  #ui #header .meta-nav .level3 {
    z-index: 30;
    background-color: #fff;
    padding: 20px;
    left: -5000px;
  }
  #ui #header .meta-nav .level2 li a,
  #ui #header .meta-nav .level3 li a {
    color: #333333;
  }
  #ui #header .meta-nav .level2 {
    -webkit-box-shadow: -6px 10px 19px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: -6px 10px 19px -2px rgba(0, 0, 0, 0.5);
    box-shadow: -6px 10px 19px -2px rgba(0, 0, 0, 0.5);
    margin-left: 0;
    width: auto;
    position: absolute;
  }
  #ui #header .meta-nav .level2 > li {
    padding-right: 70px;
  }
  #ui #header .meta-nav .level3 {
    -webkit-box-shadow: -7px 7px 19px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: -7px 7px 19px -2px rgba(0, 0, 0, 0.5);
    box-shadow: -7px 7px 19px -2px rgba(0, 0, 0, 0.5);
    z-index: 30;
    width: 188px;
  }
}
/**
 * countryswitch.less
 * [ Country switch ]
 * @mobileFirst
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @name Country Switch
 * @description Here the currently selected language is shown, and the link redirects to the country selector
 *
 * @markup
 *     <div class="countryswitch">
 *         <a href="#" title="Masterpage">
 *             <span>Country</span><img src="http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/flags/belgium.jpg" alt="Master">
 *         </a>
 *     </div>
 *
 *
*/
#ui .countryswitch {
  margin-bottom: 30px;
  margin-left: 40px;
}
#ui .countryswitch a {
  font-size: 13px;
  line-height: 1.333;
  color: #fff;
  clear: both;
  display: block;
  font-weight: bold;
  text-transform: uppercase;
}
#ui .countryswitch img {
  display: inline;
  margin-left: 20px;
  position: relative;
  top: 1px;
}
@media screen and (min-width: 1025px) {
  #ui .countryswitch {
    float: left;
    margin: 0;
  }
  #ui .countryswitch a {
    font-size: 13px;
    border-left: 1px solid;
    display: inline-block;
    float: left;
    padding: 0 10px;
    position: relative;
    top: -3px;
  }
}
/**
 * languageswitch.less
 * [ Language switch ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @name Language Switch
 * @description The language switch allows the user to change the language directly
 *
 * @markup
 *     <div class="languageswitch">
 *         <ul class="h-nav">
 *             <li class="current">
 *                 <a href="#" title="Masterpage">EN</a>
 *             </li>
 *             <li>
 *                 <a href="#" title="Beispielseite"> DE</a>
 *             </li>
 *         </ul>
 *     </div>
 *
 *
*/
#ui .languageswitch {
  margin-bottom: 30px;
  margin-left: 20px;
}
#ui .languageswitch ul {
  overflow: hidden;
}
#ui .languageswitch li {
  margin-left: 10px;
  border: 1px solid;
  border-radius: 30px;
  padding: 5px 15px;
}
#ui .languageswitch li:hover,
#ui .languageswitch li.current {
  background-color: #fff;
}
#ui .languageswitch li:hover a,
#ui .languageswitch li.current a {
  color: #003a74;
  text-decoration: none;
}
#ui .languageswitch li:first-child {
  margin-left: 0;
}
#ui .languageswitch a {
  font-size: 13px;
  line-height: 1.333;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
}
@media screen and (min-width: 1025px) {
  #ui .languageswitch {
    float: left;
    margin: 0;
  }
  #ui .languageswitch li {
    border: 0;
    border-left: 1px solid;
    border-radius: 0;
    margin-left: 0;
    padding: 0;
  }
  #ui .languageswitch li:hover,
  #ui .languageswitch li.current {
    background-color: transparent;
  }
  #ui .languageswitch li:hover a,
  #ui .languageswitch li.current a {
    color: #fff;
    text-decoration: underline;
  }
  #ui .languageswitch li:first-child {
    border-left: 0;
  }
  #ui .languageswitch li:first-child a {
    padding-left: 0;
  }
  #ui .languageswitch a {
    font-size: 13px;
    padding: 0 10px;
  }
}
/**
 * input-box.less
 * [ Search field of the header in mobile and desktop view ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @mobileFirst
 * @name Search field
 * @description The search field appears in the meta-navigation on desktop view, and in mobile and tablet view on top of the navigation bar once it is opened.
 *
 * @markup
 * <div class="search input-box">
 *     <form class="cl" role="search" method="get" action="#">
 *         <p class="searchfield">
 *             <input type="search" id="f-header-search" placeholder="Search" name="q" value="">
 *         </p>
 *         <p class="searchbutton">
 *             <button>Search</button>
 *         </p>
 *     </form>
 * </div>
 *
*/
#ui .search.input-box {
  float: left;
  margin-bottom: 30px;
  margin-left: 20px;
  width: 90%;
}
#ui .search.input-box .searchbutton,
#ui .search.input-box .searchfield {
  float: left;
}
#ui .search.input-box .searchfield {
  width: 75%;
  margin-right: 15px;
}
#ui .search.input-box .searchfield input {
  font-size: 13px;
  line-height: 1.333;
  color: #333333;
  -webkit-box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
  -webkit-appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 6px 10px 4px;
  width: 100%;
}
#ui .search.input-box .searchfield input::-webkit-search-cancel-button {
  display: none;
}
#ui .search.input-box .searchbutton {
  width: 18%;
  position: relative;
  top: 0px;
}
#ui .search.input-box .searchbutton button {
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -110px -30px;
  width: 30px;
  height: 30px;
  display: inline-block;
  text-indent: -9999px;
}
@media screen and (min-width: 1025px) {
  #ui .search.input-box {
    margin: 0;
    padding: 0 0 0 5px;
    position: relative;
    right: -5px;
    top: -6px;
    width: auto;
  }
  #ui .search.input-box .searchbutton,
  #ui .search.input-box .searchfield {
    width: auto;
  }
  #ui .search.input-box .searchbutton {
    top: -3px;
  }
  #ui .search.input-box .searchfield {
    margin-right: 5px;
  }
  #ui .search.input-box .searchfield input {
    font-size: 12px;
    padding: 4px 10px 3px 7px;
    width: 120px;
  }
}
#ui .download .button {
  display: inline-block;
  margin-bottom: 20px;
}
#ui .download.button-right .button {
  float: right;
}
#ui .download.button-left .button {
  float: left;
}
/*
 * breadcrumb.less
 * [ Contains all LESS code for the breadcrum module ]
 *
 * @mobileFirst
 *
 * @project:  Henkel Loctite Responsive
 * @date:     2015-05-04
 * @author:   Søren Birkemeyer, sbirkemeyer@sapient.com
 * @licensor: SAPIENTNITRO
 *
 * @name Breadcrumb
 * @description Generic component used on every page to display the user's location within the Loctite sitemap; only shown for desktop breakpoint
 *
 * @markup
 * <nav class="breadcrumb">
 *   <ol class="h-nav cl">
 *     <li>
 *       <a href="/en.html" title="Loctite" btattached="true"><span>Loctite</span></a>
 *     </li>
 *     <li>
 *       <strong>Active breadcrumb</strong>
 *     </li>
 *   </ol>
 * </nav>

*/
#ui .breadcrumb {
  display: none;
}
@media screen and (min-width: 1025px) {
  #ui .breadcrumb {
    display: block;
    left: 0;
    margin: 20px 0 20px 0;
  }
  #ui .breadcrumb .h-nav li a,
  #ui .breadcrumb .h-nav li strong {
    line-height: 1.333;
  }
  #ui .breadcrumb a:hover,
  #ui .breadcrumb a:focus,
  #ui .breadcrumb a:active {
    text-decoration: none;
  }
  #ui .breadcrumb a,
  #ui .breadcrumb strong {
    font-size: 13px;
    line-height: 1.333;
    color: #fff;
    padding: 8px 0 8px;
    text-transform: uppercase;
  }
  #ui .breadcrumb a:before,
  #ui .breadcrumb strong:before {
    content: "\203A";
    font-size: 17px;
    width: 10px;
    height: 10px;
    padding-right: 5px;
  }
  #ui .breadcrumb li {
    margin-bottom: 0;
    padding-left: 10px;
  }
  #ui .breadcrumb li:first-child {
    padding-left: 0;
  }
}
/**
 * titled-sub-nav.less
 * [ Presents navigation elements for the subpages of the startlevel and of the current page.
 *    Works exactly like the Subnavigation. The only difference is that for the titled subnavigation
 *    there is a headline ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     5.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * Titled-sub-nav - DROPPED
 * presents navigation elements for the subpages of the startlevel and of the current page.
 *
 * <nav class="titled-sub-nav section">
 *  <h4>Choose the right applicator</h4>
 *  <ul class="cl">
 *     <li class=" current">
 *          <a href="#" style="background-image: url(http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/product-navigation/loctite_product-navigation_applikator_tube.png);" title="Tube">Tube</a>
 *      </li>
 *      <li class="">
 *          <a href="#" style="background-image: url(http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/product-navigation/loctite_product-navigation_applikator_tube.png);" title="Control">Control</a>
 *      </li>
 *      <li class="">
 *          <a href="#" style="background-image: url(http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/product-navigation/loctite_product-navigation_applikator_mini-tube.png);" title="Mini Trio">Mini Trio</a>
 *      </li>
 *      <li class="">
 *          <a href="#" style="background-image: url(http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/product-navigation/loctite_product-navigation_applikator_brush.png);" title="Brush On">Brush On</a>
 *      </li>
 *      <li class="last">
 *          <a href="#" style="background-image: url(http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/product-navigation/loctite_product-navigation_applikator_precision.png);" title="Precision">Precision</a>
 *      </li>
 *  </ul>
 *  </nav>
 *
*/
/* form-nav*/
#ui .titled-sub-nav {
  -webkit-box-shadow: 0 3px 15px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 3px 15px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 15px 5px rgba(0, 0, 0, 0.5);
  margin-bottom: 20px;
  overflow: hidden;
}
#ui .titled-sub-nav h4 {
  color: #333333;
  font: normal bold 18px Lato, 'Helvetica', sans-serif;
  background: #e2e2e2;
  color: #0060a4;
  padding: 15px 20px 10px;
}
#ui .titled-sub-nav ul {
  background-color: #e2e2e2;
  width: 224px;
}
#ui .titled-sub-nav ul li {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.4, #f4f5f7), color-stop(0.5, #a7acb9));
  background-image: -moz-linear-gradient(center top, #f4f5f7 40, #a7acb9 50);
  background-image: -ms-linear-gradient(top, #f4f5f7 40, #a7acb9 50);
  background-image: -o-linear-gradient(top, #f4f5f7 40, #a7acb9 50);
  background-image: linear-gradient(top, #f4f5f7 40, #a7acb9 50);
  border-right: 1px solid #cccccc;
  display: table;
  float: left;
  width: 110px;
}
#ui .titled-sub-nav ul li a {
  color: #333333;
  font: normal 13px Lato, 'Helvetica', sans-serif;
  background-position: 50% 0;
  background-repeat: no-repeat;
  display: table-cell;
  font-size: 13px;
  font-family: Lato, 'Helvetica', sans-serif;
  height: 75px;
  padding-bottom: 5px;
  text-align: center;
  vertical-align: bottom;
  width: 109px;
}
#ui .titled-sub-nav ul li a:hover,
#ui .titled-sub-nav ul li a:active,
#ui .titled-sub-nav ul li a:focus {
  text-decoration: none;
}
#ui .titled-sub-nav ul li.current,
#ui .titled-sub-nav ul li:hover,
#ui .titled-sub-nav ul li:active,
#ui .titled-sub-nav ul li:focus {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.4, #777f90), color-stop(0.5, #a7acb9));
  background-image: -moz-linear-gradient(center top, #777f90 40, #a7acb9 50);
  background-image: -ms-linear-gradient(top, #777f90 40, #a7acb9 50);
  background-image: -o-linear-gradient(top, #777f90 40, #a7acb9 50);
  background-image: linear-gradient(top, #777f90 40, #a7acb9 50);
}
/**
 * faqpanel.less
 * [ FAQ Panel styles ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @name FAQ panel
 * @description The FAQ component is one of the accordion implementations. The component is a combination of two CMS components. The FAQ Panel is the accordion container. The FAQ item component is the element inside of the FAQ Panel. Such an item consists of the question (the title or label in the abstract accordion pattern) and the answer (visible if the accordion item is open
 *
 * @markup
 * <section class="panel parsys section faqpanel" style="background-color: #e2e2e2; color: #333;">
 *     <a class="jump " id="!par-faqpanel" name="!par-faqpanel" href="#!par-faqpanel">
 *     </a>
 *     <div class="panel-body ">
 *         <ol class="faq-list">
 *             <li>
 *                 <details class="text parbase faq">
 *                     <summary>
 *                         <a class="jump idpar-faqpanel-testtest" id="!par-faqpanel-testtest" name="!par-faqpanel-testtest" href="#!par-faqpanel-testtest">What is super glue?</a>
 *                     </summary>
 *                     <div class="rd textimage">
 *                         <figure class="parbase image">
 *                         </figure>
 *                         <p>- Convenient and versatile for small repairs. The main active ingredient of super glue is cyanocrylate, a solvent-free acrylic resin that forms an instant, strong bond between materials.
 *                             <br>
 *                         </p>
 *                     </div>
 *                 </details>
 *             </li>
 *             <li>
 *                 <details class="text parbase faq">
 *                     <summary>
 *                         <a class="jump idpar-faqpanel-what_is_a_hybrid_glu" id="!par-faqpanel-what_is_a_hybrid_glu" name="!par-faqpanel-what_is_a_hybrid_glu" href="#!par-faqpanel-what_is_a_hybrid_glu">Why does super glue stick to almost anything?</a>
 *                     </summary>
 *                     <div class="rd textimage">
 *                         <figure class="parbase image">
 *                         </figure>
 *                         <p>&nbsp;- Moisture is everywhere in the surrounding air. Therefore, most objects have a thin layer of moisture on their surface. As Super glue activates by forming long, strong chemical chains when coming into contact with that moisture.
 *                             <br> This binds the two surfaces together almost immediately.
 *                             <br>
 *                         </p>
 *                     </div>
 *                 </details>
 *             </li>


 *         </ol>
 *     </div>
 *     <script class="config">
 *     new Object({
 *         animationSpeed: 5000,
 *         lang: {
 *             linkTextHide: '???Hide detailed description???',
 *             linkTextShow: '???Show detailed description???'
 *         }
 *     });
 *     </script>
 * </section>
 *
 *
*/
#ui .faqpanel {
  margin: 20px 0;
}
#ui .faqpanel summary {
  position: relative;
  border-top: 1px solid #b3b3b3;
  margin-left: 20px;
}
#ui .faqpanel summary:before {
  content: "";
  position: absolute;
}
#ui .faqpanel summary:before {
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -30px -105px;
  width: 30px;
  height: 30px;
  display: inline-block;
}
#ui .faqpanel summary:before {
  left: -37px;
}
#ui .faqpanel summary:hover,
#ui .faqpanel summary.active {
  position: relative;
}
#ui .faqpanel summary:hover:before,
#ui .faqpanel summary.active:before {
  content: "";
  position: absolute;
}
#ui .faqpanel summary:hover:before,
#ui .faqpanel summary.active:before {
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -75px -55px;
  width: 30px;
  height: 30px;
  display: inline-block;
}
#ui .faqpanel summary:hover a,
#ui .faqpanel summary.active a {
  text-decoration: none;
  color: #c50223;
}
#ui .faqpanel summary a {
  font-size: 18px;
  line-height: 1.333;
  font-weight: bold;
  color: #0060a4;
  cursor: pointer;
  display: block;
  margin-left: -40px;
  padding: 4px 0 2px 40px;
}
#ui .faqpanel .textimage {
  font-size: 13px;
  line-height: 1.333;
  color: #333333;
  padding: 0 10px 5px 37px;
  margin-bottom: 0;
}
@media screen and (min-width: 641px) {
  #ui .faqpanel summary {
    margin-left: 37px;
  }
  #ui .faqpanel summary a {
    font-size: 18px;
  }
  #ui .faqpanel .textimage {
    font-size: 13px;
  }
}
@media all {
  #ui .layoutpanel {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 20px 0;
  }
  .landingpage--kintsuglue #ui .layoutpanel {
    margin: 0;
  }
  #ui .layoutpanel__layer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
  }
  .landingpage--kintsuglue #ui .layoutpanel__layer {
    padding: 0;
  }
}
@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  #ui .layoutpanel .hide-on-mobile {
    display: none;
  }
}
@media screen and (min-width: 641px) and (max-width: 1024px), screen and (min-device-width: 641px) and (max-device-width: 1024px) {
  #ui .layoutpanel .hide-on-tablet {
    display: none;
  }
}
@media screen and (min-width: 1025px) {
  #ui .layoutpanel .hide-on-desktop {
    display: none;
  }
}
/**
 * productfinder.less
 * [ Product Finder. ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @mobileFirst
 * @name Product finder
 * @description The Product Finder offers a functionality to select products from the hole product catalog (of a brand...) by possible applications. The Finder component consists of a search form at top and the search results at bottom. The search form lets the user select a set of product characteristics. If such a selection is sufficient to perform the search all appropriate products are visible in the bottom results area. For each product page found their page teaser component is embedded in the results view.
 *
 * @markup
 * <div class="productfinder cl section">
 *     <div class="productfinder-wrapper">
 *         <h2><strong>Productfinder</strong></h2>
 *         <div class="panel finder combinations-tab active  cl">
 *             <h3>Materials</h3>
 *             <figure class="parbase image">
 *             </figure>
 *             <form action="/en/gluefinder.html" method="GET">
 *                 <input type="hidden" name="usedTab" value="combinations">
 *                 <div class="box step1 nosebottom" style="margin-top: 0px;">
 *                     <h3>I need to glue…<br><span> </span>
 *                 </h3>
 *                     <div class="material1">
 *                         <div class="label">
 *                             Material:
 *                         </div>
 *                         <div class="option">
 *                             <span class="description">please choose</span>
 *                             <span class="cover"></span>
 *                             <div class="select">
 *                                 <ul>
 *                                     <li class="active"><span>please choose</span></li>
 *                                     <li><span>Glass</span></li>
 *                                     <li><span>Metal</span></li>
 *                                     <li><span>Paper</span></li>
 *                                     <li><span>Wood</span></li>
 *                                     <li><span>Porcelain</span></li>
 *                                     <li><span>Plastics</span></li>
 *                                     <li><span>Leather</span></li>
 *                                     <li><span>Rubber</span></li>
 *                                 </ul>
 *                                 <div class="nose left"></div>
 *                             </div>
 *                         </div>
 *                     </div>
 *                     <div class="material1-detail">
 *                         <div class="label">
 *                             <span>Specify your selection</span>
 *                         </div>
 *                         <div class="option disabled">
 *                             <span class="description">please choose</span>
 *                             <span class="cover"></span>
 *                             <div class="select">
 *                                 <ul>
 *                                     <li class="active"><span>please choose</span></li>
 *                                 </ul>
 *                                 <div class="nose left"></div>
 *                             </div>
 *                         </div>
 *                     </div>
 *                     <div class="separator"></div>
 *                     <div class="nose bottom"></div>
 *                 </div>
 *                 <div class="box step2" style="margin-top: 0px;">
 *                     <h3>To...</h3>
 *                     <div class="material2">
 *                         <div class="label">Material:</div>
 *                         <div class="option">
 *                             <span class="description">please choose</span>
 *                             <span class="cover"></span>
 *                             <div class="select">
 *                                 <ul>
 *                                     <li class="active"><span>please choose</span></li>
 *                                     <li><span>Glass</span></li>
 *                                     <li><span>Metal</span></li>
 *                                     <li><span>Paper</span></li>
 *                                     <li><span>Wood</span></li>
 *                                     <li><span>Porcelain</span></li>
 *                                     <li><span>Plastics</span></li>
 *                                     <li><span>Leather</span></li>
 *                                     <li><span>Rubber</span></li>
 *                                 </ul>
 *                                 <div class="nose left"></div>
 *                             </div>
 *                         </div>
 *                         <div class="separator"></div>
 *                         <div class="nose left"></div>
 *                     </div>
 *                     <div class="material2-detail">
 *                         <div class="label">
 *                             <span>Specify your selection</span>
 *                         </div>
 *                         <div class="option disabled">
 *                             <span class="description">please choose</span>
 *                             <span class="cover"></span>
 *                             <div class="select">
 *                                 <ul>
 *                                     <li class="active"><span>please choose</span></li>
 *                                 </ul>
 *                                 <div class="nose left"></div>
 *                             </div>
 *                         </div>
 *                     </div>
 *                     <div class="separator"></div>
 *                     <div class="nose left"></div>
 *                 </div>
 *                 <div class="box step3" style="margin-top: 5px;">
 *                     <h3>How large is the surface?<br><span></span></h3>
 *                     <div class="size cl">
 *                         <div class="label"></div>
 *                         <div class="radio pie">
 *                             <ul>
 *                                 <li class="active"><span>all</span></li>
 *                                 <li><span>Large</span></li>
 *                                 <li><span>Small</span></li>
 *                             </ul>
 *                         </div>
 *                     </div>
 *                     <div class="separator"></div>
 *                     <div class="nose left"></div>
 *                     <input class="submitbutton" type="submit" value="">
 *                 </div>
 *             </form>
 *         </div>
 *         <div class="product-list-wrapper cl">
 *             <div class="par parsys">
 *              <h3>Products</h3>
 * <ul class="row">
 *     <li class="item">
 *         <div class="teaser-frame">
 *             <div class="page productpage">
 *                 <div class="pageteaser teaser resized" style="height: 187px;">
 *                     <div class="default rendermode_imageLast">
 *                         <div class="textblock">
 *                             <h3>Loctite Precision 5g</h3>
 *                             <div class="text">
 *                                 <p>Extra long nozzle for hard to reach places
 *                                 </p>
 *                             </div>
 *                         </div>
 *                         <figure class="parbase image"><img title="" alt="" class="cq-dd-image " src="http://www.loctite-consumer.co.uk/content/uac/loctite/uk/www/en/products/superglues/liquids/mini-trio/_jcr_content/teaser/image.img.jpg/1363605153066.jpg">
 *                         </figure>
 *                         <a href="#" class="button " title="Precision"><span>Details</span></a>
 *                     </div>
 *                 </div>
 *             </div>
 *         </div>
 *     </li>
 *     <li class="item">
 *         <div class="teaser-frame">
 *             <div class="page productpage">
 *                 <div class="pageteaser teaser resized" style="height: 187px;">
 *                     <div class="default rendermode_imageLast">
 *                         <div class="textblock">
 *                             <h3>Power Flex Gel 3g</h3>
 *                             <div class="text">
 *                                 <p>Universal applicator</p>
 *                             </div>
 *                         </div>
 *                         <figure class="parbase image"><img title="" alt="" class="cq-dd-image " src="http://www.loctite-consumer.co.uk/content/uac/loctite/uk/www/en/products/superglues/liquids/mini-trio/_jcr_content/teaser/image.img.jpg/1363605153066.jpg">
 *                         </figure>
 *                         <a href="#" class="button " title="Tube"><span>Details</span></a>
 *                     </div>
 *                 </div>
 *             </div>
 *         </div>
 *     </li>
 *     <li class="item">
 *         <div class="teaser-frame">
 *             <div class="page productpage">
 *                 <div class="pageteaser teaser resized" style="height: 187px;">
 *                     <div class="default rendermode_imageLast">
 *                         <div class="textblock">
 *                             <h3>Power Flex Gel Control 3g</h3>
 *                             <div class="text">
 *                                 <p>Easy grip squeeze bottle for controlled applications</p>
 *                             </div>
 *                         </div>
 *                         <figure class="parbase image"><img title="" alt="" class="cq-dd-image " src="http://www.loctite-consumer.co.uk/content/uac/loctite/uk/www/en/products/superglues/liquids/mini-trio/_jcr_content/teaser/image.img.jpg/1363605153066.jpg">
 *                         </figure>
 *                         <a href="#" class="button " title="Control"><span>Details</span></a>
 *                     </div>
 *                 </div>
 *             </div>
 *         </div>
 *     </li>
 *     <li class="item">
 *         <div class="teaser-frame">
 *             <div class="page productpage">
 *                 <div class="pageteaser teaser resized" style="height: 187px;">
 *                     <div class="default rendermode_imageLast">
 *                         <div class="textblock">
 *                             <h3>Ultra Repair Box 6x5g</h3>
 *                             <div class="text">
 *                                 <p>Convenient storage-box that ensures each putty portion is fresh and ready to use each time
 *                                     <br>
 *                                 </p>
 *                             </div>
 *                         </div>
 *                         <figure class="parbase image"><img title="" alt="" class="cq-dd-image " src="http://www.loctite-consumer.co.uk/content/uac/loctite/uk/www/en/products/superglues/liquids/mini-trio/_jcr_content/teaser/image.img.jpg/1363605153066.jpg">
 *                         </figure>
 *                         <a href="#" class="button " title="6 x 5g"><span>Details</span></a>
 *                     </div>
 *                 </div>
 *             </div>
 *         </div>
 *     </li>
 * </ul>
 *             </div>
 *         </div>
 *     </div>

 *     <script class="config">
 *     new Object({
 *         ajaxUrl: '#',
 *         lang: {          
 *             intentionError: 'No Results, please try another selection',
 *             combinationError: 'Please choose a combination of two materials and try again',
 *             loading: 'loading'
 *         },
 *         combinationCriteria1: {
 *             "glass": {
 *                 "title": "Glass",
 *                 "path": "glass"
 *             },
 *             "metal": {
 *                 "title": "Metal",
 *                 "path": "metal",
 *                 "sub": {}
 *             },
 *             "paper": {
 *                 "title": "Paper",
 *                 "path": "paper"
 *             },
 *             "wood": {
 *                 "title": "Wood",
 *                 "path": "wood"
 *             },
 *             "porcelain": {
 *                 "title": "Porcelain",
 *                 "path": "porcelain"
 *             },
 *             "plastics": {
 *                 "title": "Plastics",
 *                 "path": "plastics"
 *             },
 *             "leather": {
 *                 "title": "Leather",
 *                 "path": "leather"
 *             },
 *             "rubber": {
 *                 "title": "Rubber",
 *                 "path": "rubber"
 *             }
 *         },
 *         combinationCriteria2: {
 *             "glass": {
 *                 "title": "Glass",
 *                 "path": "glass"
 *             },
 *             "metal": {
 *                 "title": "Metal",
 *                 "path": "metal",
 *                 "sub": {}
 *             },
 *             "paper": {
 *                 "title": "Paper",
 *                 "path": "paper"
 *             },
 *             "wood": {
 *                 "title": "Wood",
 *                 "path": "wood"
 *             },
 *             "porcelain": {
 *                 "title": "Porcelain",
 *                 "path": "porcelain"
 *             },
 *             "plastics": {
 *                 "title": "Plastics",
 *                 "path": "plastics"
 *             },
 *             "leather": {
 *                 "title": "Leather",
 *                 "path": "leather"
 *             },
 *             "rubber": {
 *                 "title": "Rubber",
 *                 "path": "rubber"
 *             }
 *         },
 *         criteriaList: {
 *             "large": {
 *                 "title": "Large",
 *                 "path": "large"
 *             },
 *             "small": {
 *                 "title": "Small",
 *                 "path": "small"
 *             }
 *         },
 *         trackingData: {
 *             compID: "Productfinder"
 *         }
 *     });
 *     </script>
 * </div>
 *
 *
*/
#ui .productfinder {
  margin-bottom: 20px;
  /*
      Set the typography
      ========================================================================== */
  /*
       Set the layout

       ========================================================================== */
  /*
           The three buttons on the Step 3
           ========================================================================== */
  /*
      Search Results styles
   ========================================================================== */
}
#ui .productfinder .combinations-tab > h3,
#ui .productfinder .productfinder-wrapper > h2 {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
#ui .productfinder h3 {
  font-size: 18px;
  line-height: 1.333;
  font-weight: normal;
  color: #fff;
  margin-bottom: 30px;
  text-transform: uppercase;
}
#ui .productfinder .label {
  font-size: 13px;
  line-height: 1.333;
  color: #fff;
  font-weight: bold;
  margin-bottom: 5px;
}
#ui .productfinder .no-result {
  font-size: 13px;
  line-height: 1.333;
  color: #fff;
}
#ui .productfinder .select li {
  font-size: 13px;
  line-height: 1.333;
  color: #333333;
}
#ui .productfinder .select li:hover,
#ui .productfinder .select li.active {
  color: #c50223;
}
#ui .productfinder .option {
  font-size: 13px;
  line-height: 1.333;
  color: #333333;
}
#ui .productfinder .option .description {
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
}
#ui .productfinder .option.hover li span:before:before {
  color: #c50223;
  content: "\BB";
  font-size: 16px;
  font-weight: bold;
}
#ui .productfinder .combinations-tab {
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;
  width: 100%;
}
#ui .productfinder .box {
  background: #0060a4;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0.1, #003a74), color-stop(1, #0060a4), color-stop(0.27, #00518b));
  background-image: -moz-linear-gradient(left, #003a74 10%, #0060a4 100%, #00518b 27%);
  background-image: -ms-linear-gradient(left, #003a74 10%, #0060a4 100%, #00518b 27%);
  background-image: -o-linear-gradient(left, #003a74 10%, #0060a4 100%, #00518b 27%);
  background-image: linear-gradient(to right, #003a74 10%, #0060a4 100%, #00518b 27%);
  -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.3);
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  float: left;
  margin: 0;
  min-height: 1px;
  padding-left: 18px;
  padding-right: 18px;
  position: relative;
  min-height: auto;
  padding: 20px;
  margin-bottom: 30px;
}
#ui .productfinder .box .nose {
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: 0px 0px;
  width: 55px;
  height: 55px;
  display: inline-block;
  position: absolute;
  bottom: -32px;
  left: 48%;
}
#ui .productfinder .radio li,
#ui .productfinder .option .description {
  background: -webkit-gradient(linear, left top, left bottom, from(#c50223), to(#99011b));
  background: -webkit-linear-gradient(top, #c50223, #99011b);
  background: -moz-linear-gradient(top, #c50223, #99011b);
  background: -ms-linear-gradient(top, #c50223, #99011b);
  background: -o-linear-gradient(top, #c50223, #99011b);
  background-color: #c50223;
  -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  cursor: pointer;
  display: inline-block;
  padding: 7px 15px;
  text-transform: uppercase;
}
#ui .productfinder .option {
  width: 100%;
  position: relative;
}
#ui .productfinder .option .description,
#ui .productfinder .option .cover {
  display: inline-block;
}
.touch #ui .productfinder .option .description,
.touch #ui .productfinder .option .cover {
  -khtml-opacity: 0;
  -ms-filter: "alpha(opacity=0)";
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
}
#ui .productfinder .option .description {
  position: relative;
  z-index: 1;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  float: left;
  height: 30px;
  width: 90%;
}
#ui .productfinder .option .description:before {
  content: "";
  position: absolute;
}
#ui .productfinder .option .description:before {
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -110px -90px;
  width: 21px;
  height: 14px;
  display: inline-block;
  right: 2px;
  top: 2px;
}
#ui .productfinder .option .description:before {
  right: -3px;
  top: 8px;
}
#ui .productfinder .option .cover {
  width: 30px;
  z-index: 0;
  float: right;
  height: 30px;
  margin-left: 0;
  position: relative;
  width: 10%;
}
#ui .productfinder .option .cover:after {
  background: -webkit-gradient(linear, left top, left bottom, from(#c50223), to(#99011b));
  background: -webkit-linear-gradient(top, #c50223, #99011b);
  background: -moz-linear-gradient(top, #c50223, #99011b);
  background: -ms-linear-gradient(top, #c50223, #99011b);
  background: -o-linear-gradient(top, #c50223, #99011b);
  background-color: #c50223;
  -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
  height: 21px;
  left: -10px;
  position: absolute;
  top: 4px;
  width: 21px;
}
#ui .productfinder .option.hover .select ul {
  -webkit-transform: translate(9999em, 0);
  -moz-transform: translate(9999em, 0);
  -ms-transform: translate(9999em, 0);
  -o-transform: translate(9999em, 0);
  transform: translate(9999em, 0);
  opacity: 1;
}
#ui .productfinder .option.hover .select ul {
  background-color: #fff;
  padding: 20px;
  margin-left: 22px;
  -webkit-box-shadow: -6px 10px 19px -2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: -6px 10px 19px -2px rgba(0, 0, 0, 0.5);
  box-shadow: -6px 10px 19px -2px rgba(0, 0, 0, 0.5);
  position: absolute;
  width: 188px;
  margin-left: 0;
  overflow: visible;
  padding: 0;
  position: relative;
  top: 33px;
}
#ui .productfinder .option.hover .select ul:before {
  border: 11px solid transparent;
  border-bottom-color: #fff;
  content: "";
  left: -22px;
  position: absolute;
}
#ui .productfinder .option.hover .select ul:before {
  top: -22px;
  left: 18px;
}
#ui .productfinder .select {
  zoom: 1;
  z-index: 10;
  position: absolute;
}
#ui .productfinder .select:before,
#ui .productfinder .select:after {
  content: "";
  display: table;
}
#ui .productfinder .select:after {
  clear: both;
}
#ui .productfinder .select ul {
  left: -9999em;
  opacity: 0;
  position: absolute;
}
#ui .productfinder .select li {
  border-bottom-width: 0;
  display: block;
  padding: 10px 0 10px 18px;
  text-align: left;
  border-top: 1px solid #cccccc;
  cursor: pointer;
  padding: 5px 10px 5px 33px;
}
#ui .productfinder .select li:before {
  color: #c50223;
  content: "\BB";
  font-size: 16px;
  font-weight: bold;
}
#ui .productfinder .select li:before {
  margin-left: -18px;
  margin-right: 5px;
}
#ui .productfinder .select li span {
  color: inherit;
}
#ui .productfinder .select li:first-child {
  border-top: none;
}
#ui .productfinder select {
  -khtml-opacity: 0;
  -ms-filter: "alpha(opacity=0)";
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  z-index: 11;
  background-color: #c50223;
  color: #fff;
  border: 0;
  height: 29px;
  padding: 5px;
  position: absolute;
  top: 0;
  width: 100%;
}
.touch #ui .productfinder select {
  -khtml-opacity: 1;
  -ms-filter: "alpha(opacity=100)";
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
#ui .productfinder .material1-detail,
#ui .productfinder .material2-detail,
#ui .productfinder .material3-detail,
#ui .productfinder .submitbutton,
#ui .productfinder .select .nose {
  display: none !important;
}
.touch #ui .productfinder .radio ul {
  -khtml-opacity: 0;
  -ms-filter: "alpha(opacity=0)";
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
}
#ui .productfinder .radio li {
  cursor: pointer;
  float: left;
  margin-left: 15px;
  padding-bottom: 3px;
  padding-top: 3px;
}
#ui .productfinder .radio li:first-child {
  margin-left: 0;
}
#ui .productfinder .radio li.active {
  background: #f4f5f7;
  background: -moz-linear-gradient(top, #f4f5f7 0%, #f3f4f6 20%, #e9eaee 39%, #e3e5e9 46%, #dddfe4 49%, #ced3da 64%, #a8aebb 95%, #a6acb9 96%, #838b9b 98%, #768091 98%, #768090 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f5f7), color-stop(20%, #f3f4f6), color-stop(39%, #e9eaee), color-stop(46%, #e3e5e9), color-stop(49%, #dddfe4), color-stop(64%, #ced3da), color-stop(95%, #a8aebb), color-stop(96%, #a6acb9), color-stop(98%, #838b9b), color-stop(98%, #768091), color-stop(100%, #768090));
  background: -webkit-linear-gradient(top, #f4f5f7 0%, #f3f4f6 20%, #e9eaee 39%, #e3e5e9 46%, #dddfe4 49%, #ced3da 64%, #a8aebb 95%, #a6acb9 96%, #838b9b 98%, #768091 98%, #768090 100%);
  background: -o-linear-gradient(top, #f4f5f7 0%, #f3f4f6 20%, #e9eaee 39%, #e3e5e9 46%, #dddfe4 49%, #ced3da 64%, #a8aebb 95%, #a6acb9 96%, #838b9b 98%, #768091 98%, #768090 100%);
  background: -ms-linear-gradient(top, #f4f5f7 0%, #f3f4f6 20%, #e9eaee 39%, #e3e5e9 46%, #dddfe4 49%, #ced3da 64%, #a8aebb 95%, #a6acb9 96%, #838b9b 98%, #768091 98%, #768090 100%);
  background: linear-gradient(to bottom, #f4f5f7 0%, #f3f4f6 20%, #e9eaee 39%, #e3e5e9 46%, #dddfe4 49%, #ced3da 64%, #a8aebb 95%, #a6acb9 96%, #838b9b 98%, #768091 98%, #768090 100%);
  box-shadow: none;
  color: #333333;
}
#ui .productfinder .radio li span {
  color: inherit;
  font-weight: bold;
}
#ui .productfinder .product-list-wrapper {
  border-top: 1px solid #9dd0eb;
  margin: 35px 0 0;
  padding-top: 35px;
}
#ui .productfinder .product-list-wrapper ul {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  zoom: 1;
  margin-left: -18px;
  margin-right: -18px;
  margin-top: 20px;
}
#ui .productfinder .product-list-wrapper ul:before,
#ui .productfinder .product-list-wrapper ul:after {
  content: "";
  display: table;
}
#ui .productfinder .product-list-wrapper ul:after {
  clear: both;
}
#ui .productfinder .product-list-wrapper li {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  float: left;
  margin: 0;
  min-height: 1px;
  padding-left: 18px;
  padding-right: 18px;
  position: relative;
  width: 100%;
  margin-bottom: 30px;
}
#ui .productfinder .product-list-wrapper .teaser {
  margin-bottom: 0;
}
@media screen and (min-width: 641px) {
  #ui .productfinder h3 {
    font-size: 18px;
  }
  #ui .productfinder .label {
    font-size: 12px;
  }
  #ui .productfinder .option,
  #ui .productfinder .no-result,
  #ui .productfinder .select li {
    font-size: 13px;
  }
  #ui .productfinder .box {
    width: 25%;
    margin-right: 3%;
    min-width: 290px;
    margin-top: 0 !important;
  }
  #ui .productfinder .box:before {
    border: 0;
    border-color: transparent;
  }
  #ui .productfinder .step1 .nose,
  #ui .productfinder .step2 .nose {
    background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: -55px 0px;
    width: 55px;
    height: 55px;
    display: inline-block;
    position: absolute;
    right: -32px;
    top: 45px;
    left: auto;
    bottom: auto;
  }
  #ui .productfinder .step3 {
    margin-right: 0;
  }
  #ui .productfinder .step3 .nose {
    background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: 0px 0px;
    width: 55px;
    height: 55px;
    display: inline-block;
    position: absolute;
    bottom: -32px;
    left: 48%;
  }
  #ui .productfinder .product-list-wrapper li {
    width: 50%;
    margin-right: 0;
  }
}
@media screen and (min-width: 1025px) {
  #ui .productfinder .box {
    width: 30%;
  }
  #ui .productfinder .product-list-wrapper li {
    width: 33.33333333%;
    margin-right: 0;
  }
}
/**
 * comp: sharing - addthis
 */
@media all {
  #ui .sharing {
    margin-bottom: 10px;
    margin-top: 40px;
    /* provider based styles */
  }
  #ui .sharing .addthis_toolbox > a {
    float: left;
    margin-right: 5px;
  }
  #ui .sharing a:link,
  #ui .sharing a:hover {
    color: #333;
  }
  #ui .sharing a:active,
  #ui .sharing a:focus {
    background-color: transparent;
  }
  #ui .sharing .addthis_toolbox > a.addthis_button_facebook_like {
    margin-top: 8px;
  }
  /* footer styles */
  #ui footer .sharing {
    float: left;
    height: 35px;
  }
  #ui footer .sharing .addthis_toolbox > a {
    margin: 10px 5px 0 0;
  }
  #ui footer .sharing .addthis_separator {
    border-left: 1px solid #3380b6;
    box-shadow: inset 1px 0 #3380b6;
    float: left;
    height: 35px;
    margin: 0 5px 0 0;
    width: 1px;
  }
}
@media screen and (min-width: 641px) {
  #ui .sharing {
    margin-bottom: 0;
    margin-top: 0;
  }
}
/**
 * stage.less
 *
 */
#ui .stage {
  margin-bottom: 20px;
  min-height: 140px;
  position: relative;
}
#ui .stage .textblock h2 {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.333;
  color: #fff;
  padding-bottom: 20px;
  text-transform: uppercase;
}
#ui .stage .textblock h3 {
  font-size: 18px;
  line-height: 1.333;
  font-weight: normal;
  color: #fff;
}
#ui .stage .image {
  width: 100%;
}
#ui .stage .image img {
  max-width: 100%;
}
.contentpage #ui .stage {
  margin: 0;
}
.contentpage #ui .stage > div > .par {
  margin-left: 0;
}
.productpage #ui .stage {
  margin-bottom: 0;
  min-height: 0;
}
.productpage #ui .stage .textblockWrapper .textblock {
  margin-bottom: 40px;
}
@media screen and (min-width: 641px) {
  #ui .stage {
    margin-bottom: 70px;
  }
  .productpage #ui .stage {
    width: 66%;
  }
  #ui .stage .textblock h2 {
    font-size: 30px;
    padding-bottom: 30px;
  }
  #ui .stage .textblock h3 {
    font-size: 18px;
  }
  #ui .stage .position2 .textblock {
    width: 50%;
    position: absolute;
    right: 0;
    top: 10%;
  }
  #ui .stage .position2 .image {
    width: 100%;
    float: left;
  }
}
@media screen and (min-width: 1025px) {
  #ui .stage {
    margin: 0 0 17px;
  }
}
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000);
  zoom: 1;
  padding: 0;
}
@media screen and (min-width: 641px) {
  #ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock,
  #ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock,
  #ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock,
  #ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock {
    left: auto;
    max-width: 40%;
    right: 5px;
  }
}
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock h2,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock h2,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock h2,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock h2,
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock h3,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock h3,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock h3,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock h3,
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .textimage,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .textimage,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .textimage,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .textimage {
  padding-bottom: 20px;
}
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock h2,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock h2,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock h2,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock h2 {
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  text-transform: none;
  color: #fff;
  padding-top: 0;
}
@media screen and (min-width: 1025px) {
  #ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock h2,
  #ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock h2,
  #ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock h2,
  #ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock h2 {
    font-size: 36px;
  }
}
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock h3,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock h3,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock h3,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock h3 {
  color: #c0e2fb;
  font-size: 18px;
  font-weight: normal;
  line-height: 1;
  line-height: 1.333;
  padding-top: 0;
}
@media screen and (min-width: 1025px) {
  #ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock h3,
  #ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock h3,
  #ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock h3,
  #ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock h3 {
    font-size: 20px;
  }
}
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .textimage,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .textimage,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .textimage,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .textimage {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000);
  zoom: 1;
  font-size: 13px;
  line-height: 1.333;
  color: #fff;
}
@media screen and (min-width: 1025px) {
  #ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .textimage,
  #ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .textimage,
  #ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .textimage,
  #ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .textimage {
    font-size: 13px;
  }
}
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button {
  background: -webkit-gradient(linear, left top, left bottom, from(#c50223), to(#99011b));
  background: -webkit-linear-gradient(top, #c50223, #99011b);
  background: -moz-linear-gradient(top, #c50223, #99011b);
  background: -ms-linear-gradient(top, #c50223, #99011b);
  background: -o-linear-gradient(top, #c50223, #99011b);
  background-color: #c50223;
  -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  cursor: pointer;
  display: inline-block;
  padding: 7px 15px;
  text-transform: uppercase;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  font-size: medium;
  float: right;
}
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button span,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button span,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button span,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button span,
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button a,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button a,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button a,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button a {
  color: #fff;
  padding-right: 35px;
  position: relative;
  text-transform: uppercase;
  word-wrap: break-word;
  white-space: nowrap;
  font-size: inherit;
}
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button span:before,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button span:before,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button span:before,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button span:before,
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button a:before,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button a:before,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button a:before,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button a:before {
  content: "";
  position: absolute;
}
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button span:before,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button span:before,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button span:before,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button span:before,
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button a:before,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button a:before,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button a:before,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button a:before {
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -110px -90px;
  width: 21px;
  height: 14px;
  display: inline-block;
  right: 2px;
  top: 2px;
}
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button span:after,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button span:after,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button span:after,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button span:after,
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button a:after,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button a:after,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button a:after,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button a:after {
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  content: "";
  padding-left: 15px;
}
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button a,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button a,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button a,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button a {
  line-height: normal;
}
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button a:hover,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button a:hover,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button a:hover,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button a:hover,
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button a:active,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button a:active,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button a:active,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button a:active,
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button a:focus,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button a:focus,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button a:focus,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button a:focus {
  text-decoration: none;
}
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button:hover,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button:hover,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button:hover,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button:hover,
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button:active,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button:active,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button:active,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button:active,
#ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button:focus,
#ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button:focus,
#ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button:focus,
#ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button:focus {
  text-decoration: none;
}
@media screen and (min-width: 641px) {
  #ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button,
  #ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button,
  #ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button,
  #ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button {
    float: left;
  }
}
@media screen and (min-width: 1025px) {
  #ui .carousel .stage .stage--box.rendermode_general .textblockWrapper .textblock .button,
  #ui .carousel3 .stage .stage--box.rendermode_general .textblockWrapper .textblock .button,
  #ui .carousel .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button,
  #ui .carousel3 .stage .stage--box.rendermode_generic .textblockWrapper .textblock .button {
    font-size: 13px;
    padding-bottom: 7px;
    padding-top: 7px;
  }
}
/**
 * teaser.less
 * [ Teaser ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 */
#ui .productfinder .teaser.resized {
  height: auto !important;
}
#ui .accordion .teaser {
  height: 246px;
}
#ui .ui-accordion-content .teaser .image {
  position: absolute;
  bottom: 0;
  left: 0;
}
@media screen and (min-width: 641px) {
  #ui .ui-accordion-content .teaser .image #ui .ui-accordion-content .teaser .image {
    height: 115px;
  }
  #ui .ui-accordion-content .teaser .image #ui .ui-accordion-content .teaser .rendermode_imageLast .button {
    bottom: 100px;
  }
}
.articlepage #ui #content .teaser {
  -webkit-box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
}
#ui #sidebar-right .teaser,
#ui #sidebar-right .teaser .rendermode_imageLast,
#ui #sidebar-right .teaser .rendermode_imageFirst,
#ui #sidebar-right .teaser .rendermode_imageLast .image,
#ui #sidebar-right .teaser .rendermode_imageFirst .image {
  border-radius: 0;
}
#ui .cookienote .teaser {
  box-shadow: none;
  max-width: 100%;
}
#ui .cookienote .teaser h3 {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.333;
  text-transform: uppercase;
  color: #fff;
}
#ui .cookienote .teaser .noimage {
  min-height: initial;
}
#ui .cookienote .teaser .noimage .button {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
  position: relative;
}
#ui .cookienote .teaser .noimage .button span {
  color: #c0e2fb;
  padding-right: 0;
  text-transform: none;
}
#ui .cookienote .teaser .noimage .button span:after,
#ui .cookienote .teaser .noimage .button span:before {
  content: normal;
}
@media screen and (min-width: 641px) {
  #ui .cookienote .teaser {
    margin-bottom: 0;
  }
  #ui .cookienote .teaser h3 {
    font-size: 30px;
  }
}
#ui .teaser {
  -webkit-box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  height: 100%;
  margin: 0 auto 20px;
  overflow: hidden;
  position: relative;
}
.landingpage--kintsuglue #ui .teaser {
  box-shadow: none;
  padding: 5px;
}
#ui .teaser .textblock {
  width: 100%;
}
#ui .teaser .textblock h3 {
  font-size: 18px;
  line-height: 1.333;
  font-weight: normal;
  color: #fff;
  margin-bottom: 12px;
}
#ui .teaser .textblock h4 {
  display: none;
}
#ui .teaser .textblock p {
  font-size: 13px;
  line-height: 1.333;
  color: #fff;
}
#ui .teaser .image {
  background-color: #003a74;
  display: block;
  height: 135px;
  overflow: hidden;
  width: 100%;
}
#ui .teaser .image img {
  position: relative;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: auto;
  margin: 0 auto;
  min-height: 100%;
  min-width: 100%;
  width: 100%;
}
.landingpage--kintsuglue #ui .teaser .image img {
  left: auto;
  top: auto;
  transform: none;
  width: 100%;
}
#ui .teaser .button {
  left: 20px;
  position: absolute;
}
.landingpage--kintsuglue #ui .teaser .button {
  background: none;
  background-color: transparent;
  border: 1px solid #cccccc;
  border-radius: 0;
  box-shadow: none;
  font-size: 13px;
  margin-top: 15px;
  padding: 12px 30px;
  position: static;
  text-decoration: none;
}
@media screen and (min-width: 641px) {
  .landingpage--kintsuglue #ui .teaser .button {
    margin-top: -10px;
    padding: 7px 15px;
  }
}
.landingpage--kintsuglue #ui .teaser .button span {
  color: red;
  padding-right: 0;
}
.landingpage--kintsuglue #ui .teaser .button span:before,
.landingpage--kintsuglue #ui .teaser .button span:after {
  display: none;
}
#ui .teaser .noimage {
  height: 100%;
  min-height: 150px;
}
#ui .teaser .noimage .textblock {
  margin-bottom: 20px;
}
#ui .teaser .noimage .button {
  display: inline-block;
  left: 0;
  margin: 0 0 20px 20px;
}
#ui .teaser .rendermode_imageLast,
#ui .teaser .rendermode_imageFirst {
  background: #e2e2e2;
  color: #003a74;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -o-box;
  display: box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}
.landingpage--kintsuglue #ui .teaser .rendermode_imageLast,
.landingpage--kintsuglue #ui .teaser .rendermode_imageFirst {
  background: none;
  padding: 0;
}
.landingpage--kintsuglue #ui .teaser .rendermode_imageLast .image,
.landingpage--kintsuglue #ui .teaser .rendermode_imageFirst .image {
  background: none;
  border-radius: 0;
  height: auto;
}
.landingpage--kintsuglue #ui .teaser .rendermode_imageLast .image img,
.landingpage--kintsuglue #ui .teaser .rendermode_imageFirst .image img {
  min-height: 0;
}
#ui .teaser .rendermode_imageLast .textblock,
#ui .teaser .rendermode_imageFirst .textblock {
  padding-left: 20px;
  padding-right: 20px;
}
.landingpage--kintsuglue #ui .teaser .rendermode_imageLast .textblock,
.landingpage--kintsuglue #ui .teaser .rendermode_imageFirst .textblock {
  margin-top: 0;
  padding: 0;
  position: relative;
}
.landingpage--kintsuglue #ui .teaser .rendermode_imageLast .textblock:before,
.landingpage--kintsuglue #ui .teaser .rendermode_imageFirst .textblock:before {
  background-color: red;
  content: "";
  display: block;
  height: 3px;
  margin: 20px 0 15px 0;
  position: relative;
  width: 41px;
}
#ui .teaser .rendermode_imageLast .textblock h3,
#ui .teaser .rendermode_imageFirst .textblock h3 {
  font-size: 18px;
  line-height: 1.333;
  font-weight: bold;
  color: #0060a4;
}
.landingpage--kintsuglue #ui .teaser .rendermode_imageLast .textblock h3,
.landingpage--kintsuglue #ui .teaser .rendermode_imageFirst .textblock h3 {
  color: #000000;
  font-size: 26px;
  line-height: 30px;
  margin-bottom: 10px;
}
@media screen and (min-width: 641px) {
  .landingpage--kintsuglue #ui .teaser .rendermode_imageLast .textblock h3,
  .landingpage--kintsuglue #ui .teaser .rendermode_imageFirst .textblock h3 {
    min-height: 60px;
  }
}
#ui .teaser .rendermode_imageLast .textblock h4,
#ui .teaser .rendermode_imageFirst .textblock h4 {
  display: none;
}
#ui .teaser .rendermode_imageLast .textblock p,
#ui .teaser .rendermode_imageFirst .textblock p {
  font-size: 13px;
  line-height: 1.333;
  color: #333333;
  margin-bottom: 4px;
}
.landingpage--kintsuglue #ui .teaser .rendermode_imageLast .textblock p,
.landingpage--kintsuglue #ui .teaser .rendermode_imageFirst .textblock p {
  color: #5f6973;
  font-size: 14px;
}
#ui .teaser .rendermode_imageLast .textblock p a,
#ui .teaser .rendermode_imageFirst .textblock p a {
  border-bottom: 1px solid #3380b6;
  display: block;
  margin-bottom: -4px;
  padding: 7px 35px 8px 0;
  position: relative;
}
#ui .teaser .rendermode_imageLast .textblock p a:after,
#ui .teaser .rendermode_imageFirst .textblock p a:after {
  background-color: transparent;
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-position: -55px 0;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 28px;
  position: absolute;
  right: 0;
  top: -1px;
  width: 28px;
}
.landingpage--kintsuglue #ui .teaser .rendermode_imageLast .textblock p a,
.landingpage--kintsuglue #ui .teaser .rendermode_imageFirst .textblock p a {
  display: inline-block;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.landingpage--kintsuglue #ui .teaser .rendermode_imageLast .textblock p a:after,
.landingpage--kintsuglue #ui .teaser .rendermode_imageFirst .textblock p a:after {
  display: none;
}
#ui .teaser .rendermode_imageLast .textblock p:last-child a,
#ui .teaser .rendermode_imageFirst .textblock p:last-child a {
  border-bottom: none;
}
#ui .teaser .rendermode_imageLast {
  padding: 20px 0 0;
}
#ui .teaser .rendermode_imageLast .textblock {
  margin-bottom: 30px;
}
#ui .teaser .rendermode_imageLast .button {
  bottom: 120px;
}
#ui .teaser .rendermode_imageLast .image {
  -ms-flex-item-align: end;
  flex-item-align: end;
  -webkit-align-self: flex-end;
  -moz-align-self: flex-end;
  -ms-align-self: flex-end;
  -o-align-self: flex-end;
  align-self: flex-end;
}
#ui .teaser .rendermode_imageLast.noimage .button {
  bottom: 0;
}
#ui .teaser .rendermode_imageFirst {
  padding: 0 0 20px;
}
#ui .teaser .rendermode_imageFirst .textblock {
  margin-top: 30px;
}
#ui .teaser .rendermode_imageFirst .button {
  top: 120px;
}
#ui .teaser .rendermode_imageFirst .image {
  -ms-flex-item-align: start;
  flex-item-align: start;
  -webkit-align-self: flex-start;
  -moz-align-self: flex-start;
  -ms-align-self: flex-start;
  -o-align-self: flex-start;
  align-self: flex-start;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
#ui .teaser .rendermode_imageFirst.noimage .textblock {
  padding-top: 20px;
}
#ui .teaser .rendermode_imageFirst.noimage .button {
  top: 0;
}
#ui .teaser .teaser-background--blue,
#ui .teaser .blue {
  background: #003a74;
}
#ui .teaser .teaser-background--blue .textblock h3,
#ui .teaser .blue .textblock h3,
#ui .teaser .teaser-background--blue .textblock p,
#ui .teaser .blue .textblock p,
#ui .teaser .teaser-background--blue .textblock a,
#ui .teaser .blue .textblock a {
  color: #fff;
}
.landingpage--kintsuglue #ui [class*="cq-colctrl-lt1-c"] .teaser .rendermode_imageLast .button,
.landingpage--kintsuglue #ui [class*="cq-colctrl-lt0-c"] .teaser .rendermode_imageLast .button,
.landingpage--kintsuglue #ui [class*="cq-colctrl-lt1-c"] .teaser .rendermode_imageFirst .button,
.landingpage--kintsuglue #ui [class*="cq-colctrl-lt0-c"] .teaser .rendermode_imageFirst .button {
  font-size: 17px;
  font-weight: normal;
  margin-top: 10px;
  padding: 18px 35px;
}
@media screen and (min-width: 641px) {
  #ui .teaser {
    margin-left: 0;
    margin-right: 0;
  }
  #ui .teaser .textblock h3 {
    font-size: 18px;
    margin-bottom: 12px;
  }
  #ui .teaser .textblock p {
    font-size: 13px;
  }
  #ui .teaser .rendermode_imageLast .textblock h3,
  #ui .teaser .rendermode_imageFirst .textblock h3 {
    font-size: 18px;
  }
  #ui .teaser .rendermode_imageLast .textblock p,
  #ui .teaser .rendermode_imageFirst .textblock p {
    font-size: 13px;
  }
  #ui .teaser .rendermode_imageLast .textblock {
    margin-bottom: 30px;
  }
  #ui .teaser .rendermode_imageFirst .textblock {
    margin-top: 30px;
  }
  #ui .teaser .image img {
    height: 100%;
    width: auto;
  }
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt1-c"] .teaser .rendermode_imageLast .textblock:before,
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt0-c"] .teaser .rendermode_imageLast .textblock:before,
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt1-c"] .teaser .rendermode_imageFirst .textblock:before,
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt0-c"] .teaser .rendermode_imageFirst .textblock:before {
    margin: 30px 0 25px 0 !important;
  }
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt1-c"] .teaser .rendermode_imageLast .textblock h3,
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt0-c"] .teaser .rendermode_imageLast .textblock h3,
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt1-c"] .teaser .rendermode_imageFirst .textblock h3,
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt0-c"] .teaser .rendermode_imageFirst .textblock h3 {
    font-size: 32px;
    line-height: 1.333;
    margin-bottom: 20px;
    min-height: 0;
  }
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt1-c"] .teaser .rendermode_imageLast .textblock p,
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt0-c"] .teaser .rendermode_imageLast .textblock p,
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt1-c"] .teaser .rendermode_imageFirst .textblock p,
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt0-c"] .teaser .rendermode_imageFirst .textblock p {
    font-size: 16px;
    line-height: 1.333;
  }
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt1-c"] .teaser .rendermode_imageLast .button,
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt0-c"] .teaser .rendermode_imageLast .button,
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt1-c"] .teaser .rendermode_imageFirst .button,
  .landingpage--kintsuglue #ui [class*="cq-colctrl-lt0-c"] .teaser .rendermode_imageFirst .button {
    font-size: 13px;
    padding: 12px 20px;
  }
}
/**
 * teasergallery.less
 * [ Teaser gallery of Loctite Responsive ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @name Teaser Gallery
 * @description Config: 3 teasers per row.
 *
 * @markup
 * <div class="par parsys">
 *     <div class="par parsys">
 *         <div class="gallery cl section teasergallery">
 *             <ul>
 *                 <li class="first-in-row">
 *                     <div class="contentpage">
 *                         <div class="pageteaser teaser resized">
 *                             <div class="default rendermode_imageLast">
 *                                 <div class="textblock">
 *                                     <h3>Super Glues</h3>
 *                                     <div class="text">
 *                                         <p>Our water-resistant, instant super glues are perfect for smaller surface Our water-resistant, instant super glues are perfect for smaller surface repairs.
 *                                             <br>
 *                                         </p>
 *                                     </div>
 *                                 </div>
 *                                 <figure class="parbase image"><img title="" alt="" class="cq-dd-image " src="/assets/img/image-dummy/453x125.png">
 *                                 </figure>
 *                                 <a href="#" class="button " title="Super Glues"><span>Get started</span></a>
 *                             </div>
 *                         </div>
 *                     </div>
 *                 </li>
 *                 <li class="">
 *                     <div class="contentpage">
 *                         <div class="pageteaser teaser resized">
 *                             <div class="default rendermode_imageLast">
 *                                 <div class="textblock">
 *                                     <h3>Super Glues</h3>
 *                                     <div class="text">
 *                                         <p>Our water-resistant, instant super glues are perfect for smaller surface repairs.
 *                                             <br>
 *                                         </p>
 *                                     </div>
 *                                 </div>
 *                                 <figure class="parbase image"><img title="" alt="" class="cq-dd-image " src="/assets/img/image-dummy/453x125.png">
 *                                 </figure>
 *                                 <a href="#" class="button " title="Super Glues"><span>Get started</span></a>
 *                             </div>
 *                         </div>
 *                     </div>
 *                 </li>
 *                 <li class="last-in-row">
 *                     <div class="contentpage">
 *                         <div class="pageteaser teaser resized">
 *                             <div class="default rendermode_imageLast">
 *                                 <div class="textblock">
 *                                     <h3>Super Glues</h3>
 *                                     <div class="text">
 *                                         <p>Our water-resistant, instant super glues are perfect for smaller surface repairs.
 *                                             <br>
 *                                         </p>
 *                                     </div>
 *                                 </div>
 *                                 <figure class="parbase image"><img title="" alt="" class="cq-dd-image " src="/assets/img/image-dummy/453x125.png">
 *                                 </figure>
 *                                 <a href="#" class="button " title="Super Glues"><span>Get started</span></a>
 *                             </div>
 *                         </div>
 *                     </div>
 *                 </li>
 *                 <li class="first-in-row">
 *                     <div class="contentpage">
 *                         <div class="pageteaser teaser resized">
 *                             <div class="default rendermode_imageLast">
 *                                 <div class="textblock">
 *                                     <h3>Super Glues</h3>
 *                                     <div class="text">
 *                                         <p>Our water-resistant, instant super glues are perfect for smaller surface repairs.
 *                                             <br>
 *                                         </p>
 *                                     </div>
 *                                 </div>
 *                                 <figure class="parbase image"><img title="" alt="" class="cq-dd-image " src="/assets/img/image-dummy/453x125.png">
 *                                 </figure>
 *                                 <a href="#" class="button " title="Super Glues"><span>Get started</span></a>
 *                             </div>
 *                         </div>
 *                     </div>
 *                 </li>
 *             </ul>
 *             <script class="config">
 *             new Object({
 *                 teaserColumns: '3'

 *             });
 *             </script>
 *         </div>
 *     </div>
 * </div>
 *
 *
 *
*/
#ui .teasergallery {
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;
  width: 100%;
}
#ui .teasergallery ul {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  zoom: 1;
  margin-left: -18px;
  margin-right: -18px;
}
#ui .teasergallery ul:before,
#ui .teasergallery ul:after {
  content: "";
  display: table;
}
#ui .teasergallery ul:after {
  clear: both;
}
#ui .teasergallery li {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  float: left;
  margin: 0;
  min-height: 1px;
  padding-left: 18px;
  padding-right: 18px;
  position: relative;
  width: 100%;
  cursor: pointer;
  margin-bottom: 30px;
}
#ui .teasergallery .teaser {
  margin-bottom: 0;
}
#ui .teasergallery .rendermode_imageFirst {
  height: 100%;
  position: relative;
}
@media screen and (min-width: 641px) {
  #ui .teasergallery li {
    width: 50%;
    margin-right: 0;
  }
}
@media screen and (min-width: 1025px) {
  #ui .teasergallery ul {
    margin: 0;
  }
  #ui .teasergallery .first-in-row {
    padding-left: 0;
  }
  #ui .teasergallery li {
    width: 33.33333333%;
    margin-right: 0;
    padding-left: 0;
  }
}
/**
 * summary.less
 * [ Summary component ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @name Summary with optional image
 * @description Summary component
 * @mobileFirst
 *
 * @markup
 * <div class="summary section" style="background-color:  #e2e2e2; color: #333; padding:20px;">
 *     <figure class="parbase image">
 *         <img class="cq-dd-image adaptive" src="/assets/img/image-dummy/436x276.jpg" data-src="/assets/img/image-dummy/436x276.jpg" data-width="" data-max-width="0" data-height="" alt="Imagealt">
 *         <noscript>
 *             &lt;img src="/assets/img/image-dummy/436x276.jpg" alt="Imagealt"/&gt;
 *         </noscript>
 *         <figcaption>Imagedescription</figcaption>
 *     </figure>
 *     <div class="hasImage">
 *         <h3>Summarytitle</h3>
 *         <h4>Subtitle</h4>
 *         <div class="textimage">
 *             <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
 *         </div>
 *     </div>
 * </div>
 *
 *
*/
#ui .summary h3 {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.333;
  text-transform: uppercase;
  color: #0060a4;
}
#ui .summary h4 {
  font-size: 18px;
  line-height: 1.333;
  font-weight: normal;
  color: #0060a4;
  margin-bottom: 10px;
}
#ui .summary p {
  font-size: 13px;
  line-height: 1.333;
  color: #333333;
}
#ui .summary.section {
  margin-bottom: 20px;
}
@media screen and (min-width: 641px) {
  #ui .summary h3 {
    font-size: 30px;
  }
  #ui .summary h4 {
    font-size: 18px;
  }
  #ui .summary p {
    font-size: 13px;
  }
}
/**
 * textimage.less
 * [ The combination of text and an image is the general component to fill pages with content ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @name Text image - Default state
 * @description The Text & Image combination is the general building block for the content area of a page. The component displays a rich text block with an image. Each part (text or image) is optional. The position of the image in relation to the text is adjustable.
 *
 */
#ui .textimage h2 {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.333;
  text-transform: uppercase;
  color: #0060a4;
}
#ui .textimage h3 {
  font-size: 18px;
  line-height: 1.333;
  font-weight: bold;
  color: #0060a4;
}
.landingpage--kintsuglue #ui .textimage h3 {
  color: #000000;
  font-size: 26px;
  line-height: 30px;
}
#ui .textimage p,
#ui .textimage span {
  font-size: 13px;
  line-height: 1.333;
  color: #fff;
}
#ui .textimage h4,
#ui .textimage h5,
#ui .textimage p,
#ui .textimage span,
#ui .textimage li {
  color: inherit;
}
.landingpage--kintsuglue #ui .textimage h4,
.landingpage--kintsuglue #ui .textimage h5,
.landingpage--kintsuglue #ui .textimage p,
.landingpage--kintsuglue #ui .textimage span,
.landingpage--kintsuglue #ui .textimage li {
  color: #5f6973;
  font-size: 16px;
}
.landingpage--kintsuglue #ui .textimage a {
  color: #5f6973;
  font-size: 16px;
}
#ui .textimage .footnote {
  font-size: 12px;
}
#ui .textimage .inverted {
  background-color: #0060a4;
  color: #fff;
}
#ui .textimage .testimonial {
  font-style: italic;
}
#ui .textimage .attribution {
  font-style: italic;
  text-align: right;
}
@media screen and (min-width: 641px) {
  #ui .textimage h2 {
    font-size: 30px;
  }
  #ui .textimage h3 {
    font-size: 18px;
  }
  #ui .textimage p {
    font-size: 13px;
  }
}
#ui .productdetails .textimage,
#ui #stage .textimage,
#ui .textimage .textimage-text {
  padding: 0;
}
#ui .productdetails .textimage p:last-of-type,
#ui #stage .textimage p:last-of-type,
#ui .textimage .textimage-text p:last-of-type {
  margin-bottom: 0;
}
#ui #cboxContent .textimage .image {
  max-width: 200px;
}
#ui #stage .textimage {
  margin-bottom: 0;
}
.articlepage #ui .par.parsys .textimage {
  padding-left: 0;
  margin-bottom: 0;
}
.landingpage--kintsuglue #ui .parsys_column .textimage .textimage-text:before {
  display: none;
}
#ui .parsys_column.cq-colctrl-lt6 .textimage p {
  color: #000000;
}
#ui .parsys_column.cq-colctrl-lt1-c1 .textimage {
  margin-bottom: 0;
  padding: 0 15%;
}
@media screen and (min-width: 641px) {
  #ui .parsys_column.cq-colctrl-lt1-c1 .textimage {
    padding: 0;
  }
}
#ui .textimage {
  zoom: 1;
  background-color: transparent;
  margin: 0 0px 10px;
  overflow: hidden;
}
#ui .textimage:before,
#ui .textimage:after {
  content: "";
  display: table;
}
#ui .textimage:after {
  clear: both;
}
.landingpage--kintsuglue #ui .textimage {
  margin-bottom: 20px;
  padding-bottom: 20px;
}
#ui .textimage .image {
  margin-bottom: 10px;
  position: relative;
}
#ui .textimage .image a,
#ui .textimage .image img {
  max-width: 100%;
  width: 100%;
}
#ui .textimage .textimage-text .icon-link {
  position: relative;
  line-height: 2;
  margin-right: 35px;
}
#ui .textimage .textimage-text .icon-link:after {
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -110px -30px;
  width: 30px;
  height: 30px;
  content: "";
  display: inline-block;
  top: -2px;
  right: -35px;
  position: absolute;
}
.landingpage--kintsuglue #ui .textimage .textimage-text {
  position: relative;
}
.landingpage--kintsuglue #ui .textimage .textimage-text:before {
  overflow: hidden;
}
.landingpage--kintsuglue #ui .textimage .textimage-text a {
  display: inline;
  color: #5f6973;
  text-decoration: underline;
}
#ui .textimage h3,
#ui .textimage h4,
#ui .textimage h5,
#ui .textimage h2,
#ui .textimage p {
  margin-bottom: 20px;
}
#ui .textimage.border {
  border: 1px solid #006eac;
}
.landingpage--kintsuglue #ui .textimage.border {
  border: 0;
  border-radius: 0;
  padding: 0;
}
.landingpage--kintsuglue #ui .textimage.border .textimage-text:before {
  background-color: red;
  content: "";
  display: block;
  height: 3px;
  margin: 20px 0 15px 0;
  position: relative;
  width: 41px;
}
.landingpage--kintsuglue #ui .textimage.border .textimage-text p,
.landingpage--kintsuglue #ui .textimage.border .textimage-text a {
  font-size: 16px;
}
#ui .textimage.image-size33 .textimage-text,
#ui .textimage.image-size50 .textimage-text {
  overflow: hidden;
}
#ui .textimage.image-size33 > .image,
#ui .textimage.image-size50 > .image {
  width: 100%;
}
#ui .textimage.image-left > .image {
  float: none;
  margin: 0;
}
#ui .textimage.image-left .zoom .magnifier {
  bottom: 1px;
  left: 3px;
}
#ui .textimage.image-right > .image {
  float: none;
  margin: 0;
}
#ui .textimage.image-right .zoom .magnifier {
  bottom: 1px;
  left: auto;
  right: 3px;
}
#ui .textimage.image-full > .image {
  clear: both;
  float: none;
}
.landingpage--kintsuglue #ui .title + .textimage {
  margin-bottom: 30px;
  padding: 0 10%;
}
@media screen and (min-width: 1025px) {
  .landingpage--kintsuglue #ui .title + .textimage {
    margin-bottom: 50px;
    padding: 0 20%;
  }
}
.landingpage--kintsuglue #ui .title + .textimage.border {
  padding: 0;
}
.landingpage--kintsuglue #ui .title + .textimage p,
.landingpage--kintsuglue #ui .title + .textimage a {
  font-size: 16px;
}
@media screen and (min-width: 641px) {
  .landingpage--kintsuglue #ui .title + .textimage p,
  .landingpage--kintsuglue #ui .title + .textimage a {
    font-size: 18px;
  }
}
#ui #sidebar-right .textimage {
  padding: 20px;
}
/* images inside textimage should not be 100% wide if textimage is nested inside lightbox */
#ui .featherlight .textimage .image,
#ui .featherlight .textimage .image img {
  width: auto;
}
@media screen and (min-width: 641px) {
  #ui .textimage {
    margin: 0 0px 20px;
  }
  #ui .textimage h3,
  #ui .textimage h4,
  #ui .textimage h5,
  #ui .textimage h2,
  #ui .textimage p {
    margin-bottom: 20px;
  }
  #ui .textimage.image-left > .image {
    float: left;
    margin-right: 20px;
    width: auto;
  }
  .landingpage--kintsuglue #ui .textimage.image-left > .image {
    margin-right: 40px;
  }
  #ui .textimage.image-left .zoom .magnifier {
    bottom: 6px;
    left: -1px;
  }
  #ui .textimage.image-right > .image {
    float: right;
    margin-bottom: 20px;
    margin-left: 20px;
  }
  #ui .textimage.image-right > .image a,
  #ui .textimage.image-right > .image img,
  #ui .textimage.image-right > .image figcaption {
    float: right;
    max-width: 100%;
    text-align: right;
  }
  #ui .textimage.image-right .zoom .magnifier {
    bottom: 8px;
    left: auto;
    right: 8px;
  }
  #ui .textimage.image-size50 > .image {
    width: 50%;
  }
  #ui .textimage.image-size50 > .image img {
    width: 100%;
  }
  #ui .textimage.image-size50 .textimage-text {
    overflow: hidden;
  }
  #ui .textimage.image-size33 > .image {
    width: 33.33333333%;
  }
  #ui .textimage.image-size33 > .image img {
    width: 100%;
  }
  #ui .textimage.image-size33 .textimage-text {
    overflow: hidden;
  }
  .productpage #ui .textimage h3 {
    margin-bottom: 0;
  }
  .productpage #ui .textimage li {
    padding-bottom: 0;
  }
}
/*
 * title.less
 * [ This is the title component which is added to a section of a page. ]
 *
 * @mobileFirst
 *
 * @project:  Henkel Loctite Responsive
 * @date:     2015-05-04
 * @author:   Søren Birkemeyer, sbirkemeyer@sapient.com
 * @licensor: SAPIENTNITRO
 *
 * @name Title
 * @description The title component with optional subtitle
 *
 * @markup
 * <div class="title section">
 *   <h2>Title</h2>
 *   <h3>Subtitle</h3>
 * </div>
 */
#ui .title {
  margin-bottom: 10px;
}
#ui .title h2 {
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
}
#ui .title h3 {
  font-size: 18px;
  line-height: 1.333;
  font-weight: normal;
  color: #fff;
  margin-top: 5px;
}
@media screen and (min-width: 641px) {
  #ui .title {
    margin-bottom: 15px;
  }
  #ui .title h2 {
    font-size: 30px;
  }
  #ui .title h3 {
    font-size: 18px;
    margin-top: 5px;
  }
}
.landingpage--kintsuglue #ui .title {
  margin: 50px 0 30px 0;
  padding: 0 15%;
  text-align: center;
}
@media screen and (min-width: 641px) {
  .landingpage--kintsuglue #ui .title {
    margin: 50px 0 30px 0;
    padding: 0 10%;
  }
}
.landingpage--kintsuglue #ui .title h2 {
  color: red;
  font-size: 30px;
  line-height: 30px;
  margin-bottom: 0;
}
@media screen and (min-width: 641px) {
  .landingpage--kintsuglue #ui .title h2 {
    font-size: 46px;
    line-height: 48px;
  }
}
.landingpage--kintsuglue #ui .title h3 {
  color: #5f6973;
}
@media screen and (min-width: 641px) {
  .landingpage--kintsuglue #ui .title .title ~ .title {
    margin-top: 80px;
  }
}
#ui .solid .title h2,
.articlepage #ui .title h2,
#ui .productdetails .title h2 {
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  text-transform: uppercase;
  color: #0060a4;
}
#ui .solid .title h3,
.articlepage #ui .title h3,
#ui .productdetails .title h3 {
  font-size: 18px;
  line-height: 1.333;
  font-weight: normal;
  color: #0060a4;
}
#ui .productdetails .title h3 {
  font-size: 18px;
  line-height: 1.333;
  font-weight: bold;
  color: #0060a4;
}
@media screen and (min-width: 641px) {
  #ui .productdetails .title {
    margin-bottom: 15px;
  }
  #ui .productdetails .title h3 {
    margin-top: 5px;
  }
}
/**
 * countryselector.less
 * [ The contry selector component ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @name CountrySelector
 * @description This component displays the list of available countries for which the product is available
 *
 * @markup
 * <div class="cl countryselector box section">
 *     <h2>Please select your region</h2>
 *     <div class="country-wrapper cl">
 *         <ul>
 *             <li class="cl current">
 *                 <img src="http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/flags/belgium.jpg"/>
 *                 <ul>
 *                     <li>
 *                         <a href="/en.html" title="en">Germany<span class="hd"></span></a>
 *                     </li>
 *                 </ul>
 *             </li>
 *             <li class="cl">
 *                 <img src="http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/flags/belgium.jpg"/>
 *                 <ul>
 *                     <li>
 *                         <a href="/content/uac/loctite-enhancement/austria/www/de.html" title="de">Austria<span class="hd"></span></a>
 *                     </li>
 *                 </ul>
 *             </li>
 *             <li class="cl">
 *                 <img src="http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/flags/belgium.jpg"/>
 *                 <ul>
 *                     <li>
 *                         <a href="/content/uac/loctite-enhancement/bulgaria/www/bg.html" title="bg">Bulgaria<span class="hd"></span></a>
 *                     </li>
 *                 </ul>
 *             </li>
 *             <li class="cl">
 *                 <img src="http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/flags/belgium.jpg"/>
 *                 <ul>
 *                     <li>
 *                         <a href="/content/uac/loctite-enhancement/costa-rica/www/cuando-necesite-una-union-perfecta-loctite-jamas-te-abandona.html" title="es">Costa Rica<span class="hd"></span></a>
 *                     </li>
 *                 </ul>
 *             </li>
 *             <li class="cl">
 *                 <img src="http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/flags/belgium.jpg"/>
 *                 <ul>
 *                     <li>
 *                         <a href="/content/uac/loctite-enhancement/estonia/www/esileht.html" title="Esileht">Estonia<span class="hd"></span></a>
 *                     </li>
 *                 </ul>
 *             </li>
 *         </ul>
 *         <ul>
 *             <li class="cl">
 *                 <img src="http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/flags/belgium.jpg"/>
 *                 <ul>
 *                     <li>
 *                         <a href="/content/uac/loctite-enhancement/france/www/fr.html" title="fr">France<span class="hd"></span></a>
 *                     </li>
 *                 </ul>
 *             </li>
 *             <li class="cl">
 *                 <img src="http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/flags/belgium.jpg"/>
 *                 <ul>
 *                     <li>
 *                         <a href="/content/uac/loctite-enhancement/hungary/www/hu.html" title="hu">Hungary<span class="hd"></span></a>
 *                     </li>
 *                 </ul>
 *             </li>
 *             <li class="cl">
 *                 <img src="http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/flags/belgium.jpg"/>
 *                 <ul>
 *                     <li>
 *                         <a href="/content/uac/loctite-enhancement/italy/www/it.html" title="it">Italy<span class="hd"></span></a>
 *                     </li>
 *                 </ul>
 *             </li>
 *             <li class="cl">
 *                 <img src="http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/flags/belgium.jpg"/>
 *                 <ul>
 *                     <li>
 *                         <a href="/content/uac/loctite-enhancement/japan/www/ja.html" title="ja">Japan<span class="hd"></span></a>
 *                     </li>
 *                 </ul>
 *             </li>
 *             <li class="cl">
 *                 <img src="http://www.loctite-consumer.co.uk/content/dam/uac/loctite/master/www/flags/belgium.jpg"/>
 *                 <ul>
 *                     <li>
 *                         <a href="/content/uac/loctite-enhancement/spain/www/home.html" title="es">Spain<span class="hd"></span></a>
 *                     </li>
 *                 </ul>
 *             </li>
 *         </ul>
 *     </div>
 * </div>
 *
 *
*/
#ui .countryselector.box {
  background: url('../../../designs/loctite-responsive/www/components/navigation/countryselector/img/countryselector-background.png') -17px 127px no-repeat transparent;
  background-size: contain;
  border: none;
  min-height: 100%;
}
#ui .countryselector.box h2 {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.333;
  text-transform: uppercase;
  color: #fff;
}
#ui .countryselector.box h3 {
  font-size: 18px;
  line-height: 1.333;
  font-weight: normal;
  color: #fff;
}
#ui .countryselector.box ul li a {
  font-size: 13px;
  line-height: 1.333;
  color: #fff;
  line-height: 1.5;
}
#ui .countryselector.box ul li a:hover,
#ui .countryselector.box ul li a:focus {
  color: #FFCB00;
  text-decoration: none;
}
#ui .countryselector.box ul li.current a {
  font-weight: bold;
}
#ui .countryselector.box .country-wrapper {
  margin-bottom: 20px;
  margin-top: 18px;
  min-height: 189px;
}
#ui .countryselector.box .country-wrapper > ul {
  width: 100%;
}
#ui .countryselector.box .country-wrapper > ul > li {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  zoom: 1;
  margin-left: -18px;
  margin-right: -18px;
  border-bottom: 1px solid #0075b6;
  clear: both;
  padding: 6px 0 6px 40px;
  position: relative;
}
#ui .countryselector.box .country-wrapper > ul > li:before,
#ui .countryselector.box .country-wrapper > ul > li:after {
  content: "";
  display: table;
}
#ui .countryselector.box .country-wrapper > ul > li:after {
  clear: both;
}
#ui .countryselector.box .country-wrapper > ul > li:only-child {
  border-bottom: 0;
}
#ui .countryselector.box .country-wrapper > ul > li img,
#ui .countryselector.box .country-wrapper > ul > li ul {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  float: left;
  margin: 0;
  min-height: 1px;
  padding-left: 18px;
  padding-right: 18px;
  position: relative;
}
#ui .countryselector.box .country-wrapper > ul > li img {
  float: left;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#ui .countryselector.box .country-wrapper > ul > li ul {
  float: right;
  text-align: left;
  width: 89%;
}
#ui .countryselector.box .country-wrapper > ul > li ul li {
  display: inline-block;
}
@media screen and (min-width: 641px) {
  #ui .countryselector.box {
    background-position: 30px 0px;
    min-height: 400px;
  }
  #ui .countryselector.box h2 {
    font-size: 30px;
  }
  #ui .countryselector.box h3 {
    font-size: 18px;
  }
  #ui .countryselector.box ul li a {
    font-size: 12px;
  }
  #ui .countryselector.box .country-wrapper > ul {
    float: left;
    width: 50%;
  }
  #ui .countryselector.box .country-wrapper > ul > li {
    padding: 4px 0 3px 40px;
  }
  #ui .countryselector.box .country-wrapper > ul ul {
    width: 91%;
  }
}
@media screen and (min-width: 1025px) {
  #ui .countryselector.box {
    background-position: 94px 0px;
    min-height: 500px;
  }
  #ui .countryselector.box .country-wrapper > ul ul {
    width: 93%;
  }
}
/*
 * pagination.less
 * [ Contains pagination styles ]
 *
 * @mobileFirst
 *
 * @project:  Henkel Loctite Responsive
 * @date:     2015-05-06
 * @author:   Søren Birkemeyer, sbirkemeyer@sapient.com
 * @licensor: SAPIENTNITRO
 *
 * @name Pagination
 * @description Pagination component enabling paging navigation
 *
 * @markup
 * <ul class="pagination cl" style="background-color:  #e2e2e2; color: #333; padding:20px;">
 *   <li class="prev">
 *     <a href="#" btattached="true"><span></span></a>
 *   </li>
 *   <li class="number no-border">
 *     <a href="#!par-panelgroup2-panel">1</a>
 *   </li>
 *   <li class="spacer">...</li>
 *   <li class="number hidden">
 *     <a href="#!par-panelgroup2-panel2">2</a>
 *   </li>
 *   <li class="number no-border">
 *     <a href="#!par-panelgroup2-panel2" btattached="true">3</a>
 *   </li>
 *   <li class="number current">
 *     <strong>4</strong>
 *   </li>
 *   <li class="number">
 *     <a href="#!par-panelgroup2-panel2" btattached="true">5</a>
 *   </li>
 *   <li class="spacer">...</li>
 *   <li class="number hidden">
 *     <a href="#!par-panelgroup2-panel2" btattached="true">6</a>
 *   </li>
 *   <li class="number hidden">
 *     <a href="#!par-panelgroup2-panel2" btattached="true">7</a>
 *   </li>
 *   <li class="number no-border">
 *     <a href="#!par-panelgroup2-_1" btattached="true">8</a>
 *   </li>
 *   <li class="next">
 *     <a href="#" btattached="true"><span></span></a>
 *   </li>
 * </ul>
 *
 */
/* @name Pagination simple
 * @description Pagination with only 3 pages
 *
 * @markup
 * <ul class="pagination cl" style="background-color:  #e2e2e2; color: #333; padding:20px;">
 *   <li class="prev hidden">
 *     <a href="#" btattached="true"><span></span></a>
 *   </li>
 *   <li class="number current no-border">
 *      <strong>1</strong>
 *   </li>
 *   <li class="number">
 *     <a href="#!par-panelgroup2-panel2">2</a>
 *   </li>
 *   <li class="number">
 *     <a href="#!par-panelgroup2-panel2" btattached="true">3</a>
 *   </li>
 *   <li class="next">
 *     <a href="#" btattached="true"><span></span></a>
 *   </li>
 * </ul>
*/
#ui .pagination {
  zoom: 1;
  margin: 10px auto 20px;
  width: 100%;
  text-align: center;
}
#ui .pagination:before,
#ui .pagination:after {
  content: "";
  display: table;
}
#ui .pagination:after {
  clear: both;
}
#ui .pagination li {
  cursor: pointer;
  display: inline-block;
  padding: 0px 20px;
  position: relative;
  margin-bottom: 0px;
}
#ui .pagination li:first-child {
  margin-left: 0;
  padding-left: 0;
}
#ui .pagination li:last-child {
  margin-right: 0;
  padding-right: 0;
}
#ui .pagination li a,
#ui .pagination li strong {
  font-size: 13px;
  display: inline-block;
  line-height: 1;
  text-decoration: none;
  color: #333333;
}
#ui .pagination li a:focus,
#ui .pagination li strong:focus,
#ui .pagination li a:hover,
#ui .pagination li strong:hover {
  color: #fff;
}
#ui .pagination li a:hover,
#ui .pagination li a:focus,
#ui .pagination li.current strong {
  color: #c50223;
  text-decoration: none;
}
#ui .pagination li.number {
  border-left: 1px solid #333333;
  cursor: default;
}
#ui .pagination li.number.no-border {
  border-left: 0;
}
#ui .pagination li.spacer {
  padding: 0;
}
#ui .pagination li.hidden {
  display: none;
}
#ui .pagination li.prev a,
#ui .pagination li.next a {
  bottom: -7px;
  position: relative;
}
#ui .pagination li.prev a {
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: 0px -105px;
  width: 30px;
  height: 30px;
  display: inline-block;
}
#ui .pagination li.next a {
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -110px -30px;
  width: 30px;
  height: 30px;
  display: inline-block;
}
#ui .pagination li.next span,
#ui .pagination li.prev span {
  display: none;
}
@media screen and (min-width: 641px) {
  #ui .pagination li {
    margin-bottom: 0;
  }
  #ui .pagination li:first-child {
    margin-left: 10px;
  }
  #ui .pagination li:last-child {
    margin-right: 10px;
  }
}
@media screen and (min-width: 1025px) {
  #ui .pagination {
    float: right;
    text-align: right;
  }
}
/**
 * panelgroup2.less
 * [ This is a container wrapper of Product Details ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @name Panel Group 2
 * @description This is a wrapper container of <a href='/components/productdetails.html'>Product Details</a>. It basically adds layout and JS functionality to its tabs.
 *
 * @markup
 * <div class="product parsys panelgroup2 section productdetails">
 *     <div class="panel-body">Here the product details data</div>
 * </div>
 *
 *
*/
@media all {
  #ui .panelgroup2 {
    margin-bottom: 20px;
  }
}
/**
 * productdetails.less
 * [ Product details page styles ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @name Product details
 * @description This is the component which contains the specific information about a product
 *
 * @markup
 * <div class="product parsys panelgroup2 section productdetails">
 *     <div class="panel-body">
 *         <section class="panel parsys section panel-solid">
 *             <a class="jump " id="!par-productdetails-panel" name="!par-productdetails-panel" href="/#!par-productdetails-panel">
 *                 <div class="panel-header cl">
 *                     <figure class="parbase image"><img title="" alt="" class="cq-dd-image " src="http://www.loctite-consumer.co.uk/content/uac/loctite/uk/www/en/products/superglues/liquids/universal/_jcr_content/par/productdetails/panel/image.img.jpg/1408543633368.jpg">
 *                     </figure>
 *                     <h3>Step by Step</h3>
 *                 </div>
 *             </a>
 *             <div class="panel-body ">
 *                 <div class="parsys">
 *                     <div class="title section">
 *                         <h2>Step by Step</h2>
 *                         <h3>The original superglue from Loctite for universal applications.</h3></div>
 *                     <div class="parbase textimage section">
 *                         <div class="textimage-text">
 *                             <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
 *                         </div>
 *                     </div>
 *                     <div class="parbase textimage image-left section">
 *                         <figure class="parbase cl image"><img title="" alt="" class="cq-dd-image " src="http://dummyimage.com/138x75/000000/fff">
 *                         </figure>
 *                         <div class="textimage-text">
 *                             <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt&nbsp;</p>
 *                         </div>
 *                     </div>
 *                     <div class="parbase textimage section">
 *                         <div class="textimage-text">
 *                             <h4>Properties:<br></h4>
 *                             <ul>
 *                                 <li>Water resistant</li>
 *                                 <li>Extra long nozzle</li>
 *                                 <li>Anti-spill bottle for safe storage</li>
 *                                 <li>Holds heavy loads</li>
 *                                 <li>Bonds in seconds</li>
 *                                 <li>Suitable for use on most surfaces*</li>
 *                                 <li>Dries transparent for invisible bonds</li>
 *                                 <li>Solvent free
 *                                     <br>
 *                                 </li>
 *                             </ul>
 *                             <p><span class="footnote">* Except polyethylene (PE), polypropylene (PP). Not suitable for bonding glass, Styropor® or synthetic fibres.</span></p>
 *                         </div>
 *                     </div>
 *                     <div class="parbase textimage section">
 *                         <div class="textimage-text">
 *                             <ol>
 *                                 <li><span class="listitemstyle">1.</span>Ensure surfaces to be joined are clean, completely dry and close fitting.</li>
 *                                 <li><span class="listitemstyle">2.</span>Twist cap anti-clockwise to open.</li>
 *                                 <li><span class="listitemstyle">3.</span>Carefully squeeze a small drop onto one surface. Press the surfaces together and hold until set.
 *                                     <br>
 *                                 </li>
 *                                 <li><span class="listitemstyle">4.</span>Replace the cap immediately and store upright in a cool dry place.</li>
 *                             </ol>
 *                             <h4>In the case of bonded skin, carefully peel apart using soap, hot water and a blunt edge e.g. a teaspoon handle.<br></h4>
 *                         </div>
 *                     </div>
 *                 </div>
 *             </div>
 *             <script class="config">
 *             new Object({
 *                 animationSpeed: 5000,
 *                 lang: {
 *                     linkTextHide: 'Hide detailed description',
 *                     linkTextShow: 'Show detailed description'
 *                 }
 *             });
 *             </script>
 *         </section>
 *         <section class="panel parsys section panel-solid">
 *             <a class="jump " id="!par-productdetails-step_by_step" name="!par-productdetails-step_by_step" href="/#!par-productdetails-step_by_step">
 *                 <div class="panel-header cl">
 *                     <figure class="parbase image"><img title="" alt="" class="cq-dd-image " src="http://www.loctite-consumer.co.uk/content/uac/loctite/uk/www/en/products/superglues/liquids/universal/_jcr_content/par/productdetails/panel/image.img.jpg/1408543633368.jpg">
 *                     </figure>
 *                     <h3>Key Facts</h3>
 *                 </div>
 *             </a>
 *             <div class="panel-body ">
 *                 <div class="parsys">
 *                     <div class="title section">
 *                         <h2>Key Facts</h2>
 *                         <h3>The original superglue from Loctite for universal applications.</h3></div>
 *                     <div class="parbase textimage section">
 *                         <div class="textimage-text">
 *                             <h4>Recommend for</h4>
 *                             <p>China, Metal, Rubber, Leather, Wood, Plastic, Paper</p>
 *                         </div>
 *                     </div>
 *                     <div class="parsys cl panel-border productfeatures section">
 *                         <div class="par parsys">
 *                             <figure class="parbase image section"><img title="" alt="" class="cq-dd-image " src="http://dummyimage.com/77x76/000000/fff">
 *                             </figure>
 *                             <figure class="parbase image section"><img title="" alt="" class="cq-dd-image " src="http://dummyimage.com/77x76/000000/fff">
 *                             </figure>
 *                             <figure class="parbase image section"><img title="" alt="" class="cq-dd-image " src="http://dummyimage.com/77x76/000000/fff">
 *                             </figure>
 *                         </div>
 *                     </div>
 *                     <div class="parbase textimage section">
 *                         <div class="textimage-text">
 *                             <h4>Product Properties</h4>
 *                             <ul>
 *                                 <li>Water and Dishwater resistant</li>
 *                                 <li>Holds heaviest loads</li>
 *                                 <li>Bonds in second</li>
 *                             </ul>
 *                         </div>
 *                     </div>
 *                 </div>
 *             </div>
 *             <script class="config">
 *             new Object({
 *                 animationSpeed: 5000,
 *                 lang: {
 *                     linkTextHide: 'Hide detailed description',
 *                     linkTextShow: 'Show detailed description'
 *                 }

 *             });
 *             </script>
 *         </section>
 *     </div>
 *     <script class="config">
 *     new Object({
 *         navType: 'tabnav'
 *     });
 *     </script>
 * </div>
 *
 *
*/
#ui .productdetails {
  position: relative;
}
#ui .productdetails .tabnav {
  z-index: 1;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: 100%;
  left: 49%;
  position: absolute;
  top: -15px;
}
#ui .productdetails .tabnav ul {
  text-align: center;
}
#ui .productdetails .tabnav li {
  background: #f4f5f7;
  background: -moz-linear-gradient(top, #f4f5f7 0%, #f3f4f6 20%, #e9eaee 39%, #e3e5e9 46%, #dddfe4 49%, #ced3da 64%, #a8aebb 95%, #a6acb9 96%, #838b9b 98%, #768091 98%, #768090 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f5f7), color-stop(20%, #f3f4f6), color-stop(39%, #e9eaee), color-stop(46%, #e3e5e9), color-stop(49%, #dddfe4), color-stop(64%, #ced3da), color-stop(95%, #a8aebb), color-stop(96%, #a6acb9), color-stop(98%, #838b9b), color-stop(98%, #768091), color-stop(100%, #768090));
  background: -webkit-linear-gradient(top, #f4f5f7 0%, #f3f4f6 20%, #e9eaee 39%, #e3e5e9 46%, #dddfe4 49%, #ced3da 64%, #a8aebb 95%, #a6acb9 96%, #838b9b 98%, #768091 98%, #768090 100%);
  background: -o-linear-gradient(top, #f4f5f7 0%, #f3f4f6 20%, #e9eaee 39%, #e3e5e9 46%, #dddfe4 49%, #ced3da 64%, #a8aebb 95%, #a6acb9 96%, #838b9b 98%, #768091 98%, #768090 100%);
  background: -ms-linear-gradient(top, #f4f5f7 0%, #f3f4f6 20%, #e9eaee 39%, #e3e5e9 46%, #dddfe4 49%, #ced3da 64%, #a8aebb 95%, #a6acb9 96%, #838b9b 98%, #768091 98%, #768090 100%);
  background: linear-gradient(to bottom, #f4f5f7 0%, #f3f4f6 20%, #e9eaee 39%, #e3e5e9 46%, #dddfe4 49%, #ced3da 64%, #a8aebb 95%, #a6acb9 96%, #838b9b 98%, #768091 98%, #768090 100%);
  font-size: 13px;
  line-height: 1.333;
  color: #fff;
  color: #333333;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  border-left: 1px solid #a2a4aa;
  cursor: pointer;
  padding: 9px 20px;
  position: relative;
  display: inline-block;
  text-shadow: 0 1px 2px #fff;
}
#ui .productdetails .tabnav li:focus,
#ui .productdetails .tabnav li:hover {
  text-decoration: none;
}
#ui .productdetails .tabnav li.hover,
#ui .productdetails .tabnav li:hover,
#ui .productdetails .tabnav li.current,
#ui .productdetails .tabnav li.current:hover {
  background: #7a7a7b;
  background: -moz-linear-gradient(top, #7a7a7b 0%, #848586 14%, #868788 14%, #888989 17%, #98999b 32%, #a4a5a8 46%, #a4a6aa 50%, #a7a9ad 52%, #acafb5 63%, #adb1b9 74%, #aab0ba 85%, #a4aab7 96%, #828a9a 98%, #767f90 98%, #768090 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7a7a7b), color-stop(14%, #848586), color-stop(14%, #868788), color-stop(17%, #888989), color-stop(32%, #98999b), color-stop(46%, #a4a5a8), color-stop(50%, #a4a6aa), color-stop(52%, #a7a9ad), color-stop(63%, #acafb5), color-stop(74%, #adb1b9), color-stop(85%, #aab0ba), color-stop(96%, #a4aab7), color-stop(98%, #828a9a), color-stop(98%, #767f90), color-stop(100%, #768090));
  background: -webkit-linear-gradient(top, #7a7a7b 0%, #848586 14%, #868788 14%, #888989 17%, #98999b 32%, #a4a5a8 46%, #a4a6aa 50%, #a7a9ad 52%, #acafb5 63%, #adb1b9 74%, #aab0ba 85%, #a4aab7 96%, #828a9a 98%, #767f90 98%, #768090 100%);
  background: -o-linear-gradient(top, #7a7a7b 0%, #848586 14%, #868788 14%, #888989 17%, #98999b 32%, #a4a5a8 46%, #a4a6aa 50%, #a7a9ad 52%, #acafb5 63%, #adb1b9 74%, #aab0ba 85%, #a4aab7 96%, #828a9a 98%, #767f90 98%, #768090 100%);
  background: -ms-linear-gradient(top, #7a7a7b 0%, #848586 14%, #868788 14%, #888989 17%, #98999b 32%, #a4a5a8 46%, #a4a6aa 50%, #a7a9ad 52%, #acafb5 63%, #adb1b9 74%, #aab0ba 85%, #a4aab7 96%, #828a9a 98%, #767f90 98%, #768090 100%);
  background: linear-gradient(to bottom, #7a7a7b 0%, #848586 14%, #868788 14%, #888989 17%, #98999b 32%, #a4a5a8 46%, #a4a6aa 50%, #a7a9ad 52%, #acafb5 63%, #adb1b9 74%, #aab0ba 85%, #a4aab7 96%, #828a9a 98%, #767f90 98%, #768090 100%);
  border-right-color: transparent;
}
#ui .productdetails .tabnav li:first-child,
#ui .productdetails .tabnav li.pie_first-child {
  -webkit-border-radius: 15px 0 0 15px;
  -moz-border-radius: 15px 0 0 15px;
  border-radius: 15px 0 0 15px;
  border-left: 0;
  padding-left: 24px;
}
#ui .productdetails .tabnav li.last {
  -webkit-border-radius: 0 15px 15px 0;
  -moz-border-radius: 0 15px 15px 0;
  border-radius: 0 15px 15px 0;
  padding-right: 24px;
}
#ui .productdetails .tabnav li.first.last {
  border-radius: 15px;
}
#ui .productdetails .tabnav li > a {
  font-size: 13px;
  line-height: 1.333;
  color: #fff;
  color: #333333;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
}
#ui .productdetails .tabnav li > a:focus,
#ui .productdetails .tabnav li > a:hover {
  text-decoration: none;
}
#ui .productdetails > .panel-body {
  zoom: 1;
  background: #e2e2e2;
  border-radius: 5px;
  color: #333333;
  border-radius: 0;
  -webkit-box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  padding: 40px;
}
#ui .productdetails > .panel-body:before,
#ui .productdetails > .panel-body:after {
  content: "";
  display: table;
}
#ui .productdetails > .panel-body:after {
  clear: both;
}
#ui .productdetails > .panel-body p,
#ui .productdetails > .panel-body span,
#ui .productdetails > .panel-body li {
  color: inherit;
}
#ui .productdetails > .panel-body .nav {
  display: none;
}
#ui .productdetails .panel {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  zoom: 1;
  margin-left: -18px;
  margin-right: -18px;
}
#ui .productdetails .panel:before,
#ui .productdetails .panel:after {
  content: "";
  display: table;
}
#ui .productdetails .panel:after {
  clear: both;
}
#ui .productdetails .panel .panel-body,
#ui .productdetails .jump {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  float: left;
  margin: 0;
  min-height: 1px;
  padding-left: 18px;
  padding-right: 18px;
  position: relative;
  width: 100%;
}
#ui .productdetails .jump {
  display: block;
  margin-bottom: 20px;
}
#ui .productdetails .panel-header h3 {
  display: none;
}
#ui .productdetails .panel-header .image {
  border-radius: 5px;
}
#ui .productdetails .panel-header .image img {
  margin: 0 auto;
  width: 100%;
}
@media screen and (min-width: 641px) {
  #ui .productdetails .panel .panel-body {
    width: 66.66666666%;
    float: right;
    padding-left: 2%;
  }
  #ui .productdetails .jump {
    width: 33.33333333%;
    float: left;
    margin-bottom: 0;
    padding-left: 0;
  }
}
/**
 * productfeatures.less
 * [ This is a simple list with features of a product ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @name Product Features
 * @description The Product Features Component displays the features of a product by images.
 *
 * @markup
 * <div class="parsys cl panel-border productfeatures section">
 *     <div class="par parsys">
 *          <figure class="parbase image section"><img title="" alt="" class="cq-dd-image " src="http://dummyimage.com/77x76/000000/fff"></figure>
 *          <figure class="parbase image section"><img title="" alt="" class="cq-dd-image " src="http://dummyimage.com/77x76/000000/fff"></figure>
 *          <figure class="parbase image section"><img title="" alt="" class="cq-dd-image " src="http://dummyimage.com/77x76/000000/fff"></figure>
 *     </div>
 * </div>
 *
 *
*/
#ui .productfeatures {
  margin-bottom: 20px;
}
#ui .productfeatures .image {
  float: left;
  padding-right: 10px;
  padding-bottom: 10px;
}
/**
 * search.less
 * [ Search results page ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     04.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
*/
#ui .search.section {
  color: #003a74;
  background: #e2e2e2;
  border-radius: 5px;
  color: #333333;
  padding: 30px 10px;
}
#ui .search.section h2 {
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  text-transform: uppercase;
  color: #0060a4;
  margin-bottom: 20px;
}
#ui .search.section h3 {
  font-size: 13px;
  line-height: 1.333;
  color: #0060a4;
  margin-bottom: 20px;
}
#ui .search.section .mobile-hide {
  display: none;
}
#ui .search.section .searchresults {
  margin-bottom: 20px;
}
#ui .search.section .searchresults .result {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  zoom: 1;
  margin-left: -18px;
  margin-right: -18px;
  background-color: transparent;
  border-top: 1px solid transparent;
  padding: 5px;
}
#ui .search.section .searchresults .result:before,
#ui .search.section .searchresults .result:after {
  content: "";
  display: table;
}
#ui .search.section .searchresults .result:after {
  clear: both;
}
#ui .search.section .searchresults .result:before,
#ui .search.section .searchresults .result:after {
  content: "";
  display: table;
}
#ui .search.section .searchresults .result:after {
  clear: both;
}
#ui .search.section .searchresults .result a:hover {
  text-decoration: none;
}
#ui .search.section .searchresults .result:first-child {
  border-top-width: 0;
}
#ui .search.section .searchresults .result:hover {
  background-color: transparent;
}
#ui .search.section .searchresults .result p {
  font-size: 13px;
  line-height: 1.333;
  color: #333333;
}
#ui .search.section .searchresults .result h4,
#ui .search.section .searchresults .result .more {
  font-size: 13px;
  line-height: 1.333;
  color: #0060a4;
  text-decoration: underline;
  font-weight: bold;
}
#ui .search.section .searchresults .result h4,
#ui .search.section .searchresults .result p,
#ui .search.section .searchresults .result .more {
  padding-bottom: 5px;
  max-width: 70%;
}
#ui .search.section .searchresults .result h4,
#ui .search.section .searchresults .result p,
#ui .search.section .searchresults .result .more,
#ui .search.section .searchresults .result .icon,
#ui .search.section .searchresults .result .no-icon {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  float: left;
  margin: 0;
  min-height: 1px;
  padding-left: 18px;
  padding-right: 18px;
  position: relative;
}
#ui .search.section .searchresults .result .icon,
#ui .search.section .searchresults .result .no-icon {
  float: left;
  margin-right: 2%;
  margin-bottom: 10px;
  width: 33px;
  padding-left: 2px;
  padding-right: 2px;
}
#ui .search.section .searchresults .result .icon .image,
#ui .search.section .searchresults .result .no-icon .image {
  margin: 0 auto 20px;
}
#ui .search.section .searchresults .result .icon img,
#ui .search.section .searchresults .result .no-icon img {
  max-width: 100%;
}
#ui .search.section .searchresults .result .icon {
  background-color: #0060a4;
  color: #fff;
}
#ui .search.section .searchresults .result .contentpage .icon:before {
  font-family: "heli";
  font-size: 29px;
  font-weight: normal;
  speak: none;
  content: "\2f";
}
#ui .search.section .searchresults .result .articlepage .icon:before {
  font-family: "heli";
  font-size: 29px;
  font-weight: normal;
  speak: none;
  content: "\32";
}
#ui .search.section .searchresults .result .productpage .icon:before {
  font-family: "heli";
  font-size: 29px;
  font-weight: normal;
  speak: none;
  content: "\30";
}
#ui .search.section .searchresults .result .more {
  padding-right: 5px;
}
#ui .search.section .searchresults .result .more:after {
  color: #0060a4;
  content: "\BB";
  font-size: 16px;
  font-weight: bold;
}
@media screen and (min-width: 641px) {
  #ui .search {
    padding: 30px;
  }
  #ui .search .searchresults .result h2 {
    font-size: 36px;
  }
  #ui .search .searchresults .result h3 {
    font-size: 13px;
  }
  #ui .search .searchresults .result p,
  #ui .search .searchresults .result h4,
  #ui .search .searchresults .result .more {
    font-size: 13px;
  }
  #ui .search .searchresults .result h4 {
    width: 75%;
  }
  #ui .search .searchresults .result .icon .image,
  #ui .search .searchresults .result .no-icon .image {
    width: 50%;
    margin-bottom: 0;
  }
}
/**
 * form.less
 * [ Contact form ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     Month.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @mobileFirst
 * @name Form
 * @description Responsive contact form
 *
 * @markup
 * <div class="form contactform section">
 *     <h3>Contact</h3>
 *      <div class="textimage">
 *     <p>Any <b>feedback</b>? Feel free to contact us.</p>
 * </div>
 * <div class="mobiletext">
 *     <div class="phone">
 *         <p><b>Telephone:</b>
 *             <br>
 *             <b>Mo - Fr:</b> 08.00 - 17.00
 *             <br>
 *             <b>Sat, Sun:</b> closed</p>
 *         <div class="button">
 *             <a href="tel:01605849658">01605849658</a>
 *         </div>
 *     </div>
 *     <div class="altEmail">
 *         <p><b>Mail</b>
 *             <br> Or you can reach us by mail.</p>
 *         <div class="button">
 *             <a href="mailto:test@example.com">test@example.com</a>
 *         </div>
 *     </div>
 * </div>
 *     <form id="contact" action="#" method="post">
 *         <fieldset class="gender">
 *             <label for="f-contact-gender-0" class="">
 *                 <input type="radio" value="female" id="f-contact-gender-0" name="gender" class="rd">
 *                 <span class="styledRadio "></span>female <span class="hint">*</span>
 *             </label>
 *             <label for="f-contact-gender-1" class="">
 *                 <input type="radio" value="male" id="f-contact-gender-1" name="gender" class="rd">
 *                 <span class="styledRadio "></span>male <span class="hint">*</span>
 *             </label>
 *         </fieldset>
 *         <fieldset>
 *             <div class="row">
 *                 <div class="item input text">
 *                     <label for="f-contact-firstname">Name <span class="hint">*</span></label>
 *                     <input type="text" class="text" value="" name="firstName" id="f-contact-firstname">
 *                 </div>
 *                 <div class="item input text">
 *                     <label for="f-contact-lastname">Surname <span class="hint">*</span></label>
 *                     <input type="text" class="text" value="" name="lastName" id="f-contact-lastname">
 *                 </div>
 *             </div>
 *             <div class="row">
 *                 <div class="item input text long-text">
 *                     <label for="f-contact-street">Address</label>
 *                     <input type="text" class="text" value="" name="street" id="f-contact-street">
 *                 </div>
 *             </div>
 *             <div class="row">
 *                 <div class="item input text">
 *                     <label for="f-contact-postalcode">Post Code</label>
 *                     <input type="text" class="text" value="" maxlength="5" name="postalCode" id="f-contact-postalcode">
 *                 </div>
 *                 <div class="item input text">
 *                     <label for="f-contact-city">City</label>
 *                     <input type="text" class="text" value="" name="city" id="f-contact-city">
 *                 </div>
 *             </div>
 *             <div class="row">
 *                 <div class="item input select">
 *                     <label for="f-contact-country">Country <span class="hint">*</span></label>
 *                     <p class="">
 *                         <select name="country" id="f-contact-country">
 *                             <option value="New Zealand">New Zealand</option>
 *                             <option value="South Africa">South Africa</option>
 *                             <option value="UK">UK</option>
 *                             <option value="USA">USA</option>
 *                         </select>
 *                     </p>
 *                 </div>
 *             </div>
 *             <div class="row">
 *                 <div class="item input text">
 *                     <label for="f-contact-email">Email <span class="hint">*</span></label>
 *                     <input type="text" class="text" value="" name="email" id="f-contact-email">
 *                 </div>
 *                 <div class="item input text">
 *                     <label for="f-contact-phone">Phone</label>
 *                     <input type="text" class="text" value="" name="phone" id="f-contact-phone">
 *                 </div>
 *             </div>
 *             <div class="row">
 *                 <div class="item input text long-text">
 *                     <label for="f-contact-subject">Subject <span class="hint">*</span></label>
 *                     <input type="text" class="text" value="" name="subject" id="f-contact-subject">
 *                 </div>
 *             </div>
 *             <div class="row">
 *                 <div class="textarea text">
 *                     <label for="f-contact-message">Message <span class="hint">*</span></label>
 *                     <textarea class="" rows="8" cols="68" name="message" id="f-contact-message"></textarea>
 *                 </div>
 *             </div>
 *         </fieldset>
 *         <fieldset class="fsInfo">
 *             <div class="input checkbox">
 *                 <!-- input type="hidden" value="on" name="_privacy" /-->
 *                 <label class="" for="f-contact-privacy">
 *                     <input type="checkbox" value="true" id="f-contact-privacy" name="privacy" class="rd">
 *                     <span class="styledCheckbox"></span>
 *                     <strong>Yes,</strong>
 *                 </label>
 *                 <span class="hint ">I accept the <a href="/en/meta/footer-nav/privacy-policy.html" title="Privacy Policy">Terms of Use and Privacy Policy</a> . *</span>
 *             </div>
 *         </fieldset>
 *         <fieldset>
 *             <div class="captcha">
 *                 <script type="text/javascript">
 *                 var captchaStartTime = 0;

 *                 function captchaRefresh() {
 *                     var captchakey = ("" + Math.random()).substring(3, 8);
 *                     var captchaimg = document.getElementById("cq_captchaimg");
 *                     var captchakeyelem = document.getElementById("cq_captchakey");
 *                     captchaimg.src = captchaimg.src.split("?")[0] + "?id=" + captchakey;
 *                     captchakeyelem.value = captchakey;
 *                     captchaStartTime = new Date().getTime();
 *                 }

 *                 function captchaTimer() {
 *                     var now = new Date().getTime();
 *                     if ((now - captchaStartTime) > 60000) {
 *                         captchaRefresh();
 *                     }
 *                     var captchatimer = document.getElementById("cq_captchatimer");
 *                     if (!captchatimer) {
 *
 *                         return;
 *                     }
 *                     var width = Math.floor((60000 - (now - captchaStartTime)) / 60000 * 64);
 *                     captchatimer.innerHTML = "<div class=\"form_captchatimer_bar\" style=\"width:" + width + "px;\"></div>";
 *                     window.setTimeout(captchaTimer, 500);
 *                 }
 *                 </script>
 *                 <div class="row">
 *                     <div class="item input text">
 *                         <label for=":cq:captcha"><span class="hint">Please enter the validation characters: *</span></label>
 *                         <input type="text" class="text" size="6" name=":cq:captcha" id=":cq:captcha">
 *                     </div>
 *                 </div>
 *                 <div class="row captcha">
 *                     <div class="form_captcha_img"><img id="cq_captchaimg" src="http://www.loctite-consumer.co.uk/content/uac/loctite/uk/www/en/meta/meta-nav/contact/_jcr_content/par/contactform/captcha.captcha.png?id=07194" alt=""></div>
 *                     <div class="form_captcha_refresh">
 *                         <div class="form_captchatimer hd" id="cq_captchatimer">
 *                             <div class="form_captchatimer_bar" style="width:47px;"></div>
 *                         </div>
 *                         <div class="form_captcha_refresh_input">
 *                             <input type="button" value="Refresh">
 *                         </div>
 *                     </div>
 *                     <input type="hidden" name=":cq:captchakey" id="cq_captchakey" value="07194">
 *                 </div>
 *                 <script type="text/javascript">
 *                 captchaTimer();
 *                 </script>
 *             </div>
 *         </fieldset>
 *         <div class="submit">
 *             <span class="button"><input type="submit" value="Send"></span>
 *         </div>
 *         <p class="hint">* marked fields are mandatory.</p>
 *     </form>
 * </div>
 *
 *
*/
#ui .contactform form {
  display: none;
}
#ui .contactform h3 {
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
}
#ui .contactform .textimage {
  padding: 0;
}
#ui .contactform .mobiletext {
  background: #e2e2e2;
  border-radius: 5px;
  color: #333333;
  -webkit-box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  padding: 20px;
  margin-bottom: 20px;
}
#ui .contactform .mobiletext h3 {
  color: #003a74;
  margin-bottom: 20px;
}
#ui .contactform .mobiletext p {
  color: inherit;
}
#ui .contactform .mobiletext p,
#ui .contactform .mobiletext .button {
  margin-bottom: 20px;
}
#ui .contactform .mobiletext .button {
  padding-top: 0;
  padding-bottom: 3px;
}
@media screen and (min-width: 641px) {
  #ui .form {
    color: #003a74;
    background: #e2e2e2;
    border-radius: 5px;
    color: #333333;
    -webkit-box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
    padding: 50px;
    /*
            Typography
            ========================================================================== */
    /*
           Layout
           ========================================================================== */
  }
  #ui .form h3 {
    font-size: 36px;
    color: #003a74;
  }
  #ui .form .label,
  #ui .form label,
  #ui .form .error-message,
  #ui .form .hint {
    line-height: 1.333;
    color: #333333;
    font-size: 13px;
  }
  #ui .form input:not([type="button"]):not([type="submit"]),
  #ui .form textarea {
    font-size: 13px;
    line-height: 1.333;
    color: #333333;
    font-size: 12px;
  }
  #ui .form .error-message {
    color: #c50223;
    font-weight: bold;
    padding-bottom: 10px;
  }
  #ui .form .hint a:hover {
    color: #003a74;
  }
  #ui .form .mobiletext {
    display: none;
  }
  #ui .form fieldset {
    margin-left: auto;
    margin-right: auto;
    max-width: 1024px;
    width: 100%;
    margin-bottom: 15px;
  }
  #ui .form form {
    padding: 0;
    display: block;
    max-width: 600px;
    /*
               Color/border styles of the Input Fields
              ========================================================================== */
    /*
                Validation Error Styles
                ========================================================================== */
    /*
              Captcha
              ========================================================================== */
  }
  #ui .form form .row,
  #ui .form form .row.captcha {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    zoom: 1;
    margin-left: -18px;
    margin-right: -18px;
  }
  #ui .form form .row:before,
  #ui .form form .row.captcha:before,
  #ui .form form .row:after,
  #ui .form form .row.captcha:after {
    content: "";
    display: table;
  }
  #ui .form form .row:after,
  #ui .form form .row.captcha:after {
    clear: both;
  }
  #ui .form form .input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    margin: 0;
    min-height: 1px;
    padding-left: 18px;
    padding-right: 18px;
    position: relative;
    margin-bottom: 15px;
    display: inline-block;
    width: 50%;
  }
  #ui .form form .input.checkbox {
    width: 100%;
  }
  #ui .form form .input input,
  #ui .form form .input select {
    width: 99%;
  }
  #ui .form form .input:last-child input,
  #ui .form form .input:last-child select {
    float: right;
  }
  #ui .form form .row.captcha {
    width: 100%;
  }
  #ui .form form .long-text,
  #ui .form form .textarea {
    width: 100%;
    float: none;
  }
  #ui .form form .long-text input,
  #ui .form form .textarea input,
  #ui .form form .long-text textarea,
  #ui .form form .textarea textarea {
    width: 100%;
  }
  #ui .form form .checkbox strong,
  #ui .form form .checkbox .hint {
    line-height: 14px;
    margin-left: 2px;
    margin-top: 9px;
    padding-top: 3px;
  }
  #ui .form form .checkbox label,
  #ui .form form .checkbox label input {
    display: inline;
  }
  #ui .form form .gender label {
    display: inline-block;
    margin-right: 20px;
  }
  #ui .form form label {
    margin-bottom: 10px;
  }
  #ui .form form .captcha,
  #ui .form form .submit {
    margin-bottom: 15px;
  }
  #ui .form form .fsInfo {
    padding-left: 23px;
  }
  #ui .form form .submit {
    float: right;
  }
  #ui .form form .submit .button {
    font-size: 13px;
    padding-bottom: 7px;
    padding-top: 7px;
  }
  #ui .form form p.hint {
    line-height: 3;
  }
  #ui .form form input:not([type="button"]):not([type="submit"]),
  #ui .form form select,
  #ui .form form textarea {
    font-size: 13px;
    line-height: 1.333;
    color: #333333;
    -webkit-box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
    -webkit-appearance: none;
    border: 0;
    border-radius: 12px;
    padding: 6px 10px 4px;
    width: 100%;
  }
  #ui .form form input:not([type="button"]):not([type="submit"])::-webkit-search-cancel-button,
  #ui .form form select::-webkit-search-cancel-button,
  #ui .form form textarea::-webkit-search-cancel-button {
    display: none;
  }
  #ui .form form .row.captcha {
    border-radius: 5px;
    background: #3088B7;
    float: left;
    padding: 20px;
  }
  #ui .form form .button {
    background: -webkit-gradient(linear, left top, left bottom, from(#c50223), to(#99011b));
    background: -webkit-linear-gradient(top, #c50223, #99011b);
    background: -moz-linear-gradient(top, #c50223, #99011b);
    background: -ms-linear-gradient(top, #c50223, #99011b);
    background: -o-linear-gradient(top, #c50223, #99011b);
    background-color: #c50223;
    -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    cursor: pointer;
    display: inline-block;
    padding: 7px 15px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    min-width: 100px;
    padding-right: 0;
    position: relative;
    text-transform: uppercase;
  }
  #ui .form form .button:after {
    color: #fff;
    content: "\BB";
    font-size: 16px;
    font-weight: bold;
  }
  #ui .form form .button a,
  #ui .form form .button span {
    display: inline-block;
    float: left;
  }
  #ui .form form .button:after {
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    padding-left: 15px;
    display: inline-block;
    position: relative;
    left: 9%;
  }
  #ui .form form .button input {
    display: inline-block;
    float: left;
    margin-top: 4px;
    text-transform: inherit;
  }
  #ui .form form .button:after {
    padding-right: 35px;
    top: -3px;
  }
  #ui .form form .styledCheckbox {
    background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: -140px -25px;
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-left: -23px;
    margin-right: 3px;
    padding-bottom: 2px;
    padding-right: 17px;
    position: relative;
    top: 8px;
  }
  #ui .form form .styledCheckbox.styledCheckboxChecked {
    background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: -140px -50px;
    width: 25px;
    height: 25px;
    display: inline-block;
  }
  #ui .form form .styledRadio {
    background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: 0px -135px;
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-right: 6px;
    padding-right: 18px;
    position: relative;
    top: 8px;
  }
  #ui .form form .styledRadio.styledRadioChecked {
    background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: -165px -25px;
    width: 25px;
    height: 25px;
    display: inline-block;
  }
  #ui .form form .hover .styledCheckbox {
    background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: -140px 0px;
    width: 25px;
    height: 25px;
    display: inline-block;
    top: 8px;
  }
  #ui .form form .hover .styledCheckbox.styledCheckboxChecked {
    background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: -114px -105px;
    width: 25px;
    height: 25px;
    display: inline-block;
  }
  #ui .form form .hover .styledRadio {
    background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: -50px -135px;
    width: 25px;
    height: 25px;
    display: inline-block;
  }
  #ui .form form .hover .styledRadio.styledRadioChecked {
    background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: -100px -135px;
    width: 25px;
    height: 25px;
    display: inline-block;
  }
  #ui .form form .error .styledCheckbox {
    background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: -165px 0px;
    width: 25px;
    height: 25px;
    display: inline-block;
  }
  #ui .form form .error .styledRadio {
    background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: -165px 0px;
    width: 25px;
    height: 25px;
    display: inline-block;
  }
  #ui .form form .error input:not([type="button"]):not([type="submit"]).error,
  #ui .form form .error textarea {
    border: 1px solid #c50223;
  }
  #ui .form form .row.captcha .form_captcha_img,
  #ui .form form .row.captcha .form_captcha_refresh,
  #ui .form form .row.captcha .form_captcha_refresh_input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    float: left;
    margin: 0;
    min-height: 1px;
    padding-left: 18px;
    padding-right: 18px;
    position: relative;
  }
  #ui .form form .row.captcha .form_captcha_img {
    width: 33.33333333%;
    border-radius: 5px;
    background: #fff;
    float: left;
    padding: 10px;
  }
  #ui .form form .row.captcha .form_captcha_img img {
    margin: 0 auto;
  }
  #ui .form form .row.captcha .form_captcha_refresh {
    float: right;
    padding: 8px 0 9px 0;
    position: relative;
    cursor: pointer;
    width: 53%;
  }
  #ui .form form .row.captcha .form_captcha_refresh:before {
    content: "";
    position: absolute;
  }
  #ui .form form .row.captcha .form_captcha_refresh:before {
    background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: 0px -55px;
    width: 50px;
    height: 50px;
    display: inline-block;
    top: 0;
  }
  #ui .form form .row.captcha .form_captcha_refresh_input {
    background: -webkit-gradient(linear, left top, left bottom, from(#c50223), to(#99011b));
    background: -webkit-linear-gradient(top, #c50223, #99011b);
    background: -moz-linear-gradient(top, #c50223, #99011b);
    background: -ms-linear-gradient(top, #c50223, #99011b);
    background: -o-linear-gradient(top, #c50223, #99011b);
    background-color: #c50223;
    -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    cursor: pointer;
    display: inline-block;
    padding: 7px 15px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    min-width: 100px;
    padding-right: 0;
    position: relative;
    text-transform: uppercase;
    font-size: 13px;
    padding-bottom: 7px;
    padding-top: 7px;
    float: right;
  }
  #ui .form form .row.captcha .form_captcha_refresh_input:after {
    color: #fff;
    content: "\BB";
    font-size: 16px;
    font-weight: bold;
  }
  #ui .form form .row.captcha .form_captcha_refresh_input a,
  #ui .form form .row.captcha .form_captcha_refresh_input span {
    display: inline-block;
    float: left;
  }
  #ui .form form .row.captcha .form_captcha_refresh_input:after {
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    padding-left: 15px;
    display: inline-block;
    position: relative;
    left: 9%;
  }
  #ui .form form .row.captcha .form_captcha_refresh_input input {
    display: inline-block;
    float: left;
    margin-top: 4px;
    text-transform: inherit;
  }
  #ui .form form .row.captcha .form_captcha_refresh_input:after {
    padding-right: 35px;
    top: -3px;
  }
}
@media screen and (min-width: 1025px) {
  #ui .form form .row.captcha {
    width: 75%;
  }
}
/**
 * video.less
 * [ Video Component ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @mobileFirst
 *
 * @name Video Component
 * @description It shows a local video component
 *
 * @markup
 * <div class="section video">
 *     <h2>Video</h2>
 *     <p>Demo Video (default config)</p>
 *     <div class="cookiespecific">
 *         <div class="contentvideoplayer" data-videoid="562834" data-url="//videomanager.movingimage24.com/videojs_562834?jsdiv=mijsvdiv562834&amp;ctab3=E3000F&amp;ctab2=E3000F&amp;loadtime=0&amp;cwm=0&amp;player=42&amp;ctcb7=ffffff&amp;ctcb6=0&amp;ctcb5=0&amp;scwm=2&amp;ctcb4=788791&amp;ctcb3=E3000F&amp;ctcb2=E3000F&amp;ctcb1=788791&amp;wmode=opaque&amp;chapter=1&amp;height=100%&amp;fg=2a3033&amp;ctlstyle=0&amp;bg=d8dee4&amp;adbtn5=0&amp;adbtn6=0&amp;fupdate=1&amp;qs=1&amp;cbarPlayPauseFlag=1&amp;cbarvolumeBarFlag=1&amp;cbarTimeDurationFlag=0&amp;ctp=0&amp;cbarTrackFlag=1&amp;width=100%&amp;bg2=0&amp;qd=3&amp;adbtn=0&amp;start=0&amp;cbarTimeTotalFlag=1&amp;volume=100&amp;cbarFullScreenFlag=1&amp;ctab1=788791&amp;resp=1">
 *             <div id="mijsvdiv562834" class="screen">
 *                 <div id="vid2_videoplaybackframe_562834" class="exflashclass562834">
 *                     <link rel="stylesheet" type="text/css" href="https://dl.edge-cdn.net/css/mi24responsive.css">
 *                     <div id="responsivediv_562834">
 *                         <div class="v2_videoplayback_player" itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject">
 *                             <div class="v2_playericons">
 *                             </div>
 *                             <meta itemprop="thumbnailUrl" content="https://dl.edge-cdn.net/videothumbs/f/38/94/videodb_1878_42588_3332172_16x9/videodb_1878_42588_3332172_16x9_05_LQ.jpg">
 *                             <meta itemprop="embedURL" content="">
 *                             <meta itemprop="width" content="100">
 *                             <meta itemprop="height" content="100">
 *                             <div style="">
 *                                 <div id="bgblankexfashcontent562834X100X100X1432209763X179" class="flashdiv" ><img border="0" src="https://dl.edge-cdn.net/images/blank.gif" width="1" height="1"></div>
 *                                 <div id="bgexfashcontent562834X100X100X1432209763X179">
 *                                     <center><img border="0" src="https://dl.edge-cdn.net/videothumbs/f/38/94/videodb_1878_42588_3332172_16x9/videodb_1878_42588_3332172_16x9_05_LQ.jpg" width="99" height="56" ></center>
 *                                 </div>
 *                                 <div id="exfashcontent562834X100X100X1432209763X179" >
 *                                     <embed type="application/x-shockwave-flash" src="https://dl.edge-cdn.net/flashplayer/playerv3.swf" width="100%" height="100%" style="undefined" id="mainjvideo_562834" name="mainjvideo_562834" bgcolor="#000000" quality="high" wmode="opaque" allowfullscreen="true" allowscriptaccess="always" scale="noscale" salign="LT" flashvars="allowScriptAccess=always&amp;autoStart=false&amp;config_playerObjectID=mainjvideo_562834&amp;config_url=https%3A%2F%2Fdl.edge-cdn.net%2Fvideoxmls%2Fx%2Fb%2F9d%2F1e%2F%2F0%2FskinXML%2F100.75.100.0.0%2F0%2F9b3fbdaf51d231583a3b0157faaf270cdVJbbsMgELwLB4jw2yFfrdRcI8I2cVENuLCOWlW5excMiaXW_mJnxrPDLpwV7MexlhH3IfXAgZMTZ7XHakakGi_akJNkZX4KyJea_kHAeSQrs6at6upIkSkZmbgeCR5zRoQmq7o3k7HO98hCkwoh6LX%2FXss0k3bNsdQRCKPxFtBKT1viGKPKPesKn_OGKEbrP4Ha6LBNXwPgu-F5Hsh-V5I_gh5Dt-GqPaI-g-BY-3GiA7tIEQwLTyab6-FumvS5bygBaa6h5X3RoM107qOMr6DDvTFgZnDRr0NXbGbmRYlPOrXX%2FXG4WfC5-S0Bu-8xmEdRuVWzqQMD1-xOs44BZSje9ECb2kEjM-G2U0Qr7V1aVGCLhJDsImAD1BqmeNbYfFcpBGJ18cSz93m1wvw-sCkAT3-3pRK2bjJBj7TdZsWdu0caxOh8dQoOyG3Y3imo_CHpS5STX%2FX1KhUVeHnqjcLy_.xml,https%3A%2F%2Fdl.edge-cdn.net%2Fvideoxmls%2Fx%2F4%2Fc7%2F0e%2F562834%2FvideoSrcXML%2F100.75.100.34.1397025420%2F2_333889eac3ef433642474310f4e7c187%2F404465de23b997546113f65e347ace69TVJNc6QgEP0v3GMJ-IF4y3nPe7UYaJSKwgQYJ6nU_PcAjrN70Gpev4bXr1vwnv8E3nIkd-EDGgWnGcAJEer9FqOzf00wlxXQWHharKHEmHKkTLiu4nsBMy8RjYb3bcoMqfZDbML8cXNh1h1Hu1FT2xX%2FXFGm-n2CquW0JqogXSaMt1XuO0wIaydEhucTzzMejbJOGFSTx40ePCLCzHHb3ILb6K6eGFVqBawH7BW0m1ofBSl7uwIk9IS4SiLBa8gmNlmuQ1J8rrc6iXaNiP1f0B3AhhzFBZ3l4u4RvAnnC78VPlAX%2FXn5zj-rtRcckwrkvx691_Nh2Z5JNe9yOXfWIncaf52HC0utkVnZiy4fA_MWxxNV0L9lnm4equclOlLAnxp9VK4lbVIDsYul7gC8aaaVxLzEDpgZaCNMdJy9JHk63Lgq1LI4C7dDcbz3YTL1hdKuoyT3X%2FXCbsGIGX21uN3Y2WzqQ5phBEfu1rdaVFeCIHqtw9rg59VqpVYQlx316IfpJyDWPLU0tOYXH568v3-PxCw%252C%252C.xml%3FPHPSESSID%3Dovvsqkb4dhfa0b1tgi954sgr87&amp;config_javascriptEvents=true&amp;playerID=1">
 *                                 </div>
 *                             </div>
 *                         </div>
 *                     </div>
 *                 </div>
 *             </div>
 *             <div class="script">
 *                 <script type="text/javascript">
 *                 function registervideo_562834() {
 *                     if (false === true && typeof(mi24player_562834) != 'undefined' && mi24player_562834.flashMovie && mi24player_562834.flashMovie.playFlashMovie) {
 *                         mi24player_562834.registerStatusFunction("ended", "mi24player_562834.play()");
 *                         mi24player_562834.registerStatusFunction("play", "console.log('playing');");
 *                     } else {
 *                         if (false === true) {
 *                             window.setTimeout(registervideo_562834, 100);
 *                         }
 *                     }
 *                 };
 *                 var mi24IC562834 = 0;
 *                 mi24ID562834 = window.setInterval(function() {
 *                     if (typeof ui !== 'undefined' && typeof ui.lib !== 'undefined' && typeof ui.lib.helper !== 'undefined') {
 *                         window.clearInterval(mi24ID562834);
 *                         if (ui.lib.helper.isCookiesAccepted()) {
 *                             $.getScript("//videomanager.movingimage24.com/videojs_562834?jsdiv=mijsvdiv562834&ctab3=E3000F&ctab2=E3000F&loadtime=0&cwm=0&player=42&ctcb7=ffffff&ctcb6=0&ctcb5=0&scwm=2&ctcb4=788791&ctcb3=E3000F&ctcb2=E3000F&ctcb1=788791&wmode=opaque&chapter=1&height=100%&fg=2a3033&ctlstyle=0&bg=d8dee4&adbtn5=0&adbtn6=0&fupdate=1&qs=1&cbarPlayPauseFlag=1&cbarvolumeBarFlag=1&cbarTimeDurationFlag=0&ctp=0&cbarTrackFlag=1&width=100%&bg2=0&qd=3&adbtn=0&start=0&cbarTimeTotalFlag=1&volume=100&cbarFullScreenFlag=1&ctab1=788791&resp=1", function(data, textStatus, jqxhr) {
 *                                 window.setTimeout(registervideo_562834, 1000);
 *                             });
 *                         }
 *                     }
 *                     if (mi24IC562834 > 15) {
 *                         window.clearInterval(mi24ID562834);
 *                     }
 *                     mi24ID562834++;
 *                 }, 500);
 *                 </script>
 *             </div>
 *         </div>
 *     </div>
 *     <div class="cookieHint" style="display:none">
 *         <img class="cookieImage" src="/content/dam/test/henkel-lib/whitelabel/content/cookie.png">
 *         <span class="cookieHintText">
 *                 <a href="/content/test/henkel-lib/whitelabel/master/www/en/meta/cookies">Diese Komponente ist nicht verfügbar!</a>
 *     </span>
 *     </div>
 * </div>
 *
 *
*/
#ui .video {
  z-index: 0;
  margin-bottom: 20px;
}
#ui .video h2 {
  padding-bottom: 12px;
}
#ui .video p {
  font-size: 13px;
  line-height: 1.333;
  color: #333333;
  margin-bottom: 16px;
}
@media screen and (min-width: 641px) {
  #ui .video h2 {
    font-size: 18px;
  }
  #ui .video p {
    font-size: 12px;
  }
}
#ui .featherlight .video {
  margin-bottom: 0px;
}
/**
 * youtube.less
 * [ YouTube video ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
*/
#ui .youtube {
  z-index: 0;
  margin-bottom: 20px;
  zoom: 1;
}
#ui .youtube:before,
#ui .youtube:after {
  content: "";
  display: table;
}
#ui .youtube:after {
  clear: both;
}
.landingpage--kintsuglue #ui .youtube {
  margin-bottom: 50px;
  max-width: 100%;
}
#ui .youtube .preview {
  float: left;
  overflow: hidden;
  position: relative;
}
.landingpage--kintsuglue #ui .youtube .preview {
  float: none;
}
#ui .youtube .preview img {
  width: 100%;
}
#ui .youtube .preview.widescreen img {
  margin-top: -42px;
}
#ui .youtube .preview .play {
  background: url("../../../designs/whitelabel/components/youtube/img/heli.youtube.play.png") no-repeat 0 0 transparent;
  height: 70px;
  left: 50%;
  margin: -35px 0 0 -35px;
  position: absolute;
  top: 50%;
  width: 70px;
}
.landingpage--kintsuglue #ui .youtube .preview .play {
  background: url("../../../designs/loctite-responsive/www/common/img/kintsuglue.youtube-play.png") no-repeat 0 0 transparent;
  background-size: cover;
  height: 85px;
  margin: -42px 0 0 -42px;
  width: 85px;
}
#ui .youtube .preview:hover,
#ui .youtube .preview.hover {
  cursor: pointer;
}
#ui .youtube .preview:hover .play,
#ui .youtube .preview.hover .play {
  background-position: 0 -69px;
}
.landingpage--kintsuglue #ui .youtube .preview:hover .play,
.landingpage--kintsuglue #ui .youtube .preview.hover .play {
  background: url("../../../designs/loctite-responsive/www/common/img/kintsuglue.youtube-play-hover.png") no-repeat 0 0 transparent;
  background-size: cover;
}
.landingpage--kintsuglue #ui .youtube .fluid-width-video-wrapper iframe.preview {
  position: absolute;
}
#ui .youtube iframe {
  float: left;
  margin-right: 16px;
}
#ui .youtube .metadata {
  float: left;
  width: 100%;
}
#ui .youtube .metadata .date,
#ui .youtube .metadata p {
  font-size: 13px;
  line-height: 1.333;
  color: #333333;
}
#ui .youtube .metadata .date,
#ui .youtube .metadata p,
#ui .youtube .metadata h3 {
  padding-bottom: 16px;
}
@media screen and (min-width: 641px) {
  #ui .youtube .metadata .date,
  #ui .youtube .metadata p {
    font-size: 12px;
  }
  #ui .youtube .metadata h3 {
    font-size: 18px;
  }
  #ui .youtube .metadata .date,
  #ui .youtube .metadata p,
  #ui .youtube .metadata h3 {
    padding-bottom: 16px;
  }
}
#ui .featherlight {
  bottom: 0;
  cursor: pointer;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  white-space: nowrap;
  z-index: 2147483647;
  /* z-index needs to be >= elements on the site. */
}
#ui .featherlight:last-of-type {
  background: rgba(0, 0, 0, 0.5);
}
#ui .featherlight:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
#ui .featherlight .featherlight-content {
  background: #e2e2e2;
  cursor: auto;
  display: inline-block;
  margin-left: 5%;
  margin-right: 5%;
  max-height: 95%;
  max-width: 90%;
  overflow: auto;
  padding: 40px 20px 0;
  position: relative;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
}
@media screen and (min-width: 1025px) {
  #ui .featherlight .featherlight-content.fittosize {
    height: auto !important;
  }
  #ui .featherlight .featherlight-content.fittosize .content-only.video {
    height: 100%;
    margin-bottom: 0;
  }
  #ui .featherlight .featherlight-content.fittosize .content-only.video .cookiespecific .contentvideoplayer {
    height: 100%;
  }
  #ui .featherlight .featherlight-content.fittosize .content-only.video .cookiespecific .contentvideoplayer .screen {
    height: inherit;
  }
  #ui .featherlight .featherlight-content.fittosize .content-only.video .cookiespecific .contentvideoplayer .screen > div {
    height: inherit;
  }
  #ui .featherlight .featherlight-content.fittosize .content-only.video .cookiespecific .contentvideoplayer .screen > div > div {
    height: inherit !important;
  }
}
#ui .featherlight .featherlight-inner {
  display: block;
  max-height: 90vh;
  overflow-y: auto;
}
#ui .featherlight .featherlight-close-icon {
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -60px -105px;
  width: 27px;
  height: 27px;
  display: inline-block;
  border: none;
  color: #000;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 25px;
  padding: 0;
  position: absolute;
  right: 3px;
  text-align: center;
  top: 3px;
  z-index: 9999;
}
#ui .featherlight .featherlight-close-icon:hover {
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -60px -105px;
  width: 27px;
  height: 27px;
  display: inline-block;
}
#ui .featherlight .featherlight-close-icon::-moz-focus-inner {
  border: 0;
  padding: 0;
}
#ui .featherlight .featherlight-image {
  width: 100%;
}
#ui .featherlight iframe {
  border: none;
}
#ui .featherlight-iframe .featherlight-content {
  border-bottom: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
/**
 * carousel2-skin.less
 * [ A carousel is much like multiple stages in one place. ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @name Carousel 2014
 * @description A carousel is much like multiple stages in one place. The carousel flips through its contents and displays the containing components one after the other. \n The carousel itself has navigational components to switch between the separate slides: previous/next buttons (links, can be styled as icons and text) and and pagination (option to display as bullets (icons) or button triggers (with text). The style and behavior of a stage can be adapted for various contexts.
 *
 * @markup
 * <div class="parsys carousel2 section">
 *     <div class="flex-container">
 *         <div class="flexslider"
 *         data-fs-animation-speed="700"
 *         data-fs-animation-loop="true"
 *         data-fs-slideshow="false"
 *         data-fs-slideshow-speed="5000"
 *         data-fs-control-nav="true"
 *         data-fs-direction-nav="true"
 *         data-fs-text-prev=""
 *         data-fs-text-next=""
 *         data-fs-control-nav-text-mode="BULLETS">
 *             <ul class="slides">
 *                 <li class="parsys slide">
 *                     <div class="flex-stage section">
 *                         <figure class="parbase image">
 *                             <img class="cq-dd-image adaptive" src="/assets/img/carousel2-2.png" data-width="" data-max-width="0" data-height="" alt="Stage 1 Image Alt Text">
 *                             <noscript>
 *                                 &lt;img src="/assets/img/carousel2-2.png" alt="Stage 1 Image Alt Text"/&gt;
 *                             </noscript>
 *                         </figure>
 *                         <div class="flex-caption ">
 *                             <div class="inner">
 *                                 <h1 class="flex-caption__headline">Power Flex Gel, bonds strong and flexible</h1>
 *                                 <h2 class="flex-caption__subheadline">Loctite's latest breakthrough innovation is the perfect product for strong and precise bonds even on flexible materials thanks to its rubber infused formula!</h2>
 *                                 <div class="flex-caption__body"></div>
 *                                 <div class="flex-caption__linkbutton">
 *                                     <a href="#" title="Homepage en">Learn more</a>
 *                                 </div>
 *                             </div>
 *                         </div>
 *                     </div>
 *                 </li>
 *             <li class="parsys slide">
 *                     <div class="flex-stage section">
 *                         <figure class="parbase image">
 *                             <img class="cq-dd-image adaptive" src="/assets/img/carousel2.png" data-width="" data-max-width="0" data-height="" alt="Stage 1 Image Alt Text">
 *                             <noscript>
 *                                 &lt;img src="/assets/img/carousel2.png" alt="Stage 1 Image Alt Text"/&gt;
 *                             </noscript>
 *                         </figure>
 *                         <div class="flex-caption ">
 *                             <div class="inner">
 *                                 <h1 class="flex-caption__headline">Title of Stage 1</h1>
 *                                 <h2 class="flex-caption__subheadline">Stage 1 Subtitle</h2>
 *                                 <div class="flex-caption__body">
 *                                     <p>Copy text. Lorem Impsum. This is <a href="/content/test/henkel-lib/whitelabel/master/www/en.html">a link</a> in the text. This word is <i>italic </i>(i). This word is <b>bold </b>(b). This text is <u>underlined</u>.</p>
 *                                     <p>This is a typographic dummy text. On it you can see if all the letters are there and what they look like. The quick brown fox jumps over the lazy old dog.
 *                                         <br>
 *                                     </p>
 *                                 </div>
 *                                 <div class="flex-caption__linkbutton">
 *                                     <a href="#" title="Homepage en">Learn more</a>
 *                                 </div>
 *                             </div>
 *                         </div>
 *                     </div>
 *                 </li>
 *             </ul>
 *         </div>
 *     </div>
 * </div>
 *
*/
#ui .carousel2 {
  margin-bottom: 20px;
}
#ui .carousel2 .flex-container {
  height: 100%;
  position: relative;
}
#ui .carousel2 .flex-viewport {
  -webkit-transition: all 1s ease 0s;
  -moz-transition: all 1s ease 0s;
  -ms-transition: all 1s ease 0s;
  -o-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
  max-height: 2000px;
}
.loading #ui .carousel2 .flex-viewport {
  max-height: 150px;
}
#ui .carousel2 .flex-direction-nav {
  display: none;
}
#ui .carousel2 .flex-control-nav {
  z-index: 5;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #c0e2fb;
  border-radius: 30px;
  top: 120px;
  left: 50%;
  min-width: 100px;
  position: absolute;
  text-align: center;
  padding: 4px 0;
  width: 40%;
  max-width: 60%;
}
#ui .carousel2 .flex-control-nav li {
  display: inline-block;
  margin: 0 10px;
  zoom: 1;
}
#ui .carousel2 .flex-control-paging li a {
  background: #fff;
  border-radius: 15px;
  cursor: pointer;
  display: block;
  height: 15px;
  line-height: 1.333;
  text-indent: -9999px;
  width: 15px;
}
#ui .carousel2 .flex-control-paging li a.flex-active {
  background: #006eac;
}
#ui .carousel2 .slide {
  zoom: 1;
  position: relative;
}
#ui .carousel2 .slide:before,
#ui .carousel2 .slide:after {
  content: "";
  display: table;
}
#ui .carousel2 .slide:after {
  clear: both;
}
#ui .carousel2 .slides {
  zoom: 1;
  margin: 0;
  padding: 0;
}
#ui .carousel2 .slides:before,
#ui .carousel2 .slides:after {
  content: "";
  display: table;
}
#ui .carousel2 .slides:after {
  clear: both;
}
#ui .carousel2 .slides .flex-active-slide .flex-caption {
  display: block;
}
#ui .carousel2 .image {
  width: 100%;
  height: 150px;
  margin-bottom: 20px;
}
#ui .carousel2 .image img {
  height: 100%;
  width: auto;
  margin: 0 auto;
}
#ui .carousel2 .flex-caption {
  position: relative;
}
#ui .carousel2 .flex-caption__subheadline,
#ui .carousel2 .flex-caption__headline,
#ui .carousel2 .flex-caption__body {
  padding-bottom: 20px;
}
#ui .carousel2 .flex-caption__headline {
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  text-transform: none;
  color: #fff;
}
#ui .carousel2 .flex-caption__subheadline {
  color: #c0e2fb;
  font-size: 18px;
  font-weight: normal;
  line-height: 1;
  line-height: 1.333;
}
#ui .carousel2 .flex-caption__body {
  font-size: 13px;
  line-height: 1.333;
  color: #fff;
}
#ui .carousel2 .flex-caption__linkbutton {
  background: -webkit-gradient(linear, left top, left bottom, from(#c50223), to(#99011b));
  background: -webkit-linear-gradient(top, #c50223, #99011b);
  background: -moz-linear-gradient(top, #c50223, #99011b);
  background: -ms-linear-gradient(top, #c50223, #99011b);
  background: -o-linear-gradient(top, #c50223, #99011b);
  background-color: #c50223;
  -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  cursor: pointer;
  display: inline-block;
  padding: 7px 15px;
  text-transform: uppercase;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  float: right;
  font-size: medium;
}
#ui .carousel2 .flex-caption__linkbutton span,
#ui .carousel2 .flex-caption__linkbutton a {
  color: #fff;
  padding-right: 35px;
  position: relative;
  text-transform: uppercase;
  word-wrap: break-word;
  white-space: nowrap;
  font-size: inherit;
}
#ui .carousel2 .flex-caption__linkbutton span:before,
#ui .carousel2 .flex-caption__linkbutton a:before {
  content: "";
  position: absolute;
}
#ui .carousel2 .flex-caption__linkbutton span:before,
#ui .carousel2 .flex-caption__linkbutton a:before {
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -110px -90px;
  width: 21px;
  height: 14px;
  display: inline-block;
  right: 2px;
  top: 2px;
}
#ui .carousel2 .flex-caption__linkbutton span:after,
#ui .carousel2 .flex-caption__linkbutton a:after {
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  content: "";
  padding-left: 15px;
}
#ui .carousel2 .flex-caption__linkbutton a {
  line-height: normal;
}
#ui .carousel2 .flex-caption__linkbutton a:hover,
#ui .carousel2 .flex-caption__linkbutton a:active,
#ui .carousel2 .flex-caption__linkbutton a:focus {
  text-decoration: none;
}
#ui .carousel2 .flex-caption__linkbutton:hover,
#ui .carousel2 .flex-caption__linkbutton:active,
#ui .carousel2 .flex-caption__linkbutton:focus {
  text-decoration: none;
}
#ui .carousel2 .flex-caption__linkbutton a {
  line-height: normal;
  font-size: inherit;
}
@media screen and (min-width: 641px) {
  .loading #ui .carousel2 .flex-viewport {
    max-height: 330px;
  }
  #ui .carousel2 .flex-control-nav {
    width: auto;
    padding: 4px;
    top: auto;
    bottom: 10px;
  }
  #ui .carousel2 .flex-control-nav li {
    margin: 0 5px;
  }
  #ui .carousel2 .image {
    height: 330px;
    margin-bottom: 0;
    overflow: hidden;
  }
  #ui .carousel2 .image img {
    margin: 0;
    max-width: initial;
    width: auto;
  }
  #ui .carousel2 .flex-control-paging li a {
    border-radius: 13px;
    line-height: 1;
    width: 13px;
    height: 13px;
  }
  #ui .carousel2 .flex-caption {
    right: 5px;
    max-width: 40%;
    position: absolute;
    top: 20px;
  }
  #ui .carousel2 .flex-caption__linkbutton {
    float: left;
  }
}
@media screen and (min-width: 1025px) {
  #ui .carousel2 .flex-caption__headline {
    font-size: 36px;
  }
  #ui .carousel2 .flex-caption__subheadline {
    font-size: 20px;
  }
  #ui .carousel2 .flex-caption__body {
    font-size: 13px;
  }
  #ui .carousel2 .flex-caption__linkbutton {
    font-size: 13px;
    padding-bottom: 7px;
    padding-top: 7px;
  }
}
/*// Control Nav Manual
    .flex-control-nav-manual {
        bottom: 10px;
        margin: 0;
        padding: 0;
        position: absolute;
        text-align: center;
        width: 100%;
        z-index: 2;
        li {
            .rgba-transparency(#000000, .25);

            *display: inline;
            color: #ffffff;
            cursor: pointer;
            display: inline-block;
            margin: 0 6px;
            padding: 3px 5px;
            zoom: 1;
            span {
                display: block;
                padding: 5px;
            }
            &:hover {
                .rgba-transparency(#000000, .5);
            }
            &.flex-active {
                .rgba-transparency(#000000, .5);

                cursor: default;
            }
        }
    }*/
#ui .carousel3 {
  margin-bottom: 20px;
}
#ui .carousel3 .stage {
  margin: 0;
}
#ui .carousel3 .image {
  height: 150px;
  margin-bottom: 20px;
}
@media screen and (min-width: 641px) {
  #ui .carousel3 .image {
    height: 330px;
    margin-bottom: 0;
  }
}
#ui .carousel {
  margin-bottom: 20px;
}
#ui .carousel__dots {
  z-index: 5;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #c0e2fb;
  border-radius: 30px;
  bottom: auto;
  left: 50%;
  max-width: 60%;
  min-width: 100px;
  padding: 4px 0;
  top: 120px;
  width: 40%;
  z-index: 9999;
}
@media screen and (min-width: 641px) {
  #ui .carousel__dots {
    bottom: 10px;
    padding: 4px;
    top: auto;
    width: auto;
  }
}
#ui .carousel__dots li {
  margin: 0 10px;
}
@media screen and (min-width: 641px) {
  #ui .carousel__dots li {
    margin: 0 5px;
  }
}
#ui .carousel__dot {
  background-color: #fff;
  height: 15px;
  outline: none;
  padding: 5px;
  width: 15px;
}
@media screen and (min-width: 641px) {
  #ui .carousel__dot {
    width: 13px;
    height: 13px;
  }
}
#ui .carousel__dot:focus {
  background-color: #006eac;
}
#ui .slick-active .carousel__dot {
  background-color: #006eac;
}
.no-touch #ui .carousel__dot:hover {
  background-color: #006eac;
}
/*
 * accordion-skin.less
 * [ Contains all LESS code for the accordion module ]
 *
 * @mobileFirst
 *
 * @project:  Henkel AIC
 * @date:     05.2015
 * @author:   Daniela Valero
 * @licensor: SAPIENTNITRO
 *
 * @name Accordion
 * @description The accordion component has a heading and content. Within the content, only: textImage and Download components can be added.
 *
 * @markup
 * <div class="parsys accordion section ui-accordion">
    <h4 class="accordion__headline">Accordion Heading</h4>
    <div class="accordion__content">
        <div class="parsys">
            <div class="parbase textimage section">
                <figure class="parbase cl image">
                    <img class="cq-dd-image adaptive" src="/assets/img/image-dummy/196x196.png" data-width="" data-max-width="0" data-height="" alt=""><span class="magnifier"></span>
                    <noscript>
                        &lt;img src="/assets/img/image-dummy/196x196.png" alt=""/&gt;
                    </noscript>
                </figure>
                <div class="textimage-text">
                    <p>Accordion Text content. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                    <p><a href="#" class="icon-link">More Information</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
*/
#ui .accordion {
  background: #e2e2e2;
  border-radius: 5px;
  color: #333333;
  border-radius: 0;
  margin-bottom: 20px;
}
#ui .accordion__header {
  background: none;
  cursor: pointer;
  padding: 15px 20px 11px 45px;
  position: relative;
}
#ui .accordion__header.ui-state-active .ui-icon:before {
  content: "";
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -110px -60px;
  width: 30px;
  height: 30px;
  display: inline-block;
}
#ui .accordion__header .ui-icon {
  background: transparent none;
  position: absolute;
}
#ui .accordion__header .ui-icon:before {
  content: "";
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -110px 0px;
  width: 30px;
  height: 30px;
  display: inline-block;
}
#ui .accordion__header .ui-icon:before {
  display: inline-block;
  position: absolute;
  top: 1px;
  left: -36px;
}
#ui .accordion__header .image {
  float: right;
}
#ui .accordion__header:focus {
  outline: none;
}
#ui .accordion__header a:link,
#ui .accordion__header a:focus {
  text-decoration: none;
}
#ui .accordion__headline {
  color: #fff;
  font-size: 30px;
  font-weight: normal;
  line-height: 1;
  text-transform: uppercase;
  color: #0060a4;
  outline: none;
}
#ui .accordion__meta {
  display: none;
}
#ui .accordion__content {
  font-size: 13px;
  line-height: 1.333;
  color: #333333;
  padding: 20px;
}
@media screen and (min-width: 641px) {
  #ui .accordion__header {
    padding: 20px 20px 20px 65px;
  }
  #ui .accordion__headline {
    font-size: 36px;
  }
  #ui .accordion__headline .ui-icon:before {
    left: -36px;
    top: 1px;
  }
  #ui .accordion__content {
    font-size: 13px;
    padding: 20px;
  }
}
@media screen and (min-width: 1025px) {
  #ui .accordion__header {
    padding: 20px 20px 20px 65px;
  }
  #ui .accordion__headline .ui-icon:before {
    left: -36px;
    top: 2px;
  }
  #ui .accordion__content {
    padding: 20px;
  }
}
/**
 * nav-carousel-skin.less
 * [ The Navigation Carousel component contains the links to all subpages of the configured startlevel (relative to homepage) as well as current page. The subpages are the child elements in the content hierarchy. ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @name Navigation Carousel
 * @description The Navigation Carousel component contains the links to all subpages of the configured startlevel (relative to homepage) as well as current page. The subpages are the child elements in the content hierarchy.
 *
 * @markup
 * <div class="dss-nav-carousel-wrapper">
 * <nav class="nav-carousel section" role="navigation">
 *     <div class="nav-carousel-prev"></div>
 *     <div class="nav-carousel-bg">
 *             <ul class="level1">
 *               <li>
 *                     <a href="#" title="Super Glue Liquid">
 *                         <div class="navigation-image"><img src="/assets/img/image-dummy/150x225.png" alt="Super Glue Liquid"></div>
 *                         <div class="navigation-image-shadow"><img src="/assets/img/image-dummy/150x225.png" alt="Super Glue Liquid"></div>
 *                         <span class="navigationtitle">Super Glue Liquid</span>
 *                         <span class="navigationsubtitle">Loctite's classic fast acting Super Glue Liquid is ideal for strong and durable repairs around the home. Now even water resistant!</span>
 *                     </a>
 *                 </li>
 *                 <li>
 *                     <a href="#" title="Super Glue Liquid">
 *                         <div class="navigation-image"><img src="/assets/img/image-dummy/150x225.png" alt="Super Glue Liquid"></div>
 *                         <div class="navigation-image-shadow"><img src="/assets/img/image-dummy/150x225.png" alt="Super Glue Liquid"></div>
 *                         <span class="navigationtitle">Super Glue Liquid</span>
 *                         <span class="navigationsubtitle">Loctite's classic fast acting Super Glue Liquid is ideal for strong and durable repairs around the home. Now even water resistant!</span>
 *                     </a>
 *                 </li>
 *                 <li>
 *                     <a href="#" title="Super Glue Liquid">
 *                         <div class="navigation-image"><img src="/assets/img/image-dummy/150x225.png" alt="Super Glue Liquid"></div>
 *                         <div class="navigation-image-shadow"><img src="/assets/img/image-dummy/150x225.png" alt="Super Glue Liquid"></div>
 *                         <span class="navigationtitle">Super Glue Liquid</span>
 *                         <span class="navigationsubtitle">Loctite's classic fast acting Super Glue Liquid is ideal for strong and durable repairs around the home. Now even water resistant!</span>
 *                     </a>
 *                 </li>
 *                 <li>
 *                     <a href="#" title="Super Glue Liquid">
 *                         <div class="navigation-image"><img src="/assets/img/image-dummy/150x225.png" alt="Super Glue Liquid"></div>
 *                         <div class="navigation-image-shadow"><img src="/assets/img/image-dummy/150x225.png" alt="Super Glue Liquid"></div>
 *                         <span class="navigationtitle">Super Glue Liquid</span>
 *                         <span class="navigationsubtitle">Loctite's classic fast acting Super Glue Liquid is ideal for strong and durable repairs around the home. Now even water resistant!</span>
 *                     </a>
 *                 </li>
 *                 <li>
 *                     <a href="#" title="Super Glue Liquid">
 *                         <div class="navigation-image"><img src="/assets/img/image-dummy/150x225.png" alt="Super Glue Liquid"></div>
 *                         <div class="navigation-image-shadow"><img src="/assets/img/image-dummy/150x225.png" alt="Super Glue Liquid"></div>
 *                         <span class="navigationtitle">Super Glue Liquid</span>
 *                         <span class="navigationsubtitle">Loctite's classic fast acting Super Glue Liquid is ideal for strong and durable repairs around the home. Now even water resistant!</span>
 *                     </a>
 *                 </li>
 *                 <li>
 *                     <a href="#" title="Super Glue Liquid">
 *                         <div class="navigation-image"><img src="/assets/img/image-dummy/150x225.png" alt="Super Glue Liquid"></div>
 *                         <div class="navigation-image-shadow"><img src="/assets/img/image-dummy/150x225.png" alt="Super Glue Liquid"></div>
 *                         <span class="navigationtitle">Super Glue Liquid</span>
 *                         <span class="navigationsubtitle">Loctite's classic fast acting Super Glue Liquid is ideal for strong and durable repairs around the home. Now even water resistant!</span>
 *                     </a>
 *                 </li>
 *                 <li class="last">
 *                     <a href="#" title="Super Glue Liquid">
 *                         <div class="navigation-image"><img src="/assets/img/image-dummy/150x225.png" alt="Super Glue Liquid"></div>
 *                         <div class="navigation-image-shadow"><img src="/assets/img/image-dummy/150x225.png" alt="Super Glue Liquid"></div>
 *                         <span class="navigationtitle">Super Glue Liquid</span>
 *                         <span class="navigationsubtitle">Loctite's classic fast acting Super Glue Liquid is ideal for strong and durable repairs around the home. Now even water resistant!</span>
 *                     </a>
 *                 </li>
 *             </ul>
 *     </div>
 *     <div class="nav-carousel-next"></div>
 *     <script class="config">
 *     new Object({
 *         useAjax: true,
 *         urlroot: "/content/uac/loctite-enhancement/master/www/en-2014/products",
 *     });
 *     </script>
 * </nav>
 * </div>
 *
 *
*/
#ui .nav-carousel {
  background: #fff;
  color: #003a74;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
  margin-bottom: 40px;
  max-height: 450px;
  position: relative;
}
#ui .nav-carousel .nav-carousel-bg {
  -webkit-box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.5);
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
#ui .nav-carousel .navigation-image-shadow {
  display: none;
}
#ui .nav-carousel .navigation-image img {
  max-width: 100%;
  width: 100%;
}
#ui .nav-carousel ul {
  zoom: 1;
  width: 9999px;
  position: relative;
  left: 13%;
}
#ui .nav-carousel ul:before,
#ui .nav-carousel ul:after {
  content: "";
  display: table;
}
#ui .nav-carousel ul:after {
  clear: both;
}
#ui .nav-carousel ul li {
  float: left;
  width: 200px;
  padding-right: 20px;
}
#ui .nav-carousel ul li a {
  display: block;
  padding-bottom: 40px;
}
#ui .nav-carousel ul li a:hover {
  text-decoration: none;
}
#ui .nav-carousel ul li a span {
  display: block;
  text-align: center;
}
#ui .nav-carousel ul li a span.navigationtitle {
  color: #0060a4;
  font-size: 16px;
  font-weight: bold;
  color: #003a74;
  margin: 5px 0;
  line-height: 1;
}
#ui .nav-carousel ul li a span.navigationsubtitle {
  font-size: 13px;
  line-height: 1.333;
  color: #0060a4;
  color: #003a74;
}
#ui .nav-carousel .nav-carousel-prev,
#ui .nav-carousel .nav-carousel-next {
  z-index: 5;
  background: #d5d5d5;
  border-radius: 5px;
  cursor: pointer;
  height: 40%;
  position: absolute;
  top: 30%;
  width: 25px;
}
#ui .nav-carousel .nav-carousel-prev:before,
#ui .nav-carousel .nav-carousel-next:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
#ui .nav-carousel .nav-carousel-prev {
  left: -15px;
}
#ui .nav-carousel .nav-carousel-prev:before {
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -177px -100px;
  width: 12px;
  height: 34px;
  display: inline-block;
}
#ui .nav-carousel .nav-carousel-next {
  right: -15px;
}
#ui .nav-carousel .nav-carousel-next:before {
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -165px -100px;
  width: 12px;
  height: 34px;
  display: inline-block;
}
@media screen and (min-width: 641px) {
  #ui .nav-carousel ul {
    left: 4%;
  }
}
@media screen and (min-width: 1025px) {
  #ui .nav-carousel .nav-carousel-bg {
    overflow: hidden;
  }
  #ui .nav-carousel ul {
    width: auto;
    position: static;
    left: 10px;
  }
  #ui .nav-carousel ul li {
    visibility: hidden;
  }
}
/**
 * image.less
 * [ Image component. It's embeded in every component using images ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @name Image component
 * @description Image component used in every other component using images.
 *
 * @markup
 * <figure class="parbase cl image">
 *         <img class="cq-dd-image adaptive" src="/assets/img/image-dummy/436x276.jpg" data-src="/assets/img/image-dummy/436x276.jpg" data-width="" data-max-width="0" data-height="" alt="Alt Text">
 *         <noscript>
 *             &lt;img src="/assets/img/image-dummy/436x276.jpg" alt="Alt Text"/&gt;
 *         </noscript>
 *         <figcaption>Description</figcaption>
 * </figure>
 *
*/
/**
 * @name Image component with Zoom and image info
 * @description This appears when the user enables the zoom in the image
 *
 * @markup
 * <figure class="parbase cl image">
 *         <a class="zoom cboxElement"><img class="cq-dd-image adaptive" src="http://dummyimage.com/320x200/c40000/fff" data-src="http://dummyimage.com/320x200/c40000/fff" data-width="" data-max-width="0" data-height="" alt="Alt Text"><span class="magnifier"></span>
 *           <div class="imageinfo"><span class="number">1/1</span></div></a>
 *         <noscript>
 *             &lt;img src="http://dummyimage.com/320x200/c40000/fff" alt="Alt Text"/&gt;
 *         </noscript>
 *         <figcaption>Description</figcaption>
 *         <script class="config">
 *         new Object({
 *             href: 'http://dummyimage.com/320x200/c40000/fff',
 *             zoomDescription: 'Zoom description'
 *         });
 *         </script>
 *     </figure>
 */
/**
 * @name Image with lightbox
 * @description In this case an external HTML is specified and will be got and opened inside a lightbox
 *
 * @markup
 * <figure class="parbase image section">
 *     <a href="/assets/html/textimage.html" class="lightbox"><img title="" alt="" class="cq-dd-image adaptative ic" src="/assets/img/image-dummy/436x276.jpg"></a>
 * </figure>

 */
#ui .image img {
  width: 100%;
}
#ui .image a {
  display: inline-block;
}
#ui .image a:link,
#ui .image a:visited {
  text-decoration: none;
}
#ui .image a.zoom {
  position: relative;
}
#ui .image a.zoom span.magnifier {
  bottom: 8px;
}
#ui .image a.zoom span.magnifier:before {
  content: "";
  background-image: url("../../../designs/loctite-responsive/www/common/img/loctite.sprite.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: -110px 0px;
  width: 30px;
  height: 30px;
  display: inline-block;
}
#ui .image .imageinfo {
  display: none;
}
#ui .image figcaption {
  font-size: 13px;
  line-height: 1.333;
  color: #fff;
  clear: both;
  color: inherit;
  display: block;
}
@media screen and (min-width: 641px) {
  #ui .image figcaption {
    font-size: 12px;
  }
}
/**
* comp: skin cookie description
*
**/
@media all {
  #ui .cookies.collection .textimage.description {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #cccccc;
    cursor: pointer;
    color: #0060a4;
    font-weight: normal;
    margin-bottom: 20px;
    padding: 15px 40px 15px;
    position: relative;
    outline: none;
  }
  #ui .cookies.collection .textimage.description h3 {
    color: #003a74;
  }
}
/**
 * hotspotimage.less
 * [ Styles the hotspot image component. Including the tooltip in all the screens.
 * It does not add positioning of the tooltip of tabdesk ]
 *
 *  @mobileFirst
 *
 * Glosary:
 * .container: The container of the tooltip in mobile
 * .content: The common class of the tooltips of mobile and tabdesk
 * .hotspot > .content: The tooltip of tabdesk
 *
 * Note: This stylesheet is mobile first
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @name Hotspot Image
 * @description The hotspot component shows an image and gives tooltip with information
 *
 * @markup
 *  <div class="hotspotimage section">
 *     <figure class="parbase image">
 *         <img class="cq-dd-image adaptive" src="/assets/img/image-dummy/hotspotimage-956x600.png" data-src="/assets/img/image-dummy/hotspotimage-956x600.png" data-width="800px" data-max-width="0" data-height="" alt="" style="width:956px;">
 *         <noscript>
 *             &lt;img src="/assets/img/image-dummy/hotspotimage-956x600.png" alt=""/&gt;
 *         </noscript>
 *     </figure>
 *     <div class="parsys">
 *         <div class="parbase textimage hotspot section">
 *             <div class="content left top">
 *                 <figure class="parbase cl image">
 *                     <img class="cq-dd-image adaptive" src="/assets/img/image-dummy/436x276.jpg" data-src="/assets/img/image-dummy/436x276.jpg" data-width="800px" data-max-width="0" data-height="" alt="">
 *                     <noscript>
 *                         &lt;img src="/assets/img/image-dummy/436x276.jpg" alt=""/&gt;
 *                     </noscript>
 *                 </figure>
 *                 <div class="textimage-text">
 *                     <h4>Top left corner Hotspot</h4>
 *                     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, <a href="http://www.henkel.com" class="external" target="_blank">eaque ipsa</a> quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
 *                         <br>
 *                     </p>
 *                 </div>
 *             </div>
 *             <script class="config">
 *             new Object({
 *                 x: 166,
 *                 y: 105
 *             });
 *             </script>
 *         </div>
 *         <div class="parbase textimage hotspot section">
 *             <div class="content center top">
 *                 <figure class="parbase cl image">
 *                       <img class="cq-dd-image adaptive" src="/assets/img/image-dummy/436x276.jpg" data-src="/assets/img/image-dummy/436x276.jpg" data-width="800px" data-max-width="0" data-height="" alt="">
 *                     <noscript>
 *                         &lt;img src="/assets/img/image-dummy/436x276.jpg" alt=""/&gt;
 *                     </noscript>
 *                 </figure>
 *                 <div class="textimage-text">
 *                     <h4>Center Top Hotspot</h4>
 *                     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
 *                         <br>
 *                     </p>
 *                 </div>
 *             </div>
 *             <script class="config">
 *             new Object({
 *                 x: 400,
 *                 y: 105
 *             });
 *             </script>
 *         </div>
 *         <div class="parbase textimage hotspot section">
 *             <div class="content right top">
 *                 <figure class="parbase cl image">
 *                       <img class="cq-dd-image adaptive" src="/assets/img/image-dummy/436x276.jpg" data-src="/assets/img/image-dummy/436x276.jpg" data-width="800px" data-max-width="0" data-height="" alt="">
 *                     <noscript>
 *                         &lt;img src="/assets/img/image-dummy/436x276.jpg" alt=""/&gt;
 *                     </noscript>
 *                 </figure>
 *                 <div class="textimage-text">
 *                     <h4>Top right hotspot</h4>
 *                     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
 *                         <br>
 *                     </p>
 *                 </div>
 *             </div>
 *             <script class="config">
 *             new Object({
 *                 x: 655,
 *                 y: 105
 *             });
 *             </script>
 *         </div>
 *         <div class="parbase textimage hotspot section">
 *             <div class="content left bottom">
 *                 <figure class="parbase cl image">
 *                       <img class="cq-dd-image adaptive" src="/assets/img/image-dummy/436x276.jpg" data-src="/assets/img/image-dummy/436x276.jpg" data-width="800px" data-max-width="0" data-height="" alt="">
 *                     <noscript>
 *                         &lt;img src="/assets/img/image-dummy/436x276.jpg" alt=""/&gt;
 *                     </noscript>
 *                 </figure>
 *                 <div class="textimage-text">
 *                     <h4>Bottom left hotspot</h4>
 *                     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
 *                         <br>
 *                     </p>
 *                 </div>
 *             </div>
 *             <script class="config">
 *             new Object({
 *                 x: 166,
 *                 y: 393
 *             });
 *             </script>
 *         </div>
 *         <div class="parbase textimage hotspot section">
 *             <div class="content right bottom">
 *                 <figure class="parbase cl image">
 *                       <img class="cq-dd-image adaptive" src="/assets/img/image-dummy/436x276.jpg" data-src="/assets/img/image-dummy/436x276.jpg" data-width="800px" data-max-width="0" data-height="" alt="">
 *                     <noscript>
 *                         &lt;img src="/assets/img/image-dummy/436x276.jpg" alt=""/&gt;
 *                     </noscript>
 *                 </figure>
 *                 <div class="textimage-text">
 *                     <h4>Bottom right hotspot</h4>
 *                     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
 *                         <br>
 *                     </p>
 *                 </div>
 *             </div>
 *             <script class="config">
 *             new Object({
 *                 x: 655,
 *                 y: 393
 *             });
 *             </script>
 *         </div>
 *         <div class="parbase textimage hotspot section">
 *             <div class="content center bottom">
 *                 <figure class="parbase cl image">
 *                       <img class="cq-dd-image adaptive" src="/assets/img/image-dummy/436x276.jpg" data-src="/assets/img/image-dummy/436x276.jpg" data-width="800px" data-max-width="0" data-height="" alt="">
 *                     <noscript>
 *                         &lt;img src="/assets/img/image-dummy/436x276.jpg" alt=""/&gt;
 *                     </noscript>
 *                 </figure>
 *                 <div class="textimage-text">
 *                     <h4>Center hotspot</h4>
 *                     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
 *                         <br>
 *                     </p>
 *                 </div>
 *             </div>
 *             <script class="config">
 *             new Object({
 *                 x: 398,
 *                 y: 249
 *             });
 *             </script>
 *         </div>
 *     </div>
 * </div>
 *
*/
#ui .hotspotimage {
  position: relative;
}
#ui .hotspotimage .image {
  width: 100%;
}
#ui .hotspotimage .image img {
  max-width: 100%;
}
#ui .hotspotimage .container {
  display: block;
  margin-top: 10px;
}
#ui .hotspotimage > h3 {
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
  margin-top: 30px;
}
#ui .hotspotimage > h4 {
  font-size: 18px;
  line-height: 1.333;
  font-weight: normal;
  color: #fff;
  margin-bottom: 36px;
}
#ui .hotspotimage .content {
  background: #e2e2e2;
  border-radius: 5px;
  color: #333333;
  padding: 20px;
  border-radius: 0;
}
#ui .hotspotimage .content.bottom {
  margin-left: 30px;
  position: relative;
  margin-left: 0;
}
#ui .hotspotimage .content.bottom:before {
  border: 15px solid transparent;
  border-top-color: #e2e2e2;
  content: "";
  left: -30px;
  position: absolute;
}
#ui .hotspotimage .content.bottom:before {
  left: auto;
  bottom: -29px;
}
#ui .hotspotimage .content.top {
  margin-left: 30px;
  position: relative;
  margin-left: 0;
}
#ui .hotspotimage .content.top:before {
  border: 15px solid transparent;
  border-bottom-color: #e2e2e2;
  content: "";
  left: -30px;
  position: absolute;
}
#ui .hotspotimage .content.top:before {
  left: auto;
  top: -29px;
}
#ui .hotspotimage .content .image {
  position: relative;
}
#ui .hotspotimage .content .textimage-text {
  width: 100%;
  display: inline-block;
}
@media screen and (min-width: 641px) {
  #ui .hotspotimage {
    margin-bottom: 20px;
  }
  #ui .hotspotimage .container {
    display: none;
  }
  #ui .hotspotimage > h3 {
    font-size: 36px;
    margin-top: 60px;
  }
  #ui .hotspotimage > h4 {
    width: 50%;
    font-size: 18px;
    margin-bottom: 72px;
  }
  #ui .hotspotimage .content {
    height: auto;
    width: 400px;
  }
  #ui .hotspotimage .content .textimage-text {
    float: right;
    padding-left: 20px;
  }
  #ui .hotspotimage .content .image,
  #ui .hotspotimage .content .textimage-text {
    width: 50%;
  }
}
/**
 * hotspot.less
 * [ Styles the icon of the hotspot image. Adds positioning of the tooltips for tablet > screens ]
 * Note This is mobile first
 *
 * Glosary:
 * ".hotspot .content": The tooltip which is shown in tabdesk
 *
 * @project:  Henkel Loctite Responsive
 * @date:     06.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
*/
#ui .hotspot {
  height: 35px;
  position: absolute;
  width: 35px;
  overflow: visible;
}
#ui .hotspot:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\34";
}
#ui .hotspot:before {
  z-index: 5;
  background-color: #c50223;
  border-radius: 30px;
  font-size: 30px;
  line-height: 1;
  position: absolute;
}
.cssanimations #ui .hotspot {
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: all 0 none;
  animation: none;
}
#ui .hotspot.hover .content,
#ui .hotspot:hover .content {
  display: none;
}
#ui .hotspot.hover:before {
  font-family: "heli";
  font-size: 13px;
  font-weight: normal;
  speak: none;
  content: "\34";
}
#ui .hotspot.hover:before {
  background-color: #e2e2e2;
  border-radius: 30px;
  color: #c50223;
  font-size: 30px;
  line-height: 1;
  position: absolute;
}
@media screen and (max-width: 1024px), screen and (max-device-width: 1024px) {
  .cssanimations #ui .hotspot {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: all 0 none;
    animation: none;
  }
}
@media screen and (min-width: 641px) {
  #ui .hotspot.hover,
  #ui .hotspot:hover {
    cursor: pointer;
    text-decoration: none;
  }
  #ui .hotspot.hover .content,
  #ui .hotspot:hover .content {
    z-index: 10;
    display: block;
    position: absolute;
  }
  #ui .hotspot.hover:before,
  #ui .hotspot:hover:before {
    z-index: 15;
  }
  #ui .hotspot .content {
    -webkit-box-shadow: 6px 6px 5px 0 rgba(51, 51, 51, 0.2);
    -moz-box-shadow: 6px 6px 5px 0 rgba(51, 51, 51, 0.2);
    box-shadow: 6px 6px 5px 0 rgba(51, 51, 51, 0.2);
  }
  #ui .hotspot .content.center.bottom {
    bottom: 54px;
    left: -168px;
  }
  #ui .hotspot .content.center.bottom:before {
    left: 43%;
  }
  #ui .hotspot .content.center.top {
    left: -169px;
    top: 47px;
  }
  #ui .hotspot .content.center.top:before {
    right: 50%;
  }
  #ui .hotspot .content.left.top {
    left: -16px;
    top: 46px;
  }
  #ui .hotspot .content.left.top:before {
    left: 16px;
  }
  #ui .hotspot .content.left.bottom {
    bottom: 52px;
    left: -20px;
  }
  #ui .hotspot .content.right.top {
    right: -5px;
    top: 49px;
  }
  #ui .hotspot .content.right.top:before {
    right: 10px;
  }
  #ui .hotspot .content.right.bottom {
    bottom: 57px;
    right: -5px;
  }
  #ui .hotspot .content.right.bottom:before {
    right: 10px;
  }
}
/**
 * footer-nav.less
 * [ Footer navigation ]
 *
 * @project:  Henkel Loctite Responsive
 * @date:     05.2015
 * @author:   Daniela Valero, Sapient GmbH
 * @licensor: Sapient GmbH
 *
 * @name Footer navigation
 * @description Navigation of the footer
 *
 *
 *
*/
#ui #footer .meta-nav {
  float: none;
}
#ui #footer .meta-nav li {
  float: none;
  display: block;
  padding-left: 0px;
}
#ui #footer .meta-nav li a {
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-family: Lato, 'Helvetica', sans-serif;
  padding: 12px 0 11px;
}
#ui .footer-nav a:hover,
#ui .footer-nav a:focus,
#ui .footer-nav a:active {
  color: #c50223;
  text-decoration: underline;
}
@media screen and (min-width: 641px) {
  #ui #footer .meta-nav {
    float: right;
  }
  #ui #footer .meta-nav li {
    float: left;
  }
  #ui #footer .meta-nav li a {
    border-left: 1px solid #3380b6;
    box-shadow: inset 1px 0 #003a74;
    -moz-box-shadow: 1px 0 #003a74 inset;
    -webkit-box-shadow: inset 1px 0 #003a74;
    padding: 12px 10px 11px;
  }
}