li:last-child:after {
display: none; }
/*------------------------------------*\
$PAGINATION
\*------------------------------------*/
/**
* Basic pagination object, extends `.nav`.
* Requires some funky commenting to collapse any white-space caused by the
* `display:inline-block;` rules.
*
*
* Demo: jsfiddle.net/inuitcss/9Y6PU
*
*/
.pagination {
text-align: center;
/**
* Remove whitespace caused by `inline-block`.
*/
letter-spacing: -0.31em;
word-spacing: -0.43em; }
.pagination > li {
padding: 5px;
letter-spacing: normal;
word-spacing: normal; }
.pagination > li > a {
padding: 5px;
margin: -5px; }
.pagination__first a:before {
content: "\00AB" "\00A0"; }
.pagination__last a:after {
content: "\00A0" "\00BB"; }
/*------------------------------------*\
$BREADCRUMB
\*------------------------------------*/
/**
* Simple breadcrumb styling to apply to (ordered) lists. Extends `.nav`, e.g.:
*
- Home
- About
- The Board
- Directors
*
* Demo: jsfiddle.net/inuitcss/rkAY9
*
*/
.breadcrumb > li + li:before {
content: "\00BB" "\00A0"; }
/**
* For denoting a path-like structure, GitHub style, e.g.:
*
- inuit.css
- inuit.css
- partials
- objects
*
*/
.breadcrumb--path > li + li:before {
content: "\002F" "\00A0"; }
/**
* Assign a delimiter on the fly through a data attribute, e.g.:
*
- Home
- About
- The Board
- Directors
*
*/
.breadcrumb > li + li[data-breadcrumb]:before {
content: attr(data-breadcrumb) " "; }
/**
* Denote the root of the tree.
*/
.breadcrumb__root {
font-weight: bold; }
/*------------------------------------*\
$MEDIA
\*------------------------------------*/
/**
* Place any image- and text-like content side-by-side, as per:
* stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
* E.g.:
*
*
* Demo: jsfiddle.net/inuitcss/cf4Qs
*
*/
.media {
display: block; }
.media__img {
float: left;
margin-right: 10px; }
/**
* Reversed image location (right instead of left).
*/
.media__img--rev {
float: right;
margin-left: 10px; }
.media__img img,
.media__img--rev img {
display: block; }
.media__body {
overflow: hidden; }
.media__body,
.media__body > :last-child {
margin-bottom: 0; }
/**
* `.img`s in `.islet`s need an appropriately sized margin.
*/
.islet .media__img {
margin-right: 5px; }
.islet .media__img--rev {
margin-left: 5px; }
/*------------------------------------*\
$BLOCK-LIST
\*------------------------------------*/
/**
* Create big blocky lists of content, e.g.:
*
*
* Extend this object in your theme stylesheet.
*
* Demo: jsfiddle.net/inuitcss/hR57q
*
*/
.block-list,
.block-list > li {
border: 0 solid #333; }
.block-list {
list-style: none;
margin-left: 0;
border-top-width: 1px; }
.block-list > li {
border-bottom-width: 1px;
padding: 5px; }
.block-list__link {
display: block;
padding: 5px;
margin: -5px; }
/*------------------------------------*\
$SPLIT
\*------------------------------------*/
/**
* Simple split item for creating two elements floated away from one another,
* e.g.:
*
- Burger and fries
- £5.99
- Fillet steak
- £19.99
- Ice cream
- £2.99
*
- 1st place Bob
- 2nd place Lilly
- 3rd place Ted
*
* Demo: jsfiddle.net/inuitcss/9gZW7
*
*/
.split {
text-align: right;
list-style: none;
margin-left: 0; }
.split__title {
text-align: left;
float: left;
clear: left; }
/*------------------------------------*\
$LINK-COMPLEX
\*------------------------------------*/
/**
* As inspired by @necolas:
* github.com/necolas/suit-utils/blob/master/link.css#L18
*
* Add hover behaviour to only selected items within links, e.g.:
*
Log in
*
* Demo: jsfiddle.net/inuitcss/rt9M3
*
*/
.link-complex,
.link-complex:hover,
.link-complex:active,
.link-complex:focus {
text-decoration: none; }
.link-complex:hover .link-complex__target,
.link-complex:active .link-complex__target,
.link-complex:focus .link-complex__target {
text-decoration: underline; }
/*------------------------------------*\
$FLYOUT
\*------------------------------------*/
/**
* Flyouts are pieces of content that fly out of a parent when said parent is
* hovered. They typically appear bottom-left of the parent.
*
*
* Extend these objects in your theme stylesheet.
*
* Demo: jsfiddle.net/inuitcss/B52HG
*
*/
.flyout,
.flyout--alt {
position: relative;
overflow: hidden; }
.flyout__content {
/**
* Position the flyouts off-screen. This is typically better than
* `display:none;`.
*/
position: absolute;
top: 100%;
left: -99999px; }
/**
* Bring the flyouts into view when you hover their parents.
* Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’
* (`.flyout--alt`).
*/
.flyout:hover,
.flyout--alt:hover {
overflow: visible; }
/**
* Regular flyouts sit all the way from the top, flush left.
*/
.flyout:hover > .flyout__content {
left: 0; }
/**
* Alternative flyouts sit all the way from the left, flush top.
*/
.flyout--alt:hover > .flyout__content {
top: 0;
left: 100%; }
/*------------------------------------*\
$ARROWS
\*------------------------------------*/
/**
* It is a common design treatment to give an element a triangular points-out
* arrow, we typically build these with CSS. These following classes allow us to
* generate these arbitrarily with a mixin, `@arrow()`.
*/
/**
* Forms the basis for any/all CSS arrows.
*/
/**
* Define individual edges so we can combine what we need, when we need.
*/
/*------------------------------------*\
$SPRITE
\*------------------------------------*/
/**
* Giving an element a class of `.sprite` will throw it into ‘sprite’ mode and apply
* a background image e.g.:
*
More info…
*
* or
*
Help and FAQ
*
* Giving an element a class of `.icon` will throw it into ‘icon’ mode and will
* not add a background, but should be used for icon fonts and is populated
* through a `data-icon` attribute and the `:after` pseudo-element, e.g.:
*
View your favourites
*
* Where ‘’ might map to a star in your particular icon font.
*
* These all require extension in your theme stylesheet, e.g. in your own CSS:
*
.sprite{
background-image:url(path/to/your/sprite.png);
}
.sprite--link{ background-position:0 0 ; }
.sprite--star{ background-position:0 -16px; }
*
* Demo: jsfiddle.net/inuitcss/6TKuS
*
*/
.sprite,
.icon {
display: inline-block;
line-height: 1;
position: relative;
vertical-align: middle;
zoom: 1;
/**
* So using `.icon` on certain elements doesn’t make a visual difference.
*/
font-style: normal;
font-weight: normal;
/**
* So icons added using `.icon` sit in the centre of the element.
*/
text-align: center; }
.sprite {
/**
* The typical size of most icons. Override in your theme stylesheet.
*/
width: 16px;
height: 16px;
top: -1px;
/*
* H5BP method image replacement:
* github.com/h5bp/html5-boilerplate/commit/adecc5da035d6d76b77e3fa95c6abde841073da2
*/
overflow: hidden;
*text-indent: -9999px; }
.sprite:before {
content: "";
display: block;
width: 0;
height: 100%; }
/**
* Set up icon font
*/
.icon {
font-size: 16px;
/**
* Place the icon in a box the exact same dimensions as the icon itself.
*/
width: 1em;
height: 1em; }
.icon:before {
content: attr(data-icon); }
/**
* Icon size modifiers.
*/
.icon--large {
font-size: 32px; }
.icon--huge {
font-size: 64px; }
.icon--natural {
font-size: inherit; }
/*------------------------------------*\
$ICON-TEXT
\*------------------------------------*/
/**
* For text-links etc that have an icon with them. Sometimes whitespace would
* suffice in creating a gap between the icon and text, for example:
*
Help & support
*
* However we will sometimes want a larger, explicity set gap:
Help & support
*
* Demo: jsfiddle.net/inuitcss/Q6Lbf
*
*/
.icon-text > .icon-text__icon {
margin-right: 2.5px; }
/**
* We can also reverse the direction of the margin for icons that appear to the
* right of the text content, thus:
*
Help & support
*
*/
.icon-text--rev > .icon-text__icon {
margin-left: 2.5px; }
/*------------------------------------*\
$BEAUTONS.CSS
\*------------------------------------*/
/**
* beautons is a beautifully simple button toolkit.
*
* LICENSE
*
* Copyright 2013 Harry Roberts
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
/*!*
*
* @csswizardry -- csswizardry.com/beautons
*
*/
/*------------------------------------*\
$BASE
\*------------------------------------*/
/**
* Base button styles.
*
* 1. Allow us to better style box model properties.
* 2. Line different sized buttons up a little nicer.
* 3. Stop buttons wrapping and looking broken.
* 4. Make buttons inherit font styles.
* 5. Force all elements using beautons to appear clickable.
* 6. Normalise box model styles.
* 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then
* there is 1em of space above and below that text. We therefore apply 1em
* of space to the left and right, as padding, to keep consistent spacing.
* 8. Basic cosmetics for default buttons. Change or override at will.
* 9. Don’t allow buttons to have underlines; it kinda ruins the illusion.
*/
.btn {
display: inline-block;
/* [1] */
vertical-align: middle;
/* [2] */
white-space: nowrap;
/* [3] */
font-family: inherit;
/* [4] */
font-size: 100%;
/* [4] */
cursor: pointer;
/* [5] */
border: none;
/* [6] */
margin: 0;
/* [6] */
padding-top: 0;
/* [6] */
padding-bottom: 0;
/* [6] */
line-height: 3;
/* [7] */
padding-right: 1em;
/* [7] */
padding-left: 1em;
/* [7] */
border-radius: 4px;
/* [8] */ }
.btn, .btn:hover {
text-decoration: none;
/* [9] */ }
.btn:active, .btn:focus {
outline: none; }
/*------------------------------------*\
$SIZES
\*------------------------------------*/
/**
* Button size modifiers.
*
* These all follow the same sizing rules as above; text is 1em, space around it
* remains uniform.
*/
.btn--small {
padding-right: 0.5em;
padding-left: 0.5em;
line-height: 2; }
.btn--large {
padding-right: 1.5em;
padding-left: 1.5em;
line-height: 4; }
.btn--huge {
padding-right: 2em;
padding-left: 2em;
line-height: 5; }
/**
* These buttons will fill the entirety of their container.
*
* 1. Remove padding so that widths and paddings don’t conflict.
*/
.btn--full {
width: 100%;
padding-right: 0;
/* [1] */
padding-left: 0;
/* [1] */
text-align: center; }
/*------------------------------------*\
$FONT-SIZES
\*------------------------------------*/
/**
* Button font-size modifiers.
*/
.btn--alpha {
font-size: 3rem; }
.btn--beta {
font-size: 2rem; }
.btn--gamma {
font-size: 1rem; }
/**
* Make the button inherit sizing from its parent.
*/
.btn--natural {
vertical-align: baseline;
font-size: inherit;
line-height: inherit;
padding-right: 0.5em;
padding-left: 0.5em; }
/*------------------------------------*\
$FUNCTIONS
\*------------------------------------*/
/**
* Button function modifiers.
*/
/**
* Positive actions; e.g. sign in, purchase, submit, etc.
*/
.btn--positive {
background-color: #4A993E;
color: #fff; }
/**
* Negative actions; e.g. close account, delete photo, remove friend, etc.
*/
.btn--negative {
background-color: #b33630;
color: #fff; }
/**
* Inactive, disabled buttons.
*
* 1. Make the button look like normal text when hovered.
*/
.btn--inactive,
.btn--inactive:hover,
.btn--inactive:active,
.btn--inactive:focus {
background-color: #ddd;
color: #777;
cursor: text;
/* [1] */ }
/*------------------------------------*\
$STYLES
\*------------------------------------*/
/**
* Button style modifiers.
*
* 1. Use an overly-large number to ensure completely rounded, pill-like ends.
*/
.btn--soft {
border-radius: 200px;
/* [1] */ }
.btn--hard {
border-radius: 0; }
/*------------------------------------*\
$LOZENGES
\*------------------------------------*/
/**
* Create pill- and lozenge-like runs of text, e.g.:
*
This here is a pill!
*
This here is also a lozenge!
*
* Pills have fully rounded ends, lozenges have only their corners rounded.
*
* Demo: jsfiddle.net/inuitcss/N3pGm
*
*/
.pill, .loz {
display: inline-block;
/**
* These numbers set in ems mean that, at its narrowest, a lozenge will be
* the same width as the `line-height` set on the `html` element.
* This allows us to use the `.loz` in almost any `font-size` we wish.
*/
min-width: 0.66667em;
padding-right: 0.16667em;
padding-left: 0.16667em;
/* =1.50em */
text-align: center;
background-color: #333;
color: #fff;
/* Override this color in your theme stylesheet */
/**
* Normally we’d use border-radius:100%; but instead here we just use an
* overly large number; `border-radius:100%;` would create an oval on
* non-square elements whereas we just want to round the ends of an element.
*/
border-radius: 100px; }
.loz {
border-radius: 4px; }
/*------------------------------------*\
$RULES
\*------------------------------------*/
/**
* Horizontal rules, extend `hr`.
*
* Demo: jsfiddle.net/inuitcss/L6GuZ
*
*/
.rule {
color: #333;
border: none;
border-bottom-width: 1px;
border-bottom-style: solid;
margin-bottom: 9px;
margin-bottom: 0.9rem; }
/**
* Dotted rules
*/
.rule--dotted {
border-bottom-style: dotted; }
/**
* Dashed rules
*/
.rule--dashed {
border-bottom-style: dashed; }
/**
* Ornamental rules. Places a § over the rule.
*/
.rule--ornament {
position: relative;
/**
* Pass in an arbitrary ornament though a data attribute, e.g.:
*
*
*/ }
.rule--ornament:after {
content: "\00A7";
position: absolute;
top: 0;
right: 0;
left: 0;
line-height: 0;
text-align: center; }
.rule--ornament[data-ornament]:after {
content: attr(data-ornament); }
/*------------------------------------*\
$STATS
\*------------------------------------*/
/**
* Simple object to display key–value statistic-like information, e.g.:
*
- Tweets
- 27,740
- Following
- 11,529
- Followers
- 12,105
*
* Demo: jsfiddle.net/inuitcss/Bpwu6
*
*/
.stat-group {
margin-left: -10px; }
.stat {
float: left;
margin-left: 10px;
display: -ms-flexbox;
display: -moz-flex;
display: flex;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column; }
.stat__title {
-moz-order: 2;
-ms-order: 2;
-o-order: 2;
order: 2;
-ms-flex-order: 2; }
.stat__value {
margin-left: 0;
-moz-order: 1;
-ms-order: 1;
-o-order: 1;
order: 1;
-ms-flex-order: 1; }
/**
* Style trumps; helper and brand classes
*/
/*------------------------------------*\
$WIDTHS
\*------------------------------------*/
/**
* Sizes in human readable format. These are used in conjunction with other
* objects and abstractions found in inuit.css, most commonly the grid system
* and faux flexbox.
*
* We have a mixin to generate our widths and their breakpoint-specific
* variations.
*/
/**
* Whole
*/
.one-whole {
width: 100%; }
/**
* Halves
*/
.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths {
width: 50%; }
/**
* Thirds
*/
.one-third, .two-sixths, .four-twelfths {
width: 33.333%; }
.two-thirds, .four-sixths, .eight-twelfths {
width: 66.666%; }
/**
* Quarters
*/
.one-quarter, .two-eighths, .three-twelfths {
width: 25%; }
.three-quarters, .six-eighths, .nine-twelfths {
width: 75%; }
/**
* Fifths
*/
.one-fifth, .two-tenths {
width: 20%; }
.two-fifths, .four-tenths {
width: 40%; }
.three-fifths, .six-tenths {
width: 60%; }
.four-fifths, .eight-tenths {
width: 80%; }
/**
* Sixths
*/
.one-sixth, .two-twelfths {
width: 16.666%; }
.five-sixths, .ten-twelfths {
width: 83.333%; }
/**
* Eighths
*/
.one-eighth {
width: 12.5%; }
.three-eighths {
width: 37.5%; }
.five-eighths {
width: 62.5%; }
.seven-eighths {
width: 87.5%; }
/**
* Tenths
*/
.one-tenth {
width: 10%; }
.three-tenths {
width: 30%; }
.seven-tenths {
width: 70%; }
.nine-tenths {
width: 90%; }
/**
* Twelfths
*/
.one-twelfth {
width: 8.333%; }
.five-twelfths {
width: 41.666%; }
.seven-twelfths {
width: 58.333%; }
.eleven-twelfths {
width: 91.666%; }
/**
* If you have set `$responsive` to ‘true’ in `_vars.scss` then you now have
* access to these classes. You can define at which breakpoint you’d like an
* element to be a certain size, e.g.:
*
* ` ...
`
*
* This would create a `div` that, at ‘desktop’ sizes, takes up a quarter of the
* horizontal space, a half of that space at ‘tablet’ sizes, and goes full width
* at ‘mobile’ sizes.
*
* Demo: jsfiddle.net/inuitcss/WS4Ge
*
*/
/* endif */
/*------------------------------------*\
$PUSH
\*------------------------------------*/
/**
* Push classes, to move grid items over to the right by certain amounts.
*/
/*------------------------------------*\
$PULL
\*------------------------------------*/
/**
* Pull classes, to move grid items over to the right by certain amounts.
*/
/*------------------------------------*\
$BRAND
\*------------------------------------*/
/**
* `.brand` is a quick and simple way to apply your brand face and/or color to
* any element using a handy helper class.
*/
.brand {
font-family: "Helvetica Neue", sans-serif!important;
color: #4a8ec2!important; }
.brand-face {
font-family: "Helvetica Neue", sans-serif!important; }
.brand-color,
.brand-colour {
color: #4a8ec2!important; }
/*------------------------------------*\
$HELPER
\*------------------------------------*/
/**
* A series of helper classes to use arbitrarily. Only use a helper class if an
* element/component doesn’t already have a class to which you could apply this
* styling, e.g. if you need to float `.main-nav` left then add `float:left;` to
* that ruleset as opposed to adding the `.float--left` class to the markup.
*
* A lot of these classes carry `!important` as you will always want them to win
* out over other selectors.
*/
/**
* Add/remove floats
*/
.float--right {
float: right !important; }
.float--left {
float: left !important; }
.float--none {
float: none !important; }
/**
* Text alignment
*/
.text--left {
text-align: left !important; }
.text--center {
text-align: center !important; }
.text--right {
text-align: right !important; }
/**
* Font weights
*/
.weight--light {
font-weight: 300 !important; }
.weight--normal {
font-weight: 400 !important; }
.weight--semibold {
font-weight: 600 !important; }
/**
* Add/remove margins
*/
.push {
margin: 10px !important; }
.push--top {
margin-top: 10px !important; }
.push--right {
margin-right: 10px !important; }
.push--bottom {
margin-bottom: 10px !important; }
.push--left {
margin-left: 10px !important; }
.push--ends {
margin-top: 10px !important;
margin-bottom: 10px !important; }
.push--sides {
margin-right: 10px !important;
margin-left: 10px !important; }
.push-half {
margin: 5px !important; }
.push-half--top {
margin-top: 5px !important; }
.push-half--right {
margin-right: 5px !important; }
.push-half--bottom {
margin-bottom: 5px !important; }
.push-half--left {
margin-left: 5px !important; }
.push-half--ends {
margin-top: 5px !important;
margin-bottom: 5px !important; }
.push-half--sides {
margin-right: 5px !important;
margin-left: 5px !important; }
.flush {
margin: 0 !important; }
.flush--top {
margin-top: 0 !important; }
.flush--right {
margin-right: 0 !important; }
.flush--bottom {
margin-bottom: 0 !important; }
.flush--left {
margin-left: 0 !important; }
.flush--ends {
margin-top: 0 !important;
margin-bottom: 0 !important; }
.flush--sides {
margin-right: 0 !important;
margin-left: 0 !important; }
/**
* Add/remove paddings
*/
.soft {
padding: 10px !important; }
.soft--top {
padding-top: 10px !important; }
.soft--right {
padding-right: 10px !important; }
.soft--bottom {
padding-bottom: 10px !important; }
.soft--left {
padding-left: 10px !important; }
.soft--ends {
padding-top: 10px !important;
padding-bottom: 10px !important; }
.soft--sides {
padding-right: 10px !important;
padding-left: 10px !important; }
.soft-half {
padding: 5px !important; }
.soft-half--top {
padding-top: 5px !important; }
.soft-half--right {
padding-right: 5px !important; }
.soft-half--bottom {
padding-bottom: 5px !important; }
.soft-half--left {
padding-left: 5px !important; }
.soft-half--ends {
padding-top: 5px !important;
padding-bottom: 5px !important; }
.soft-half--sides {
padding-right: 5px !important;
padding-left: 5px !important; }
.hard {
padding: 0 !important; }
.hard--top {
padding-top: 0 !important; }
.hard--right {
padding-right: 0 !important; }
.hard--bottom {
padding-bottom: 0 !important; }
.hard--left {
padding-left: 0 !important; }
.hard--ends {
padding-top: 0 !important;
padding-bottom: 0 !important; }
.hard--sides {
padding-right: 0 !important;
padding-left: 0 !important; }
/**
* Pull items full width of `.island` parents.
*/
.full-bleed {
margin-right: -10px !important;
margin-left: -10px !important; }
.islet .full-bleed {
margin-right: -5px !important;
margin-left: -5px !important; }
/**
* Add a help cursor to any element that gives the user extra information on
* `:hover`.
*/
.informative {
cursor: help !important; }
/**
* Mute an object by reducing its opacity.
*/
.muted {
opacity: 0.5 !important;
filter: alpha(opacity=50) !important; }
/**
* Align items to the right where they imply progression/movement forward, e.g.:
*
Read more...
*
*/
.proceed {
text-align: right !important; }
/**
* Add a right-angled quote to links that imply movement, e.g.:
*
Read more
*
*/
.go:after {
content: " " "»" !important; }
/**
* Apply capital case to an element (usually a `strong`).
*/
.caps {
text-transform: uppercase !important; }
/**
* Hide content off-screen without resorting to `display:none;`, also provide
* breakpoint specific hidden elements.
*/
.accessibility,
.visuallyhidden {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important; }
/* endif */
/* =LAYOUT
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*** PLACEHOLDERS ***/
.tile .tile__mask {
background: #d0043c; }
.tile.tile--tip .tile__like p:before, .community__box .nav--social:after {
background-image: linear-gradient(to right, #c9043d 0%, #ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9043d', endColorstr='#ffffff', GradientType=1); }
.tile.tile--tip .tile__like p:after, .community__box .nav--social:before {
background-image: linear-gradient(to right, #ffffff 0%, #c9043d 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#c9043d', GradientType=1); }
.tile.tile--collection.tile--proseries .tile__mask, .tile.tile--collection.tile--wellaflex .tile__mask {
background: transparent url("../i/layout/tile_mask_bg.png") 0 0 repeat; }
.tile.tile--proseries .tile__front {
background: #ffe2e2 url("../i/layout/gradients/tile_proseries_bg.jpg") 0 0 no-repeat; }
.tile.tile--wellaflex .tile__front {
background: #feeee0 url("../i/layout/gradients/tile_wellaflex_bg.jpg") 0 0 no-repeat; }
.tile.tile--koleston .tile__front, .tile.tile--wellaton .tile__front {
background: #f2edfe url("../i/layout/gradients/tile_koleston.jpg") 0 0 no-repeat; }
.tile.tile--koleston .tile__front, .tile.tile--wellaton .tile__front {
background: #f2edfe url("../i/layout/gradients/tile_wellaton.png") 0 0 no-repeat; }
.tile.tile--softcolor .tile__front {
background: #fcf1d5 url("../i/layout/gradients/tile_softcolor.jpg") 0 0 no-repeat; }
.tile.tile--koleston.tile--2x1 .tile__front {
background: #f2edfe url("../i/layout/gradients/tile_koleston_long.jpg") 0 0 no-repeat; }
.tile.tile--softcolor.tile--2x1 .tile__front {
background: #fcf1d5 url("../i/layout/gradients/tile_softcolor_long.jpg") 0 0 no-repeat; }
.product.product--proseries .product__packshot, .review__comment.review__comment--proseries .product .product__packshot {
background: transparent url("../i/layout/gradients/product_proseries_bg.jpg") 0 0 no-repeat; }
.review__comment.review__comment--wellaflex .product .product__packshot, .product.product--wellaflex .product__packshot {
background: transparent url("../i/layout/gradients/product_wellaflex_bg.jpg") 0 0 no-repeat; }
.product.product--koleston .product__packshot, .review__comment.review__comment--koleston .product .product__packshot {
background: transparent url("../i/layout/gradients/product_koleston_bg.jpg") 0 0 no-repeat;
background-size: cover;
position: absolute; }
.product.product--wellaton .product__packshot {
background: transparent url("../i/layout/gradients/product_wellaton_bg.jpg") center center no-repeat;
background-size: cover; }
.product.product--softcolor .product__packshot, .review__comment.review__comment--softcolor .product .product__packshot {
background: transparent url("../i/layout/gradients/product_softcolor_bg.jpg") 0 0 no-repeat; }
.title.title--mode3.title--proseries, .review__comment.review__comment--proseries .title--mode4 {
background: url("../i/layout/pattern_proseries_bg.png") 0 0 repeat; }
.title.title--mode3.title--wellaflex, .review__comment.review__comment--wellaflex .title--mode4 {
background: url("../i/layout/pattern_wellaflex_bg.png") 0 0 repeat; }
.title.title--mode3.title--koleston, .review__comment.review__comment--koleston .title--mode4 {
background: url("../i/layout/pattern_koleston_bg.png") 0 0 repeat; }
.title.title--mode3.title--softcolor, .review__comment.review__comment--softcolor .title--mode4 {
background: url("../i/layout/pattern_softcolor_bg.png") 0 0 repeat; }
.title.title--mode3.title--wellaton {
background: url("../i/layout/pattern_wellaton_bg.jpg") 0 0 repeat; }
.product.product--proseries, .review__comment.review__comment--proseries .product {
background: #ffe2e2; }
.review__comment.review__comment--wellaflex .product {
background: #feeee0; }
.product.product--koleston, .review__comment.review__comment--koleston .product {
background: #f2edfe; }
.product.product--koleston .product__packshot:before, .review__comment.review__comment--koleston .product .product__packshot:before {
content: "";
position: absolute;
bottom: 0;
background: url(../i/layout/gradients/product_koleston_shadow.png); }
.product.product--wellaton {
background: #f2edfe; }
.product.product--softcolor, .review__comment.review__comment--softcolor .product {
background: #fcf1d5; }
.product.product--softcolor .product__packshot:before, .review__comment.review__comment--softcolor .product .product__packshot:before {
content: "";
position: absolute;
bottom: 0; }
.community__box .nav--feed .more.hidden, .page--profile .title__wrapper .buttons .button.hidden {
opacity: 0;
margin: 0;
padding: 0;
max-width: 0 !important;
transition: margin 0.6s 0.2s, padding 0.6s 0.2s, max-width 0.6s 0.2s, opacity 0.3s; }
/*** GLOBAL ***/
* {
outline: none !important;
-webkit-backface-visibility: hidden; }
.ie9 * {
filter: none !important; }
hr {
background: #ccc; }
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400; }
caption {
font-size: 0;
line-height: 0;
text-shadow: none;
color: transparent; }
.require-cloak {
position: relative; }
.require-cloak:before {
content: "";
width: 100%;
height: 100%;
background: #fff url("../i/layout/loader2.gif") center center no-repeat;
opacity: 0.8;
position: absolute;
top: 0;
left: 0;
z-index: 100; }
.ie8 .require-cloak {
position: relative; }
.ie8 .require-cloak:before {
display: none; }
.product--koleston .require-cloak,
.product--softcolor .require-cloak {
display: block !important; }
.buttons.require-cloak {
padding: 20px 0;
margin: -20px 0; }
.loader {
position: absolute;
left: 0;
bottom: 60px;
display: none;
width: 100%;
height: 32px;
z-index: 100; }
.loader.active {
display: block; }
.loader .spinningMeat {
position: absolute;
background: url("../i/layout/loader2.gif") 0 0 no-repeat;
width: 31px;
height: 31px;
margin-left: -15.5px;
margin-top: -15.5px;
left: 50%;
bottom: 0; }
.page__body {
position: relative;
z-index: 50;
margin-bottom: 90px; }
.page__body .page__wrapper {
overflow: hidden; }
.page__body .page__wrapper--visible {
overflow: visible; }
.page__body .page__wrapper--visible .isotope {
overflow: visible !important; }
.page__wrapper {
width: 1022px;
margin: 0 auto;
position: relative; }
.page__wrapper--Pome .article__media {
margin-top: 54px; }
.page__wrapper--Pome .article__media--video {
width: 679px;
height: 382px; }
.page__wrapper--Pome .article__media--video .tile__mask {
display: inline-block;
width: 100%;
height: 100%; }
.page__wrapper--Pome .faq__bar {
display: block;
margin-top: 6px;
width: 100%;
text-align: center;
background: url("../i/layout/pome/purple-bar.png") no-repeat;
background-size: cover;
font-family: "ClanNarrowMedium", sans-serif; }
.page__wrapper--Pome .faq__bar span {
color: #fff;
font-size: 14px;
line-height: 45px;
display: inline-block; }
.page__wrapper--Pome .faq__bar span:after {
content: '';
display: inline-block;
position: relative;
top: 7px;
margin-left: 6px;
vertical-align: middle;
background-image: url("../i/layout/pome/question-mark.png");
background-size: contain;
background-repeat: no-repeat;
width: 31px;
height: 36px; }
.page__wrapper--Pome .tile .tile__info {
min-height: 0; }
.page__wrapper--Pome .tile .tile__info .tile__blur {
background-image: url("../i/layout/pome/glass-Pome.png");
background-size: cover; }
.page__wrapper--Pome .tile .tile__info .tile__info--text h2 {
font-family: "ClanNarrowMedium", sans-serif;
font-size: 14px;
line-height: 16px; }
.page__wrapper--Pome .tile .tile__info .tile__info--text h2 span {
font-family: inherit;
text-transform: lowercase; }
.page__wrapper--Pome .tile .tile__info .tile__info--text h2 br {
display: none; }
.page__wrapper--Pome .tile .tile__info .tile__info--text h2 .title__newLine {
text-transform: inherit;
display: block; }
.slider__item--Pome {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.slider__item--Pome a {
width: 100%;
height: 100%;
position: absolute;
z-index: 1; }
.slider__item--Pome h2 {
color: #472563;
float: right;
font-size: 19.85px;
font-family: "ClanNarrowBook", sans-serif;
text-decoration: none;
text-align: center;
line-height: 30px;
width: 456px;
margin-right: 46px;
margin-top: 80px;
letter-spacing: 1px;
width: 510px; }
.slider__item--Pome h2 span.title-bold {
font-family: "ClanNarrowMedium", sans-serif; }
.slider__item--Pome h2 span.title-italic {
font-family: "FFClanWebProBookItalic", sans-serif; }
.slider__item--Pome h2 span.play-ico {
font-size: 12px;
vertical-align: middle;
line-height: 1;
margin-left: 5px; }
.slider__item--Pome img.header_logo {
margin-top: 40px;
max-width: 220px;
float: right;
clear: both;
margin-right: 168px; }
.nav--block {
letter-spacing: 0;
word-spacing: 0; }
.grid {
display: inline-block; }
.grid.grid--tiles {
width: 1032px;
margin: 10px -5px 0;
padding-bottom: 100px;
box-sizing: content-box;
z-index: 50; }
.grid.grid--complementary {
padding-bottom: 48px; }
.grid.grid--shades {
width: 330px;
margin: 0 2px;
padding: 10px 0;
box-sizing: content-box;
z-index: 50;
overflow: visible !important; }
.grid.grid--articles {
padding-bottom: 35px; }
.grid.grid--articles .loader {
bottom: 0; }
.grid.grid--related {
padding-bottom: 60px; }
.page__wrapper--tier {
width: 679px;
float: left;
overflow: hidden; }
.page__wrapper--tier .grid--tiles {
width: 689px; }
.page__wrapper--sidebar {
width: 334px;
float: right;
overflow: hidden; }
.page__wrapper--sidebar .grid--tiles {
width: 344px; }
.page__wrapper--sidebar .grid--top {
margin-top: -5px; }
.page__wrapper--sidebar--Pome {
margin-top: 54px; }
.page__wrapper--sidebar--Pome .title {
font-family: "FFClanWebProBookItalic", sans-serif;
padding-bottom: 16px;
font-size: 26.99px;
text-transform: uppercase;
text-align: center;
color: #472563;
background: url("../i/layout/pome/purple-border.png") center bottom no-repeat; }
.page__wrapper--sidebar--Pome .title span {
letter-spacing: 1px;
font-style: normal;
font-family: "ClanNarrowMedium", sans-serif; }
.page__wrapper--sidebar--Pome .tiles {
height: auto; }
.page__wrapper--sidebar--Pome .tile {
position: relative;
margin-bottom: 11px; }
.page__wrapper--sidebar--Pome .tile.tile--1x1 {
height: 294px; }
.page__wrapper--sidebar--Pome .tile .tile__info {
min-height: 37px; }
.page__wrapper--sidebar--Pome .tile .tile__info .tile__blur {
background-size: 100% 100%; }
.page__wrapper--sidebar--Pome .tile .tile__info--text {
text-align: center;
line-height: 16px; }
.page__wrapper--sidebar--Pome .tile .tile__info--text br {
display: none; }
.page__wrapper--sidebar--Pome .tile .tile__info--text .title__newLine {
text-transform: inherit;
display: block; }
.page--singleCollection .grid--filter {
padding-bottom: 50px; }
.label__category {
text-transform: uppercase;
display: inline-block; }
.text-right {
text-align: right; }
.text-center {
text-align: center; }
/* BUTTONS */
.link {
color: inherit; }
.link:hover, .link.active {
color: #d0043c !important; }
.button {
font-size: 1.2em;
font-family: "ClanNarrowMedium", sans-serif;
color: #fff;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
background: #cc0033;
padding: 5px 5px 5px 10px;
display: inline-block;
border-radius: 0 0 0 5px;
position: relative; }
.button.button--back-to-top {
font-family: "ClanNarrowBook", sans-serif;
padding: 6px 4px;
position: fixed;
bottom: -40px;
left: 0;
border-radius: 3px 3px 0 0;
opacity: 0;
transition: opacity 0.5s 0.1s, bottom 0s 0.5s; }
.button.button--back-to-top.active {
bottom: 95px;
opacity: 1;
transition: bottom 0s, opacity 0.5s 0.1s; }
.button.button--back-to-top:after {
content: "";
background-image: url(../i/sprites/sprite.png);
background-position: -165px -112px;
width: 12px;
height: 6px;
display: block;
margin: 5px auto 0; }
.button.button--link {
padding-right: 25px; }
.button.button--link:after {
content: "";
background-image: url(../i/sprites/sprite.png);
background-position: -40px -203px;
width: 8px;
height: 12px;
position: absolute;
right: 5px;
top: 50%;
margin-top: -6px; }
.button.button--link.disabled {
pointer-events: none;
opacity: 0.7; }
.button.button--prev {
padding: 5px 10px 5px 25px;
background: #000;
border-radius: 0 0 5px 0; }
.button.button--prev:after {
content: "";
background-image: url(../i/sprites/sprite.png);
background-position: -24px -203px;
width: 8px;
height: 12px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -6px; }
.button.button--text {
background: none;
padding-left: 10px; }
.button.button--text:before {
content: "";
background-image: url(../i/sprites/sprite.png);
background-position: -175px -88px;
width: 4px;
height: 8px;
position: absolute;
left: 0;
top: 50%;
margin-top: -4px; }
.button.button--text.button--text--red {
color: #d0043c;
padding-left: 12px; }
.button.button--text.button--text--red:before {
background-image: url(../i/sprites/sprite.png);
background-position: -180px -163px;
width: 6px;
height: 11px;
margin-top: -6.5px; }
.button.button--text.button--text--black {
color: #000;
padding-left: 12px; }
.button.button--text.button--text--black:before {
background-image: url(../i/sprites/sprite.png);
background-position: -186px -163px;
width: 6px;
height: 11px;
margin-top: -6.5px; }
.button.button--tile {
background: #fff;
display: inline-block !important;
border: 1px solid; }
.button.button--proseries {
background: #910213; }
.button.button--proseries2 {
background: #d0043c; }
.button.button--wellaflex {
background: #7f6230; }
.button.button--wellaflex2 {
background: #8f7549; }
.button.button--koleston {
background: #663977; }
.button.button--wellaton {
background: #894fba; }
.button.button--softcolor {
background: #b99620; }
.button.button--border {
font-family: Arial, sans-serif;
color: #000;
text-transform: none;
padding: 5px 10px;
background: transparent;
border: 1px solid;
transition: all 0.2s; }
.button.button--border.button--koleston {
border-color: #663977; }
.button.button--border.button--wellaton {
border-color: #894fba; }
.button.button--border.button--softcolor {
border-color: #b99620; }
.button.button--border.active {
color: #fff;
transition: all 0.2s; }
.button.button--border.active.button--koleston {
background: #663977; }
.button.button--border.active.button--wellaton {
background: #894fba; }
.button.button--border.active.button--softcolor {
background: #b99620; }
.button.color--black {
background: #000; }
.button--underline {
font-family: Arial, sans-serif;
color: #d0043c;
font-size: 1.2em;
text-decoration: underline;
text-transform: uppercase; }
.button__back {
font-family: "ClanNarrowBook", sans-serif;
font-size: 1.4em;
color: #000;
text-decoration: none;
margin-left: 5px;
padding-left: 10px; }
.tile--proseries .button--tile {
color: #ad192a;
border-color: #ad192a;
border-color: rgba(173, 25, 42, 0.25); }
.tile--proseries .button--tile:after {
background-image: url(../i/sprites/sprite.png);
background-position: -32px -203px;
width: 8px;
height: 12px; }
.tile--wellaflex .button--tile {
color: #8f7549;
border-color: #8f7549;
border-color: rgba(143, 117, 73, 0.25); }
.tile--wellaflex .button--tile:after {
background-image: url(../i/sprites/sprite.png);
background-position: -48px -203px;
width: 8px;
height: 12px; }
.tile--koleston .button--tile {
color: #663977;
border-color: #663977;
border-color: rgba(102, 57, 119, 0.25); }
.tile--koleston .button--tile:after {
background-image: url(../i/sprites/sprite.png);
background-position: -8px -203px;
width: 8px;
height: 12px; }
.tile--softcolor .button--tile {
color: #16408a;
border-color: #16408a;
border-color: rgba(22, 64, 138, 0.25); }
.tile--softcolor .button--tile:after {
background-image: url(../i/sprites/sprite.png);
background-position: 0px -203px;
width: 8px;
height: 12px; }
/* COLORS */
.page__body .color {
color: #fff; }
.page__body .color.color--step-by-step {
background: #e05586; }
.page__body .color.color--street-looks {
background: #fd82ae; }
.page__body .color.color--hair-trends {
background: #b05173; }
.page__body .color.color--hair-dressing {
background: #b179a2; }
.page__body .color.color--community {
background: #baafc5; }
/* RESET FORMS ELEMENTS & GLOBAL STYLING */
input::-webkit-input-placeholder {
color: #000;
opacity: 1; }
textarea::-webkit-input-placeholder {
color: #000;
opacity: 1; }
input:-moz-placeholder {
color: #000;
opacity: 1; }
textarea:-moz-placeholder {
color: #000;
opacity: 1; }
::-moz-placeholder {
color: #000;
opacity: 1; }
input:-ms-input-placeholder {
color: #000;
opacity: 1; }
textarea:-ms-input-placeholder {
color: #000;
opacity: 1; }
.placeholder {
color: #000;
opacity: 1; }
label,
input,
textarea,
button,
select,
option {
cursor: auto; }
label.parentBox {
padding-bottom: 0 !important; }
button {
border: 0; }
input:-webkit-autofill,
textarea:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset; }
input[type="submit"] {
border: 0;
cursor: pointer;
background: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0; }
input[type="text"],
input[type="password"] {
background: #fff;
padding: 0;
border: 0;
border-radius: 0; }
::-webkit-search-cancel-button {
-webkit-appearance: none; }
textarea {
resize: none;
overflow: auto;
border-radius: 0; }
.select-label {
display: inline-block;
overflow: hidden;
position: relative; }
.select-label .styled-select-wrapper {
height: 28px;
width: 100% !important;
border: 1px solid #eaeaea;
background: #fff;
display: table;
position: relative;
overflow: hidden; }
.select-label .styled-select-text {
font-size: 1.2em;
color: #000;
line-height: 1;
width: auto;
height: 100%;
padding: 0 28px 0 10px;
display: table-cell;
vertical-align: middle;
text-align: left;
position: relative;
top: 0;
left: 0; }
.select-label .styled-select-button {
width: 28px;
height: 100%;
position: absolute;
top: 0;
right: 0; }
.select-label .styled-select-button:before {
content: "";
background-image: url(../i/sprites/sprite.png);
background-position: -129px -71px;
width: 11px;
height: 15px;
position: absolute;
top: 50%;
margin-top: -7.5px;
left: 0; }
.select-label select {
font-size: 1.2em;
color: #000;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
.styled-checkbox-wrapper {
background: #fff;
width: 21px;
height: 21px;
overflow: hidden;
display: inline-block;
position: absolute; }
.styled-checkbox-wrapper.checked {
background: #fff url("../i/layout/checkbox_checked.png") center center no-repeat; }
.styled-checkbox-wrapper input[type='checkbox'] {
width: 100%;
height: 100%; }
.checkbox__label {
display: inline-block;
padding: 0 0 0 31px !important;
line-height: 21px;
text-transform: none !important; }
.styled-radio-wrapper {
background: #fff url("../i/layout/radio.png") top left no-repeat;
width: 12px;
height: 12px;
overflow: hidden;
display: inline-block;
position: absolute;
left: 0; }
.styled-radio-wrapper.checked {
background-position: bottom left; }
.styled-radio-wrapper input[type='checkbox'] {
width: 100%;
height: 100%; }
.radio__label {
display: inline-block;
padding: 0 0 0 17px !important;
line-height: 12px;
text-transform: none !important;
position: relative; }
.iFile__wrapper {
position: relative;
overflow: hidden;
display: inline-block; }
.iFile__wrapper:after {
content: "";
position: absolute;
left: 0;
top: 0; }
.iFile__wrapper .iFile {
opacity: 0;
font-size: 10em;
width: 250px;
position: absolute;
z-index: 2; }
.iFile__wrapper .button {
z-index: 1;
margin-top: 2px;
font-size: 1em;
font-family: "ClanNarrowMedium", sans-serif; }
.iText {
height: 28px;
background: #fff;
border: 0;
width: 100%;
padding: 0 10px !important;
font-size: 1.2em;
line-height: 28px; }
.form__messages {
width: 100%;
float: left; }
.form__messages .form__messages--errors {
font-weight: 700;
color: #d0043c;
margin: 10px auto;
min-height: 60px;
padding: 5px 5px 5px 0;
border: 1px solid #d0043c;
width: 300px;
display: table; }
.form__messages .form__messages--errors:before {
content: "";
background-image: url(../i/sprites/sprite.png);
background-position: -182px 0px;
width: 50px;
height: 50px;
display: block;
margin: 5px 15px; }
.form__messages .form__messages--errors .validation-summary-errors {
display: table-cell;
vertical-align: middle; }
.form__messages .form__messages--errors ul {
margin: 0;
list-style: none; }
.form__messages .form__messages--errors ul li {
line-height: 16px; }
.input-validation-error {
border: 1px solid #e6819b !important;
background: #f7d9e0 !important; }
.input-validation-error .styled-select-wrapper {
background: none; }
.input-validation-error.checkbox__label {
border: 0 !important;
background: transparent !important;
color: #d0043c; }
.field-validation-error {
color: #d0043c;
display: block;
margin-top: 5px; }
.captcha #recaptcha_image {
overflow: hidden; }
.captcha .recaptcha_input_area {
padding: 5px 0 0 !important; }
.captcha .recaptcha_input_area input {
font-size: 1em !important;
border: none !important;
height: 28px;
width: 314px !important;
line-height: 28px;
padding: 0 10px;
margin: 0 0 0 -7px; }
.captcha .recaptchatable {
width: 440px; }
.captcha .recaptchatable a {
color: #000;
text-decoration: underline; }
.captcha .recaptchatable a:hover {
color: #d0043c; }
.iFile__wrapper:after {
background-image: url(../i/sprites/sprite.png);
background-position: -182px -50px;
width: 31px;
height: 25px; }
.iFile__wrapper .button {
margin: 3px 0 0 37px !important; }
.counter-box {
display: inline-block;
float: right;
margin: 5px 0; }
/* BREADCRUMB */
.breadcrumb {
margin: 15px 0 30px; }
.breadcrumb li {
font-weight: 700;
color: #d0043c;
display: inline;
float: left; }
.breadcrumb li a {
text-decoration: none;
color: #d0043c; }
.breadcrumb li:before {
color: #666;
margin: 0 3px 0 6px; }
.breadcrumb li:hover a {
text-decoration: underline; }
.breadcrumb.breadcrumb--mod1 {
margin: 0;
position: absolute;
top: 15px;
left: 12px;
z-index: 50; }
.breadcrumb.breadcrumb--mod1 li {
color: #d0043c; }
.breadcrumb.breadcrumb--mod1 li a {
color: #d0043c; }
.breadcrumb.breadcrumb--mod1 li a:before {
color: #666; }
.breadcrumb.breadcrumb--mod2 {
margin: 0;
position: absolute;
top: 15px;
left: 12px;
z-index: 50; }
.breadcrumb.breadcrumb--mod2 li,
.breadcrumb.breadcrumb--mod2 li:before,
.breadcrumb.breadcrumb--mod2 a {
color: #fff; }
/* TOOLTIP */
.tooltip__container > * {
display: inline-block; }
.tooltip {
width: 100%;
position: absolute;
top: -2px;
margin-left: 5px; }
.tooltip p {
font-family: "ClanNarrowMedium", sans-serif;
color: #fff;
background: #d0043c;
text-transform: none;
margin: 0; }
.tooltip p.tooltip__ico {
text-align: center;
width: 15px;
height: 15px;
line-height: 17px;
display: inline-block;
cursor: pointer;
border-radius: 50%; }
.tooltip p.tooltip__ico:hover + .tooltip__text {
opacity: 1; }
.tooltip p.tooltip__text {
height: 25px;
line-height: 25px;
padding: 0 5px;
margin-left: 5px;
position: absolute;
top: -5px;
left: 20px;
opacity: 0;
transition: all 0.3s; }
.tooltip p.tooltip__text:before {
content: "";
background-image: url(../i/sprites/sprite.png);
background-position: -175px -77px;
width: 6px;
height: 11px;
position: absolute;
top: 50%;
left: -6px;
margin-top: -5.5px; }
.tooltip__container--mod {
position: relative; }
.tooltip__container--mod .tooltip {
margin: 0;
top: -58px;
z-index: -1; }
.tooltip__container--mod .tooltip p.tooltip__text {
font-size: 1.2em;
height: auto;
padding: 5px;
margin: 0;
line-height: 1.2;
left: 0;
text-align: justify; }
.tooltip__container--mod .tooltip p.tooltip__text:before {
background-image: url(../i/sprites/sprite.png);
background-position: -112px -148px;
width: 11px;
height: 6px;
top: auto;
bottom: -6px;
left: 50%;
margin-top: 0;
margin-left: -5.5px; }
.tooltip__container--mod .select-label:hover + .tooltip {
z-index: 1; }
.tooltip__container--mod .select-label:hover + .tooltip .tooltip__text {
opacity: 1; }
.ie8 .tooltip p.tooltip__ico:hover + .tooltip__text {
visibility: visible; }
.ie8 .tooltip p.tooltip__text {
opacity: 1;
visibility: hidden; }
/* PAGINATION */
.pagination {
margin: 0;
letter-spacing: 0;
word-spacing: 0; }
.pagination li {
padding: 0;
width: 20px;
height: 20px; }
.pagination li a {
font-family: "ClanNarrowMedium", sans-serif;
font-size: 1.2em;
text-align: center;
text-decoration: none;
line-height: 18px;
color: #d0043c;
border: 1px solid #d0043c;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
transition: all 0.3s; }
.pagination li:hover a {
background: #f7ecef; }
.pagination li.current a {
color: #fff;
background: #d0043c; }
.pagination li.prev a,
.pagination li.next a {
border: none;
text-indent: -9999px;
position: relative; }
.pagination li.prev a:before,
.pagination li.next a:before {
content: "";
position: absolute;
top: 6.5px;
left: 8px; }
.pagination li.prev a:hover,
.pagination li.next a:hover {
background: none; }
.pagination li.prev a:before {
background-image: url(../i/sprites/sprite.png);
background-position: -140px -86px;
width: 4px;
height: 7px; }
.pagination li.next a:before {
background-image: url(../i/sprites/sprite.png);
background-position: -140px -78px;
width: 4px;
height: 7px; }
/* POPINS */
.popup {
z-index: 9001;
position: fixed;
display: none; }
.popup.js-popup-opened {
display: block; }
.popup .popup__close {
text-indent: -9999px;
background-image: url(../i/sprites/sprite.png);
background-position: -155px -118px;
width: 13px;
height: 13px;
position: absolute; }
.popup.popup--video {
background: #000;
left: 50%;
top: 50%;
margin: -236px 0 0 -392.5px; }
.popup.popup--video > div {
width: 785px;
height: 472px;
overflow: hidden;
position: relative; }
.popup.popup--video > div iframe {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1; }
.popup.popup--video .popup__close {
top: -30px;
right: -10px; }
.popup.popup--global {
background: url("../i/layout/pattern_pink_bg.png") 0 0 repeat;
width: 294px;
padding: 17px;
top: 20%;
left: 50%;
margin-left: -147px;
border-radius: 0 25px 0 0; }
.popup.popup--global h1 {
font-family: "ClanNarrowMedium", sans-serif;
font-size: 2em;
color: #fff;
text-transform: uppercase;
margin: 0; }
.popup.popup--global .popup__container {
color: #000;
background: #fff;
padding: 15px 18px;
margin-top: 10px; }
.popup.popup--global .popup__container p {
font-family: "ClanNarrowMedium", sans-serif;
font-size: 1.3em;
text-transform: uppercase;
margin: 0; }
.popup.popup--global .popup__container .styled-checkbox-wrapper {
height: 16px;
width: 16px;
border: 1px solid #e2e2e2;
position: inherit;
float: left; }
.popup.popup--global .popup__container textarea {
font-size: 1.2em;
border: 1px solid #e2e2e2;
width: 100%;
height: 50px;
padding: 2px 5px;
margin-top: 15px; }
.popup.popup--global .popup__container .iText {
line-height: 16px;
height: 18px;
border: 1px solid #e2e2e2;
padding: 0 5px !important; }
.popup.popup--global .popup__container .select-label {
width: 100%;
min-height: 16px;
position: relative; }
.popup.popup--global .popup__container .select-label .styled-select-wrapper {
height: 18px;
overflow: visible; }
.popup.popup--global .popup__container .select-label .styled-select-text {
padding: 2px 20px 2px 7px; }
.popup.popup--global .popup__container .select-label .styled-select-button {
width: 12px;
height: 100%;
right: 5px; }
.popup.popup--global .popup__container .select-label .styled-select-button:before {
background-image: url(../i/sprites/sprite.png);
background-position: -145px -140px;
width: 12px;
height: 14px;
margin-top: -7px; }
.popup.popup--global .popup__container label {
font-size: 1.2em;
line-height: 16px;
padding-left: 10px !important; }
.popup.popup--global .popup__container ul {
margin: 0; }
.popup.popup--global .popup__container ul li {
display: block;
margin-top: 15px; }
.popup.popup--global .popup__container .buttons {
margin-top: 15px; }
.popup.popup--global .popup__container .buttons .button {
margin-left: 15px; }
.popup.popup--global .popup__container .buttons .button:first-child {
margin-left: 0; }
.popup.popup--global .popup__close {
top: 17px;
right: 17px; }
.popup.popup--signincheck .popup__container {
padding: 27px 18px; }
.popup.popup--signincheck .popup__container p {
margin-bottom: 5px;
line-height: 18px; }
.popup.popup--signincheck .popup__container p:first-child {
margin-bottom: 25px; }
.popup.popup--signincheck .popup__container .link {
color: #000;
display: inline-block; }
.popup.popup--report .popup__container .hidden {
display: none; }
.popup.popup--confirm .popup__container p {
line-height: 18px; }
.popup.popup--confirm .popup__container p:first-child {
margin-bottom: 20px; }
.popup.popup--underage {
width: 450px;
margin-left: -225px; }
.popup.popup--resetpassword .popup__container label, .popup.popup--changepassword .popup__container label {
font-family: "ClanNarrowMedium", sans-serif;
font-size: 1.3em;
text-transform: uppercase;
margin-bottom: 10px;
padding-left: 0 !important; }
.popup.popup--deleteaccount .popup__container p {
line-height: 18px;
text-transform: none; }
.popup.popup--deleteaccount .popup__container p:first-child {
margin-bottom: 20px;
text-transform: uppercase; }
.popup.popup--buyitnow {
width: 600px;
margin-left: -300px; }
.popup.popup--buyitnow .popup__container {
max-height: 450px;
overflow: auto; }
.popup.popup--buyitnow .item {
display: table;
width: 100%;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #ccc; }
.popup.popup--buyitnow .item:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0; }
.popup.popup--buyitnow .item > div {
display: table-cell;
vertical-align: middle; }
.popup.popup--buyitnow .item .logo {
width: 15%;
text-align: center; }
.popup.popup--buyitnow .item .logo a {
display: block;
width: 100%;
height: 100%; }
.popup.popup--buyitnow .item .text {
width: 60%;
padding: 0 20px;
text-align: left;
line-height: 16px; }
.popup.popup--buyitnow .item .link {
width: 15%;
text-align: right; }
.popup.popup--shareit {
width: 600px;
margin-left: -300px; }
.popup.popup--shareit .popup__container {
max-height: 450px;
overflow: auto; }
.popup.popup--shareit .popup__container ul li {
margin-top: 10px; }
.popup.popup--shareit .popup__container ul li > * {
display: inline-block; }
.popup.popup--shareit .popup__container ul li.block {
margin-top: 25px; }
.popup.popup--shareit .popup__container ul li label {
width: 170px; }
.popup.popup--shareit .popup__container ul li input {
width: 200px; }
.popup.popup--shareit .popup__container ul li textarea {
width: 357px;
height: 80px;
margin: 0; }
.popup.popup--shareit .popup__container ul li .field-validation-error {
margin-left: 173px; }
/*** PAGE BODY ***/
/* SLIDER */
.slider {
width: 1022px;
height: 424px;
position: relative;
overflow: hidden; }
.slider .slider__items-wrap {
width: 1022px; }
.slider .slider__nav {
display: none; }
.slider .slider__item {
width: 1022px;
height: 424px; }
.slider .slider__item.slider__item--1 img {
z-index: 6; }
.slider .slider__item.slider__item--1 .button {
z-index: 7; }
.slider .slider__item img {
width: 1022px;
position: relative;
z-index: 4; }
.slider .slider__item .button {
z-index: 5; }
.slider .slider__pagination ul {
margin: 0;
width: 100%;
position: absolute;
bottom: 15px;
text-align: center; }
.slider .slider__pagination ul li {
background: #fefdfd;
display: inline-block;
margin: 0 5px;
width: 12px;
height: 12px;
border-radius: 50%; }
.slider .slider__pagination ul li.js-page-current {
background: #d0043c; }
.slider .slider__pagination ul li a {
display: block;
height: 100%;
width: 100%;
text-indent: -9999px; }
.slider--home .button {
position: absolute;
top: 243px;
left: 35px; }
/* FILTERS */
.filters {
margin-bottom: 20px; }
.filters .select-label {
margin-right: 10px; }
.filters .select-label .styled-select-wrapper {
width: 240px !important; }
.filters .select-label .styled-select-text,
.filters .select-label select {
font-family: "ClanNarrowBook", sans-serif;
font-size: 1.4em; }
/* TAGS */
.tag p {
display: inline;
color: #666; }
.tag .nav {
display: inline;
margin-left: 2px;
color: #999; }
/* TILES */
.tiles {
position: relative;
height: 610px; }
.tile {
margin: 5px;
overflow: hidden;
position: absolute;
top: 0;
left: 0; }
.tile.tile--1x1 {
width: 334px;
height: 300px; }
.tile.tile--1x1 img {
width: 334px;
height: 300px; }
.tile.tile--1x1 .brand_logo img {
width: inherit;
height: inherit; }
.tile.tile--1x2 {
width: 334px;
height: 610px; }
.tile.tile--1x2 img {
width: 334px;
height: 610px; }
.tile.tile--2x1 {
width: 678px;
height: 300px; }
.tile.tile--2x1 img {
width: 678px;
height: 300px; }
.tile.tile--shade {
width: 334px;
height: 500px; }
.tile.tile--category, .tile.tile--expert, .tile.tile--collection, .tile.tile--photo,
.tile .tile__front {
border-radius: 30px 0.1px 0 0; }
.tile.tile--category .tile__mask, .tile.tile--expert .tile__mask, .tile.tile--collection .tile__mask, .tile.tile--photo .tile__mask,
.tile .tile__front .tile__mask {
border-radius: 30px 0.1px 0 0; }
.tile.tile--tip {
border-radius: 0 30px 0 0;
background: url("../i/layout/tile_tip_bg.jpg") 0 0 repeat; }
.tile.tile--tip .tile__tip {
color: #fff;
padding: 17px 12px 0;
background: #d0043c;
width: 230px;
height: 208px;
margin: 40px auto 0;
overflow: hidden; }
.tile.tile--tip .tile__tip h2 {
font-family: "ClanNarrowBook", sans-serif;
font-size: 2.4em;
text-transform: uppercase; }
.tile.tile--tip .tile__tip h2 p {
font-size: 1.2em;
line-height: 16px; }
.tile.tile--tip .tile__tip h2 h4 {
font-family: "ClanNarrowMedium", sans-serif;
font-size: 1.6em;
text-transform: uppercase; }
.tile.tile--tip .tile__tip h2 hr {
margin: 20px 0; }
.tile.tile--tip .tile__tip h2 .channelAdvisor {
margin: 15px 10px 0px 10px; }
.tile.tile--tip .tile__tip h2 .channelAdvisor li {
border: 1px solid #000;
width: 100%;
padding: 10px;
margin-bottom: 10px;
height: 60px;
line-height: 38px;
overflow: hidden; }
.tile.tile--tip .tile__tip h2 .channelAdvisor li .shopName {
font-size: 14px; }
.tile.tile--tip .tile__tip h2 .channelAdvisor li .price {
float: right;
font-size: 14px; }
.tile.tile--tip .tile__tip h2 .channelAdvisor li .button {
float: right;
margin-left: 20px;
background-color: #000;
color: #fff;
display: inline-block;
border: 0 none;
padding: 0 15px;
text-transform: uppercase;
text-align: center;
cursor: pointer;
border-radius: 0; }
.tile.tile--tip .tile__tip .product__info__buy a {
margin-top: 14px; }
.tile.tile--tip .tile__tip .community__box {
margin-top: 30px; }
.tile.tile--tip .tile__tip .shades {
position: relative;
margin-bottom: 15px;
background: none;
padding-top: 0; }
.tile.tile--tip .tile__tip .shades .filters {
margin: 0 -75px 5px; }
.tile.tile--tip .tile__tip .shades .filters p {
display: inline-block;
margin-right: 10px;
text-transform: capitalize; }
.tile.tile--tip .tile__tip .shades .grid--shades {
min-height: 60px;
width: 450px;
margin: 0;
padding: 10px 10px 45px; }
.tile.tile--tip .tile__tip .shades .shade {
cursor: pointer; }
.tile.tile--tip .tile__tip .shades .shade:hover:before {
transition: visibility 0.1s 0s; }
.tile.tile--tip .tile__tip .shades .shade.active:before {
visibility: visible; }
.tile.tile--tip .tile__tip .shades .shade__description {
margin: 0;
position: absolute;
bottom: 10px;
left: 12.5px;
z-index: 50; }
.tile.tile--tip .tile__tip .product__info__shade .shade__elements {
display: inline-block;
width: 100%; }
.tile.tile--tip .tile__tip .product__info__shade .shade__elements div {
float: left;
text-align: center;
margin-right: 10px;
min-height: 70px; }
.tile.tile--tip .tile__tip .product__info__shade .shade__elements div.shade__big {
width: 190px;
margin-right: 20px; }
.tile.tile--tip .tile__tip .product__info__shade .shade__elements div img {
display: block;
text-align: left;
margin-bottom: 5px; }
.tile.tile--tip .tile__tip .product__info__shade p {
margin: 0; }
.tile.tile--tip .tile__tip .product__info__shade p.shade__description {
font-weight: 700; }
.tile.tile--tip .tile__tip .product__info__shade a {
margin-top: 5px; }
.tile.tile--tip .tile__tip .product__info__shade span {
font-family: "ClanNarrowMedium", sans-serif; }
.tile.tile--tip .tile__tip p {
font-size: 1.2em;
line-height: 16px;
margin: 0;
max-height: 145px;
overflow: hidden; }
.tile.tile--tip .tile__like {
width: 100%;
text-align: center;
margin-top: 20px; }
.tile.tile--tip .tile__like p {
display: inline-block;
margin: 0;
position: relative; }
.tile.tile--tip .tile__like p > * {
font-size: 1.2em;
color: #fff;
text-transform: uppercase;
text-decoration: none; }
.tile.tile--tip .tile__like p:before, .tile.tile--tip .tile__like p:after {
content: "";
position: absolute;
width: 68px;
height: 1px;
top: 5px; }
.tile.tile--tip .tile__like p:before {
left: -72px; }
.tile.tile--tip .tile__like p:after {
right: -72px; }
.tile.tile--tip .tile__like span {
display: inline-block;
padding: 0 0 0 15px;
position: relative; }
.tile.tile--tip .tile__like span:before {
content: "";
background-image: url(../i/sprites/sprite.png);
background-position: -129px -108px;
width: 11px;
height: 10px;
position: absolute;
left: 0; }
.tile.tile--tip .tile__like a {
position: relative;
padding-left: 14px; }
.tile.tile--tip .tile__like a:before {
content: "";
background-image: url(../i/sprites/sprite.png);
background-position: -224px -139px;
width: 4px;
height: 4px;
position: absolute;
top: 5.5px;
left: 3.5px; }
.tile.tile--quote:before {
content: "";
background-image: url(../i/sprites/sprite.png);
background-position: -145px 0px;
width: 37px;
height: 77px;
position: absolute;
top: 10px;
left: 10px; }
.tile.tile--quote .tile__tip {
height: 195px;
padding: 10px 12px;
margin-top: 52px; }
.tile.tile--quote .tile__tip:before {
content: "";
background-image: url(../i/sprites/sprite.png);
background-position: -92px -71px;
width: 37px;
height: 77px;
position: absolute;
bottom: 10px;
right: 10px; }
.tile.tile--quote .tile__tip > div {
display: table;
width: 100%;
height: 100%; }
.tile.tile--quote .tile__tip p {
font-family: "ClanNarrowBook", sans-serif;
font-size: 1.4em;
text-transform: uppercase;
line-height: 20px;
max-height: auto;
display: table-cell;
vertical-align: middle; }
.tile.tile--video .play {
background-image: url(../i/sprites/sprite.png);
background-position: 0px -71px;
width: 92px;
height: 92px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -46px;
margin-left: -46px; }
.tile .label__category {
display: none;
font-family: "ClanNarrowMedium", sans-serif;
text-align: right;
font-size: 1.2em;
padding: 5px 10px;
margin-left: 30px;
position: absolute;
top: 10px;
right: 0;
z-index: 20;
border-radius: 0 0 0 5px; }
.tile .tile__mask {
cursor: pointer;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 10;
display: block;
opacity: 0;
transition: all 0.3s; }
.tile .tile__info {
padding: 13px 10px 10px;
width: 100%;
min-height: 70px;
position: absolute;
bottom: 0;
left: 0;
z-index: 9;
overflow: hidden;
display: table; }
.tile .tile__info .tile__blur {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden; }
.tile .tile__info .tile__blur:after {
content: ' ';
background: url("../i/layout/glass.png") 0 0 no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 110%;
background-size: cover; }
.tile .tile__info .tile__blur img {
position: absolute;
left: 0;
bottom: 0;
-moz-filter: blur(3px);
-ms-filter: blur(3px);
-o-filter: blur(3px);
filter: blur(3px); }
.tile .tile__info h2 {
color: #481a65 !important; }
.tile .tile__info h2:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2); }
.tile .tile__info .button {
position: absolute;
top: -35px;
right: 0; }
.tile .tile__info .tile__info--text {
font-family: "ClanNarrowMedium", sans-serif;
display: table-cell;
vertical-align: middle; }
.tile .tile__info .tile__info--text h2 {
font-size: 1.5em;
text-transform: uppercase;
margin-bottom: 0;
line-height: 16px; }
.tile .tile__info .tile__info--text .tag {
display: none; }
.tile .tile__info .tile__info--expert {
font-family: "ClanNarrowMedium", sans-serif;
display: table-cell;
vertical-align: middle; }
.tile .tile__info .tile__info--expert h2 {
font-size: 1.5em;
text-transform: uppercase;
margin: 0; }
.tile .tile__info .tile__info--expert h2 span {
font-size: 0.8em;
display: block;
margin-top: 5px; }
.tile .tile__info .info--community {
display: none; }
.tile:hover .tile__mask {
opacity: 0.1;
transition: all 0.3s; }
.tile.tile--proseries .label__category {
background: #ad192a; }
.tile.tile--proseries h2 {
color: #ad192a; }
.tile.tile--wellaflex .label__category {
background: #8f7549; }
.tile.tile--wellaflex h2 {
color: #8f7549; }
.tile.tile--silvikrin .tile__front {
background: #0c6f52; }
.tile.tile--silvikrin .label__category {
background: #8f7549; }
.tile.tile--silvikrin h2 {
color: #8f7549; }
.tile.tile--koleston .label__category {
background: #663977; }
.tile.tile--koleston h2 {
color: #663977; }
.tile.tile--wellaton .label__category {
background: #663977; }
.tile.tile--wellaton h2 {
color: #663977; }
.tile.tile--wellaton a {
display: block;
position: relative;
z-index: 15; }
.tile.tile--softcolor .label__category {
background: #16408a; }
.tile.tile--softcolor h2 {
color: #16408a; }
.tile.tile--collection a {
display: block;
width: 100%;
height: 300px;
position: relative;
z-index: 10;
cursor: pointer; }
.tile.tile--collection .tile__front {
position: relative;
z-index: 40; }
.tile.tile--collection .tile__mask {
z-index: 20;
transition: z-index 0s 0.3s, opacity 0.3s; }
.tile.tile--collection:hover .tile__mask {
opacity: 0.3;
transition: z-index 0s 0s, opacity 0.3s;
z-index: 5; }
.tile.tile--collection.tile--collection--single .brand_logo {
position: absolute;
top: 15px;
right: 15px; }
.tile.tile--collection.tile--collection--single a img {
position: relative;
top: -25px; }
.tile.tile--collection.tile--collection--single a .button {
text-align: center;
max-height: 50px;
max-width: 240px;
position: absolute;
bottom: 0;
left: 0;
transition: all 0.2s; }
.tile.tile--collection.tile--collection--single a .button span {
display: block;
text-transform: none;
max-height: 0;
opacity: 0;
transition: all 0.2s; }
.tile.tile--collection.tile--collection--single:hover .button {
max-height: 70px;
background: #cc0033;
transition: all 0.3s; }
.tile.tile--collection.tile--collection--single:hover .button span {
max-height: 12px;
opacity: 1;
transition: all 0.3s; }
.tile.tile--collection.tile--collection--shade img {
position: relative;
left: -27px;
width: auto; }
.tile.tile--collection.tile--collection--shade .flexbox {
position: absolute;
top: 0;
left: 0; }
.tile.tile--collection.tile--collection--shade .flexbox__item {
height: 300px;
padding-left: 165px; }
.tile.tile--collection.tile--collection--shade .shade-text {
color: #fff; }
.tile.tile--collection.tile--collection--shade .shade-text.shade-text--title {
font-family: "ClanNarrowMedium", sans-serif;
font-size: 2.1em; }
.tile.tile--collection.tile--collection--shade .shade-text.shade-text--name {
font-family: "ClanNarrowMedium", sans-serif;
font-size: 1.5em;
margin: 25px 0; }
.tile.tile--collection.tile--collection--shade:hover .button {
background: #cc0033; }
.tile.tile--hover {
overflow: visible;
z-index: 1; }
.tile.tile--hover .tile__back {
height: 300px;
display: table;
position: absolute;
top: 0;
z-index: 20;
opacity: 0;
transition: all 0.3s 0.2s; }
.tile.tile--hover .tile__back .tile__back__wrapper {
display: table-cell;
vertical-align: middle;
padding: 0 25px 0 35px; }
.tile.tile--hover .tile__back h2 {
font-family: "ClanNarrowMedium", sans-serif;
font-size: 2em;
text-transform: uppercase;
color: #000;
margin-bottom: 10px; }
.tile.tile--hover .tile__back p {
font-size: 1.2em;
color: #000;
line-height: 16px; }
.tile.tile--hover .tile__back a {
width: auto;
height: auto; }
.tile.tile--hover .tile__back .close {
width: 20px;
height: 20px;
position: absolute;
top: 0;
cursor: pointer; }
.tile.tile--hover .tile__back .close:before {
content: "";
position: absolute;
background-image: url(../i/sprites/sprite.png);
background-position: -145px -98px;
width: 20px;
height: 20px; }
.tile.tile--hover .tile__back--left {
left: 30px;
width: 304px; }
.tile.tile--hover .tile__back--left .close {
right: 0; }
.tile.tile--hover .tile__back--right {
left: 30px;
width: 304px; }
.tile.tile--hover .tile__back--right .close {
left: 0; }
.tile.tile--hover.active {
z-index: 100;
transition: z-index 0.1s 0s; }
.tile.tile--hover.active .tile__back {
opacity: 1;
transition: all 0.3s 0.2s; }
.tile.tile--hover.active .tile__back--left {
left: 334px;
width: 344px; }
.tile.tile--hover.active .tile__back--left .close {
right: 0; }
.tile.tile--hover.active .tile__back--right {
left: -344px;
width: 344px; }
.tile.tile--hover.active .tile__back--right .close {
left: 0; }
.tile.tile--hover.tile--proseries .tile__back {
background: #ffe2e2; }
.tile.tile--hover.tile--proseries .close {
background: #ad192a;
background: rgba(173, 25, 42, 0.7); }
.tile.tile--hover.tile--wellaflex .tile__back {
background: #feeee0; }
.tile.tile--hover.tile--wellaflex .close {
background: #8f7549;
background: rgba(143, 117, 73, 0.7); }
.tile.tile--hover.tile--silvikrin .tile__back {
background: #0c6f52; }
.tile.tile--hover.tile--silvikrin .close {
background: #074130; }
.tile.tile--hover.tile--koleston .tile__back {
background: #f2edfe; }
.tile.tile--hover.tile--koleston .close {
background: #663977;
background: rgba(102, 57, 119, 0.7); }
.tile.tile--hover.tile--softcolor .tile__back {
background: #fcf1d5; }
.tile.tile--hover.tile--softcolor .close {
background: #16408a;
background: rgba(22, 64, 138, 0.7); }
.tile:hover {
z-index: 2; }
.tile:hover .label__category {
background: #cc0033;
transition: background 0.3s; }
.ie8 .tile .tile__like p:before {
background: url(../i/layout/ie/layout_gradient_line_red_left.png); }
.ie8 .tile .tile__like p:after {
background: url(../i/layout/ie/layout_gradient_line_red_right.png); }
.ie8 .tile.tile--collection .tile__mask {
visibility: visible; }
/* TILES SHADES */
.shades {
padding-top: 20px;
background: #fff; }
.shades .filters {
margin: 0 0 10px;
text-align: center; }
.shades .filters span {
font-family: "ClanNarrowBook", sans-serif;
font-size: 1.4em;
color: #000;
text-align: right;
line-height: 28px;
width: 70px;
position: absolute;
left: 0; }
.shades .filters .select-label {
margin: 0;
position: relative; }
.shades .filters .styled-select-wrapper {
background: none;
border-right: 2px solid #eaeaea; }
.shades .filters .styled-select-text {
font-weight: 700;
padding-left: 75px; }
.shades .tiles--shades {
position: relative;
border-top: 1px solid #663977;
border-bottom: 1px solid #663977; }
.shades .tiles--shades .shade {
width: 25px;
height: 25px;
margin: 2.5px;
z-index: 1;
position: relative;
float: left;
transition: z-index 0.1s; }
.shades .tiles--shades .shade:before, .shades .tiles--shades .shade.active:before {
content: "";
width: 29px;
height: 29px;
background: #663977;
position: absolute;
top: -2px;
left: -2px;
z-index: -1;
visibility: hidden;
border-radius: 2px;
transition: visibility 0.1s; }
.shades .tiles--shades .shade .flyout__content {
display: inline-block;
width: 210px;
height: 70px;
padding: 10px 5px 10px 10px;
background: #fff;
font-size: 1.6em;
color: #663977;
position: absolute;
top: -60px;
left: -92.5px;
box-shadow: rgba(0, 0, 0, 0.4) 0 4px 14px;
visibility: hidden;
transition: visibility 0.1s; }
.shades .tiles--shades .shade .flyout__content:after {
content: "";
position: absolute;
background-image: url(../i/sprites/sprite.png);
background-position: -155px -131px;
width: 16px;
height: 9px;
bottom: -8px;
left: 50%;
margin-left: -155px, 131px, -155px, -131px, 16px, 9px, 235px, 215px, "../i/sprites/sprite.png", "layout_shades_arrow_down"; }
.shades .tiles--shades .shade .flyout__content img {
width: 50px;
max-width: none;
height: 50px; }
.shades .tiles--shades .shade:hover {
z-index: 2;
transition: z-index 0.1s 0.2s; }
.shades .tiles--shades .shade:hover:before {
visibility: visible;
transition: visibility 0.1s 0.2s; }
.shades .tiles--shades .shade:hover .flyout__content {
position: absolute;
top: -60px;
left: -92.5px;
visibility: visible;
transition: visibility 0.1s 0.2s; }
.shades .tiles--shades .flyout__content__tier {
display: table;
width: 100%; }
.shades .tiles--shades .flyout__content__tier p {
display: table-cell;
vertical-align: middle;
padding-left: 10px; }
/* ISOTOPE */
.isotope-item {
transition-property: transform, opacity;
transition-duration: 0.8s; }
.no-transition .isotope-item,
.isotope-item.no-transition {
transition-duration: 0s; }
.grid--filter.isotope {
transition-property: height, width;
transition-duration: 0.8s; }
.grid--filter.isotope .isotope-item {
transition-property: all;
transition-duration: 0.8s; }
.grid--filter.isotope.no-transition,
.grid--filter.isotope.no-transition .isotope-item,
.grid--filter.isotope .isotope-item.no-transition {
transition-duration: 0s; }
/* BANNER */
.banner {
position: relative;
overflow: hidden;
height: 424px; }
.banner.banner--small {
height: 300px;
margin-top: 10px; }
.banner.banner--small .banner__claim h1 {
margin-bottom: 0; }
.banner.banner--register {
margin-top: 0 !important;
margin-bottom: 10px;
height: 317px !important; }
.banner.banner--register .banner__claim__wrapper {
float: none;
width: 100%; }
.banner.banner--register .banner__claim__wrapper .banner__claim {
vertical-align: bottom; }
.banner.banner--register .banner__claim__wrapper h1 {
padding-left: 25px;
font-size: 6em;
line-height: 50px;
margin-bottom: 30px;
font-family: "ClanNarrowMedium", sans-serif; }
.banner.banner--proseries .banner__text {
width: 214px; }
.banner.banner--wellaflex .banner__text {
width: 231px; }
.banner.banner--koleston .banner__text {
width: 216px; }
.banner.banner--alert {
height: auto;
min-height: 223px;
padding-bottom: 25px;
text-align: center;
font-family: "ClanNarrowMedium", sans-serif;
background: #f7ecef;
border-radius: 0 0 0 30px; }
.banner.banner--alert h1 {
font-size: 3.7em;
text-transform: uppercase;
color: #d0043c;
margin-top: 50px; }
.banner.banner--alert p {
text-transform: uppercase;
font-size: 1.5em;
line-height: 20px;
padding-bottom: 11px; }
.banner.banner--alert ul {
text-transform: uppercase;
font-size: 1.5em;
text-align: left;
margin: 0 120px 20px;
list-style-position: inside; }
.banner.banner--alert ul li {
line-height: 1.4; }
.banner > img {
position: absolute; }
.banner.banner--error {
background: url("../i/layout/pattern_red_bg.png");
border-radius: 0 0 30px 0;
height: 320px;
color: #fff; }
.banner.banner--error h1 {
color: #fff;
font-size: 8.5em;
margin: 75px 0 0 0; }
.banner.banner--error p {
font-family: "ClanNarrowMedium", sans-serif; }
.banner .banner__claim__wrapper {
position: relative;
display: table;
width: 335px;
height: 100%;
float: right; }
.banner .banner__claim {
display: table-cell;
vertical-align: middle; }
.banner .banner__claim img {
margin-bottom: 20px; }
.banner .banner__claim h1 {
font-family: "ClanNarrowNews", sans-serif;
font-size: 2em;
color: #fff;
text-transform: uppercase;
margin: 0 0 20px; }
.banner .banner__claim h1 span {
display: block;
text-transform: initial; }
.banner .banner__claim .button {
margin-bottom: 10px; }
.banner .banner__claim .button:last-child {
margin-bottom: 0; }
/* TITLE */
.title {
font-family: "ClanNarrowBook", sans-serif;
font-weight: 400;
text-transform: uppercase; }
.title.title--profile {
font-size: 3.6em;
margin-bottom: 20px; }
.title.title--mode1 {
font-size: 4.5em;
margin: 30px 0 20px; }
.title.title--mode2 {
font-size: 3.6em;
margin: 45px 0 10px; }
.title.title--proseries {
color: #ad192a; }
.title.title--wellaflex {
color: #8f7549; }
.title.title--koleston {
color: #663977; }
.title.title--softcolor {
color: #16408a; }
.title.title--mode3 {
font-family: "ClanNarrowMedium", sans-serif;
font-size: 2em;
padding: 10px 12px;
color: #fff;
margin: 0; }
.title.title--mode3.title--wellaton {
color: #fff; }
.title.title--mode4 {
font-size: 3em;
color: #fff;
text-align: center;
background: #d0043c url("../i/layout/pattern_pink_bg.png") 0 0 repeat; }
.title.title--mode5 {
font-size: 3.6em;
color: #d0043c; }
.title.title--comments {
color: #d0043c;
padding-left: 25px;
font-size: 1.8em;
font-family: "ClanNarrowMedium", sans-serif; }
.title.title--sitemap {
font-size: 2em;
font-family: "ClanNarrowMedium", sans-serif;
color: #fff;
padding: 5px 10px;
margin-top: 10px;
background: url("../i/layout/pattern_pink_bg.png") 0 0 repeat; }
.title.title--tips {
font-size: 2.6em;
font-family: "ClanNarrowMedium", sans-serif;
color: #d0043c; }
.title.title--reviews {
font-size: 2.4em;
margin: 0; }
.title.title--mode6 {
font-size: 2em;
font-family: "ClanNarrowMedium", sans-serif;
margin: 0; }
.title.title--mode7 {
font-size: 1.4em;
font-family: "ClanNarrowMedium", sans-serif;
margin: 0; }
/* COMMUNITY */
.recommended {
color: #000;
position: relative;
padding-left: 14px;
float: left; }
.recommended:before {
content: "";
position: absolute;
left: 0;
top: 0;
background-image: url(../i/sprites/sprite.png);
background-position: -102px -148px;
width: 10px;
height: 9px; }
.vote {
display: inline-block;
position: relative;
margin-top: 30px;
cursor: pointer; }
.vote:first-child {
margin-top: 0; }
.vote .vote__title {
font-weight: 700;
text-transform: uppercase;
margin: 0;
position: absolute;
top: -10px; }
.vote .vote__number {
color: #d0043c;
position: absolute;
top: 0;
left: 75px; }
.vote.vote--heart {
background-image: url(../i/sprites/sprite.png);
background-position: -70px -185px;
width: 70px;
height: 9px; }
.vote.vote--heart .vote__range {
background-image: url(../i/sprites/sprite.png);
background-position: 0px -185px;
width: 70px;
height: 9px;
background-repeat: no-repeat; }
.vote.vote--rect {
background-image: url(../i/sprites/sprite.png);
background-position: 0px -194px;
width: 70px;
height: 9px; }
.vote.vote--rect .vote__range {
background-image: url(../i/sprites/sprite.png);
background-position: -140px -185px;
width: 70px;
height: 9px;
background-repeat: no-repeat; }
.vote.vote--big.vote--heart {
background-image: url(../i/sprites/sprite.png);
background-position: -90px -163px;
width: 90px;
height: 11px; }
.vote.vote--big.vote--heart .vote__range {
background-image: url(../i/sprites/sprite.png);
background-position: -90px -174px;
width: 90px;
height: 11px;
background-repeat: no-repeat; }
.vote.vote--big.vote--rect {
background-image: url(../i/sprites/sprite.png);
background-position: 0px -174px;
width: 90px;
height: 11px; }
.vote.vote--big.vote--rect .vote__range {
background-image: url(../i/sprites/sprite.png);
background-position: 0px -163px;
width: 90px;
height: 11px;
background-repeat: no-repeat; }
.vote.vote--0 .vote__range {
width: 0; }
.vote.vote--1 .vote__range {
width: 20%; }
.vote.vote--2 .vote__range {
width: 40%; }
.vote.vote--3 .vote__range {
width: 60%; }
.vote.vote--4 .vote__range {
width: 80%; }
.vote.vote--5 .vote__range {
width: 100%; }
.community.community--reviews {
padding-bottom: 110px;
position: relative;
z-index: 100; }
.community.community--reviews .community__box {
position: absolute;
top: -15px;
right: 1px; }
.community.community--reviews .community__box .nav--feed {
margin: 0; }
.community.community--reviews .vote {
cursor: default; }
.community.community--reviews .reviews__item {
background: #f7ecef;
display: inline-block;
margin-top: 8px; }
.community.community--reviews .reviews__vote,
.community.community--reviews .reviews__body {
padding: 20px;
min-height: 140px; }
.community.community--reviews .reviews__vote {
width: 172px; }
.community.community--reviews .reviews__body {
width: 848px;
border-left: 2px solid #fff; }
.community.community--reviews .reviews__title,
.community.community--reviews .reviews__desc {
font-size: 1.2em;
padding-right: 110px; }
.community.community--reviews .reviews__title {
font-weight: 700; }
.community.community--reviews .reviews__desc {
color: #333;
line-height: 16px;
margin: 15px 0 0; }
.community.community--reviews .recommended,
.community.community--reviews .report {
margin: 15px 0 0; }
.community.community--reviews .pagination {
margin-top: 20px; }
.community__box .nav--social {
margin: 0;
position: relative;
height: 24px; }
.community__box .nav--social:before, .community__box .nav--social:after {
content: "";
width: 133px;
height: 1px;
position: absolute;
top: 8.5px; }
.community__box .nav--social:before {
left: 0; }
.community__box .nav--social:after {
right: 0; }
.community__box .nav--social li {
margin-left: 18px; }
.community__box .nav--social li:first-child {
margin-left: 0; }
.community__box .nav--social a {
font-size: 0.9em;
color: #cc0033;
position: relative;
text-decoration: none;
display: block;
width: 100%;
height: 100%; }
.community__box .nav--social a strong {
display: inline-block;
text-indent: -9999px; }
.community__box .nav--social a span {
display: inline-block;
height: 18px;
line-height: 18px;
background: #fff;
border-top: 1px solid #cc0033;
border-bottom: 1px solid #cc0033;
margin-left: 10px;
padding: 0 4px;
position: relative; }
.community__box .nav--social a span:before, .community__box .nav--social a span:after {
content: "";
display: inline-block;
position: absolute;
top: 0; }
.community__box .nav--social a span:before {
background-image: url(../i/sprites/sprite.png);
background-position: -224px -122px;
width: 6px;
height: 17px;
left: -6px; }
.community__box .nav--social a span:after {
background-image: url(../i/sprites/sprite.png);
background-position: -232px -27px;
width: 2px;
height: 17px;
right: -2px; }
.community__box .nav--social a:before {
content: "";
display: inline-block;
position: absolute;
top: 0;
left: 0; }
.community__box .nav--social .facebook {
height: 22px; }
.community__box .nav--social .facebook span {
margin-left: 20px; }
.community__box .nav--social .facebook a:before {
background-image: url(../i/sprites/sprite.png);
background-position: -145px -118px;
width: 10px;
height: 22px;
top: -2px; }
.community__box .nav--social .vkontakte {
height: 24px; }
.community__box .nav--social .vkontakte span {
margin-left: 34px; }
.community__box .nav--social .vkontakte a:before {
background-image: url(../i/sprites/sprite.png);
background-position: -182px -75px;
width: 24px;
height: 24px;
top: -3px; }
.community__box .nav--social .twitter {
height: 22px; }
.community__box .nav--social .twitter span {
margin-left: 31px; }
.community__box .nav--social .twitter a:before {
background-image: url(../i/sprites/sprite.png);
background-position: -182px -122px;
width: 21px;
height: 22px;
top: -2px; }
.community__box .nav--social .pinterest {
height: 22px; }
.community__box .nav--social .pinterest span {
margin-left: 27px; }
.community__box .nav--social .pinterest a:before {
background-image: url(../i/sprites/sprite.png);
background-position: -213px -50px;
width: 17px;
height: 22px;
top: -2px; }
.community__box .nav--social .youtube {
height: 23px; }
.community__box .nav--social .youtube span {
margin-left: 34px; }
.community__box .nav--social .youtube a:before {
background-image: url(../i/sprites/sprite.png);
background-position: -182px -99px;
width: 24px;
height: 23px;
top: -2.5px; }
.community__box .nav--social .instagram {
height: 22px; }
.community__box .nav--social .instagram span {
margin-left: 31px; }
.community__box .nav--social .instagram a:before {
background-image: url(../i/sprites/sprite.png);
background-position: -203px -122px;
width: 21px;
height: 22px;
top: -2px; }
.community__box .nav--social .www {
height: 21px; }
.community__box .nav--social .www span {
margin-left: 30px; }
.community__box .nav--social .www a:before {
background-image: url(../i/sprites/sprite.png);
background-position: -145px -77px;
width: 20px;
height: 21px;
top: -1.5px; }
.community__box .nav--social-icons:before, .community__box .nav--social-icons:after {
top: 10.5px; }
.community__box .nav--social-icons .vkontakte {
width: 24px; }
.community__box .nav--social-icons .facebook {
width: 10px; }
.community__box .nav--social-icons .twitter {
width: 21px; }
.community__box .nav--social-icons .pinterest {
width: 17px; }
.community__box .nav--social-icons .youtube {
width: 24px; }
.community__box .nav--social-icons .instagram {
width: 21px; }
.community__box .nav--social-icons .www {
width: 20px; }
.community__box .nav--feed {
margin-top: 20px; }
.community__box .nav--feed li {
margin-left: 22px; }
.community__box .nav--feed li:first-child {
margin-left: 0; }
.community__box .nav--feed a {
color: #000;
text-decoration: none;
text-transform: uppercase;
position: relative; }
.community__box .nav--feed a:before {
content: "";
position: absolute;
left: 0; }
.community__box .nav--feed .like a {
padding-left: 14px; }
.community__box .nav--feed .like a:before {
background-image: url(../i/sprites/sprite.png);
background-position: -171px -131px;
width: 10px;
height: 9px;
top: 0; }
.community__box .nav--feed .share a {
padding-left: 17px; }
.community__box .nav--feed .share a:before {
background-image: url(../i/sprites/sprite.png);
background-position: -145px -154px;
width: 13px;
height: 9px;
top: 0; }
.community__box .nav--feed .favorite a {
padding-left: 17px; }
.community__box .nav--feed .favorite a:before {
background-image: url(../i/sprites/sprite.png);
background-position: -168px -118px;
width: 13px;
height: 12px;
top: -3px; }
.community__box .nav--feed .review a {
padding-left: 14px; }
.community__box .nav--feed .review a:before {
background-image: url(../i/sprites/sprite.png);
background-position: -129px -138px;
width: 10px;
height: 10px;
top: 0; }
.community__box .nav--feed .write a {
padding-left: 15px; }
.community__box .nav--feed .write a:before {
background-image: url(../i/sprites/sprite.png);
background-position: -129px -86px;
width: 11px;
height: 11px;
top: 0; }
.community__box .nav--feed .read a {
padding-left: 15px; }
.community__box .nav--feed .read a:before {
background-image: url(../i/sprites/sprite.png);
background-position: -129px -97px;
width: 11px;
height: 11px;
top: 0; }
.community__box .nav--feed .more {
max-width: 130px; }
.community__box .nav--feed .more a {
padding-left: 8px; }
.community__box .nav--feed .more a:before {
background-image: url(../i/sprites/sprite.png);
background-position: -140px -71px;
width: 4px;
height: 7px;
top: 1px; }
.ie8 .community__box .nav--feed .more.hidden {
visibility: hidden; }
.community__box--single {
text-align: center;
margin-top: 15px;
padding: 5px 0; }
.community__box--single .nav--social {
display: inline-block; }
.community__box--single .nav--social:before {
left: -153px; }
.community__box--single .nav--social:after {
right: -153px; }
.info--community {
font-size: 1.2em;
position: absolute;
top: 10px;
right: 10px; }
.info--community a {
text-decoration: none;
display: inline-block;
width: 100%;
height: 100%; }
.info--community p {
float: left;
cursor: pointer; }
.info--community p:after {
content: "";
display: inline-block;
margin-left: 5px; }
.info--community p.comment {
color: #000;
margin-right: 5px; }
.info--community p.comment:after {
background-image: url(../i/sprites/sprite.png);
background-position: -129px -118px;
width: 11px;
height: 10px; }
.info--community p.like {
color: #d0043c; }
.info--community p.like:after {
background-image: url(../i/sprites/sprite.png);
background-position: -171px -131px;
width: 10px;
height: 9px; }
.ie8 .community__box .nav--social:before {
background: url(../i/layout/ie/layout_gradient_line_red_left_long.png); }
.ie8 .community__box .nav--social:after {
background: url(../i/layout/ie/layout_gradient_line_red_right_long.png); }
/* PRODUCT */
.product {
display: inline-block;
height: auto;
width: 100%;
border-radius: 30px 0 0 0;
position: relative;
overflow: hidden; }
.product .product__packshot {
width: 402px;
height: 100%;
float: left;
position: relative; }
.product .product__packshot img {
width: 100%;
overflow: auto;
margin: auto;
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0; }
.product .product__info__wrapper {
display: table;
width: 620px;
height: auto;
position: relative;
float: right; }
.product .product__info {
display: table-cell;
vertical-align: middle;
padding: 0 75px;
color: #000; }
.product .product__info .hair__information,
.product .product__info .spray__information {
display: none; }
.product .product__info .hair__information strong,
.product .product__info .spray__information strong {
font-size: 15px; }
.product .product__info .spray {
top: 40px !important;
left: -270px !important; }
.product .product__info p {
font-size: 1.2em;
line-height: 16px; }
.product .product__info h4 {
font-family: "ClanNarrowMedium", sans-serif;
font-size: 1.6em;
text-transform: uppercase; }
.product .product__info hr {
margin: 20px 0; }
.product .product__info .channelAdvisor {
margin: 15px 10px 0px 10px; }
.product .product__info .channelAdvisor li {
border: 1px solid #000;
width: 100%;
padding: 10px;
margin-bottom: 10px;
height: 60px;
line-height: 38px;
overflow: hidden; }
.product .product__info .channelAdvisor li .shopName {
font-size: 14px; }
.product .product__info .channelAdvisor li .price {
float: right;
font-size: 14px; }
.product .product__info .channelAdvisor li .button {
float: right;
margin-left: 20px;
background-color: #000;
color: #fff;
display: inline-block;
border: 0 none;
padding: 0 15px;
text-transform: uppercase;
text-align: center;
cursor: pointer;
border-radius: 0; }
.product .reviews__box {
margin-bottom: 15px;
height: 127px; }
.product .reviews__box .button--underline {
margin-left: 10px; }
.product .reviews__box .vote {
cursor: default; }
.product .product__info__buy a {
margin-top: 14px; }
.product .community__box {
margin-top: 30px; }
.product .shades {
position: relative;
margin-bottom: 15px;
background: none;
padding-top: 0; }
.product .shades .filters {
margin: 0 -75px 5px; }
.product .shades .filters p {
display: inline-block;
margin-right: 10px;
text-transform: capitalize; }
.product .shades .grid--shades {
min-height: 60px;
width: 450px;
margin: 0;
padding: 10px 10px 45px; }
.product .shades .shade {
cursor: pointer; }
.product .shades .shade:hover:before {
transition: visibility 0.1s 0s; }
.product .shades .shade.active:before {
visibility: visible; }
.product .shades .shade__description {
margin: 0;
position: absolute;
bottom: 10px;
left: 12.5px;
z-index: 50; }
.product .product__info__shade .shade__elements {
display: inline-block;
width: 100%; }
.product .product__info__shade .shade__elements div {
float: left;
text-align: center;
margin-right: 10px;
min-height: 70px; }
.product .product__info__shade .shade__elements div.shade__big {
width: 190px;
margin-right: 20px; }
.product .product__info__shade .shade__elements div img {
display: block;
text-align: left;
margin-bottom: 5px; }
.product .product__info__shade p {
margin: 0; }
.product .product__info__shade p.shade__description {
font-weight: 700; }
.product .product__info__shade a {
margin-top: 5px; }
.product.product--wellaflex {
background: #feeee0; }
.product.product--silvikrin .product__packshot {
background: #0c6f52; }
.product.product--koleston hr {
margin: 10px 0 15px; }
.product.product--koleston .product__info__shade p {
color: #663977; }
.product.product--koleston .product__info__buy a {
margin-top: 9px; }
.product.product--koleston .product__info__buy a:first-child {
margin: 0; }
.product.product--wellaton .product__info__shade p {
color: #663977; }
.product.product--softcolor {
height: 538px; }
.product.product--softcolor hr {
margin: 10px 0 15px; }
.product.product--softcolor .shades .tiles--shades {
border-color: #16408a; }
.product.product--softcolor .shades .tiles--shades .shade:before, .product.product--softcolor .shades .tiles--shades .shade.active:before {
background: #16408a; }
.product.product--softcolor .product__info__shade p {
color: #16408a; }
.product.product--softcolor .product__info__buy a {
margin-top: 9px; }
.product.product--softcolor .product__info__buy a:first-child {
margin: 0; }
/* REGISTER */
.page--signin .form__messages,
.page--registration .form__messages {
padding: 25px 0 0 0; }
.page--signin .form__messages a,
.page--registration .form__messages a {
text-decoration: underline;
color: #000; }
.form__wrapper--loginPage .form__box {
min-height: 275px;
height: 100%; }
.form__box {
width: 507px;
min-height: 395px;
height: 100%;
padding: 20px 25px;
float: left;
background: #f7ecef;
border-radius: 0 0 0 30px;
/* PROFILE */ }
.form__box .button {
float: right;
margin-top: 20px; }
.form__box .select-label {
width: 307px;
vertical-align: text-top; }
.form__box .select-label.select-label--left {
margin-right: 0px; }
.form__box .select-label.small {
width: 100px; }
.form__box .select-label .styled-select-wrapper {
border: 0; }
.form__box h2 {
color: #cc0033;
text-transform: uppercase;
font-family: "ClanNarrowMedium", sans-serif;
margin: 0 -25px 30px -25px;
padding: 0 25px 15px 25px;
font-size: 1.8em;
border-bottom: 1px solid #fff; }
.form__box.form__box--left {
margin-right: 8px; }
.form__box dt {
float: left;
clear: left;
width: 150px;
font-size: 1.4em; }
.form__box dt label {
text-transform: uppercase;
line-height: 28px;
font-family: "ClanNarrowMedium", sans-serif; }
.form__box dd {
margin: 0 0 12px 150px; }
.form__box .forgotPassword {
text-decoration: none;
color: #000;
font-size: 1.2em;
text-transform: lowercase;
padding-top: 5px;
display: inline-block;
font-family: "ClanNarrowMedium", sans-serif; }
.form__box + .disclaimer {
display: inline-block;
width: 100%; }
.form__box + .disclaimer .form__disclaimer {
display: inline-block;
margin-top: 25px;
width: 50%;
float: right; }
.form__box .button {
float: right;
margin-top: 20px; }
.form__box .select-label {
width: 307px;
vertical-align: text-top; }
.form__box .select-label.select-label--left {
margin-right: 10px; }
.form__box .select-label.small {
width: 147px; }
.form__box .select-label .styled-select-wrapper {
border: 0; }
.form__box h2 {
color: #cc0033;
text-transform: uppercase;
font-family: "ClanNarrowMedium", sans-serif;
margin: 0 -25px 30px -25px;
padding: 0 25px 15px 25px;
font-size: 1.8em;
border-bottom: 1px solid #fff; }
.form__box.form__box--left {
margin-right: 8px; }
.form__box dt {
float: left;
clear: left;
width: 150px;
font-size: 1.4em; }
.form__box dt label {
text-transform: uppercase;
line-height: 28px;
font-family: "ClanNarrowMedium", sans-serif; }
.form__box dd {
margin: 0 0 12px 150px; }
.form__box .forgotPassword {
text-decoration: none;
color: #000;
font-size: 1.2em;
text-transform: lowercase;
padding-top: 5px;
display: inline-block;
font-family: "ClanNarrowMedium", sans-serif; }
.form__box + .disclaimer {
display: inline-block;
width: 100%; }
.form__box + .disclaimer .form__disclaimer {
display: inline-block;
margin-top: 25px;
width: 50%;
float: right; }
.form__box.form__box--fullWidth {
width: 100%; }
.form__box.form__box--fullWidth .form__box__profileCustom {
width: 355px;
margin: 0 auto;
font-size: 1.2em; }
.form__box.form__box--fullWidth .form__box__profileCustom dt {
margin-left: -150px;
padding-right: 20px;
font-size: 1.1em;
text-align: right; }
.form__box.form__box--fullWidth .form__box__profileCustom dd {
margin-left: 0; }
.form__box.form__box--fullWidth .form__box__profileCustom ul,
.form__box.form__box--fullWidth .form__box__profileCustom li {
list-style: none;
margin: 0;
font-family: arial; }
.form__box.form__box--fullWidth .form__box__profileCustom li {
margin-bottom: 20px; }
.form__box.form__box--fullWidth .form__box__profileCustom .iText {
font-size: 1em; }
.form__box.form__box--fullWidth .form__box__profileCustom .picture {
margin-bottom: 5px; }
.form__box.form__box--fullWidth .form__box__profileCustom .picture img {
width: 240px;
height: 240px; }
.form__box.form__box--fullWidth .buttons {
float: right; }
.form__box.form__box--fullWidth .buttons .button {
float: none;
margin: 0 0 0 5px; }
.form__disclaimer {
margin-top: 25px;
line-height: 14px;
display: inline-block; }
.form__disclaimer .link {
color: inherit; }
.form__box--registerInfo {
font-family: "ClanNarrowMedium", sans-serif; }
.form__box--registerInfo p {
text-transform: uppercase;
font-size: 1.2em;
margin-bottom: 0;
line-height: 20px; }
.form__box--registerInfo span {
display: block;
font-size: 1.2em;
line-height: 20px; }
.form__box--registerInfo .button {
margin-top: 30px !important; }
.form__wrapper--loginPage .form__box .button {
margin-top: 50px; }
.form__wrapper--loginPage,
.form__wrapper--register {
width: 100%;
display: inline-block;
margin-bottom: 100px; }
.form__wrapper--register .form__box dt label {
text-transform: none; }
.form__wrapper--changePasswordPage .form__box {
float: none;
margin: 0 auto;
min-height: 300px; }
/* PROFILE */
.profile {
border: 1px solid #d0043c;
margin-bottom: 100px;
border-radius: 0 0 30px 0; }
.profile .buttons {
float: none;
text-align: center; }
.profile .buttons .button {
margin: 0 13px 0 13px; }
.profile .buttons:first-child {
margin: 0 13px 0 0; }
.profile .buttons .button--link-space {
float: none; }
.profile .buttons .button--link--delete:after {
background-image: url(../i/sprites/sprite.png);
background-position: -157px -140px;
width: 12px;
height: 12px; }
.profile.profile--editPost .iFile__wrapper {
margin-top: 10px; }
.profile .title {
line-height: 46px;
margin-bottom: 0; }
.profile ul,
.profile li {
list-style: none;
margin: 0; }
.profile li {
font-size: 1.2em;
margin-bottom: 25px;
position: relative; }
.profile .styled-checkbox-wrapper {
border: 1px solid #ccc; }
.profile .profile__container {
padding: 45px 98px; }
.profile .profile__container .picture__message {
display: block; }
.profile .profile__container .iText {
font-size: 1em;
border: 1px solid #ccc;
width: 100%;
height: 30px;
line-height: 30px; }
.profile .profile__container .profile--thanks--message {
text-align: center;
font-size: 1.2em;
display: block;
margin-bottom: 25px; }
.profile .profile__container textarea {
border: 1px solid #ccc;
width: 100%;
min-height: 100px;
padding: 5px 10px !important;
line-height: 16px !important; }
.profile .profile__container label {
padding-bottom: 15px;
text-transform: uppercase; }
.profile .profile__container hr {
width: 100%;
display: inline-block;
margin: 10px 0 20px 0; }
.profile .profile__container .iFile__wrapper {
margin-bottom: 6px; }
.profile .profile__container .iFile__wrapper .button--link {
padding-right: 35px; }
.profile .profile__container .iFile__wrapper .button--link:after {
right: 8px;
background-image: url(../i/sprites/sprite.png);
background-position: -219px -144px;
width: 13px;
height: 14px; }
.profile .profile__container img {
width: auto;
max-width: 824px;
display: block;
margin-bottom: 10px; }
.profile.profile--details {
margin-bottom: 35px; }
.profile.profile--details .frame__left {
width: 250px;
float: left;
text-align: center; }
.profile.profile--details .frame__left .picture img {
width: 240px;
height: 240px; }
.profile.profile--details .frame__left .iFile__wrapper {
margin-top: 15px; }
.profile.profile--details .frame__left .iFile__wrapper .button {
font-size: 1.1em;
font-family: "ClanNarrowMedium", sans-serif;
padding-right: 10px; }
.profile.profile--details .frame__left .iFile__wrapper .button:after {
background: none; }
.profile.profile--details .frame__right {
width: 465px;
float: right;
margin-right: 12px; }
.profile.profile--details .frame__right li {
border-top: 1px solid #ccc;
margin: 0;
padding: 10px 0; }
.profile.profile--details .frame__right li:first-child {
padding-top: 0;
border-top: 0; }
.profile.profile--details .frame__right li > * {
display: inline-block; }
.profile.profile--details .frame__right li .iText {
font-size: 1.2em;
color: #000;
height: 18px;
width: 220px;
line-height: 18px;
border: 0;
background: #fff;
padding: 0 5px !important; }
.profile.profile--details .frame__right li .iText:readonly {
color: #000; }
.profile.profile--details .frame__right li input[readonly] {
color: #000; }
.profile.profile--details .frame__right li .select-label {
width: 220px; }
.profile.profile--details .frame__right li .select-label .styled-select-wrapper {
height: 18px;
border: none; }
.profile.profile--details .frame__right li .select-label .styled-select-text {
color: #000;
font-size: 1.2em;
padding: 0 18px 0 5px; }
.profile.profile--details .frame__right li .select-label .styled-select-button {
width: 12px;
height: 100%;
right: 5px;
display: none; }
.profile.profile--details .frame__right li .select-label .styled-select-button:before {
background-image: url(../i/sprites/sprite.png);
background-position: -145px -140px;
width: 12px;
height: 14px;
margin-top: -7px; }
.profile.profile--details .frame__right li .select-label select {
font-size: 1.2em; }
.profile.profile--details .frame__right li .select-label.small {
width: 75px; }
.profile.profile--details .frame__right li .select-label.small.select-label--left {
width: 100px;
margin: 0 10px 0 0; }
.profile.profile--details .frame__right li label {
width: 145px;
padding: 0;
font-size: 1.1em;
font-family: "ClanNarrowBook", sans-serif; }
.profile.profile--details .frame__right li .edit {
text-decoration: none;
color: #d0043c;
background: none;
font-size: 1em;
padding: 2px 20px 2px 0;
position: absolute;
top: 0;
right: 0;
line-height: 34px; }
.profile.profile--details .frame__right li .edit:after {
background-image: url(../i/sprites/sprite.png);
background-position: -32px -203px;
width: 8px;
height: 12px; }
.profile.profile--details .frame__right li:first-child .edit {
line-height: 14px; }
.profile.profile--details .frame__right .check__wrap {
margin: 30px 0;
font-size: 1.2em; }
.profile.profile--details .frame__right .active .edit {
display: none; }
.profile.profile--details .frame__right .active .iText {
border: 1px solid #dbdbdb;
background: #fefcfc;
font-style: italic;
color: #9c9e9f; }
.profile.profile--details .frame__right .active .select-label .styled-select-wrapper {
border: 1px solid #eaeaea;
background: #fefcfc; }
.profile.profile--details .frame__right .active .select-label .styled-select-text {
font-style: italic;
color: #9c9e9f; }
.profile.profile--details .frame__right .active .select-label .styled-select-button {
display: block; }
.profile .form__messages .form__messages--errors ul li {
font-size: 1em;
margin: 0; }
.page--profile .title__wrapper {
position: relative; }
.page--profile .title__wrapper .buttons {
line-height: 26px;
position: absolute;
top: 0;
right: 0; }
.page--profile .title__wrapper .buttons .button {
font-family: Arial, sans-serif;
margin-left: 25px;
white-space: nowrap; }
.page--profile .title__wrapper .buttons .button.button--more {
max-width: 150px; }
.ie8 .page--profile .title__wrapper .buttons .button.hidden {
visibility: hidden; }
/* ARTICLE */
.nav--post li {
font-family: "ClanNarrowMedium", sans-serif;
color: #747373;
float: left;
text-transform: uppercase;
padding: 0 5px 0 5px;
border-left: 1px solid #d0043c; }
.nav--post li:first-child {
color: #000;
border: 0;
padding-left: 0; }
.report,
.reply {
color: #000;
text-decoration: none;
position: relative; }
.report:before,
.reply:before {
content: "";
position: absolute;
left: 0; }
.report {
padding-left: 15px;
float: right; }
.report:before {
top: -1px;
background-image: url(../i/sprites/sprite.png);
background-position: -169px -140px;
width: 11px;
height: 11px; }
.reply {
text-transform: uppercase;
padding-left: 15px;
float: left; }
.reply:before {
top: -1px;
background-image: url(../i/sprites/sprite.png);
background-position: -129px -128px;
width: 11px;
height: 10px; }
.article .color--step-by-step {
color: #e05586; }
.article .color--street-looks {
color: #fd82ae; }
.article .color--hair-trends {
color: #b05173; }
.article .color--hair-dressing {
color: #b179a2; }
.article .color--community {
color: #baafc5; }
.article.article--Pome {
padding-bottom: 120px; }
.article.article--Pome .article__body--Pome {
padding: 0;
margin-bottom: 0; }
.article.article--Pome .article__body--Pome h1 {
width: 100%;
display: inline-block;
margin: 34px 0 12px;
font-family: "FFClanWebProBookItalic", sans-serif;
line-height: 33px; }
.article.article--Pome .article__body--Pome h1 span {
font-family: "ClanNarrowMedium", sans-serif;
letter-spacing: 1px; }
.article.article--Pome .article__body--Pome .kolorSquad--tip p {
margin: 20px 0 30px; }
.article.article--Pome .article__body--Pome .kolorSquad--tip img {
margin-bottom: 26px; }
.article.article--Pome .tiles {
height: auto; }
.article.article--Pome .tile {
position: relative;
float: left; }
.article.article--Pome .tile img {
width: 100%; }
.article.article--Pome .tile--3x1 {
width: 334px; }
.article.article--Pome .tile--2x1 {
width: 506px; }
.article.article--Pome .tile--1x1 {
width: 1022px; }
.article.article--Pome .tile .tile__info {
text-align: center; }
.article.article--Pome .grid.grid--tiles {
padding-bottom: 0; }
.article.article--Pome.article__colorGallery h1 {
font-size: 34px; }
.article.article--Pome.article__colorGallery .kolorSquad--tip p {
font-size: 14px;
line-height: 20px; }
.article.article--Pome.article__colorGallery .kolorSquad--tip img {
height: 196px; }
.article .article__media {
width: 679px;
max-height: 542px;
position: relative;
margin-bottom: 10px;
overflow: hidden; }
.article .article__media img {
width: 679px;
max-height: 542px; }
.article .article__media .article__title {
font-family: "ClanNarrowBook", sans-serif;
font-size: 2.6em;
color: #fff;
text-transform: uppercase;
padding: 13px 34px 13px 18px;
margin: 0 32px 0 0;
display: inline-block;
position: absolute;
bottom: 27px;
left: 0;
z-index: 1; }
.article .article__subtitle {
font-family: "ClanNarrowMedium", sans-serif;
font-size: 1.4em;
line-height: 16px;
text-transform: uppercase;
text-align: justify;
margin-bottom: 20px; }
.article .article__body {
border: 1px solid #ececec;
padding: 32px 32px 20px;
margin-bottom: 10px;
position: relative; }
.article .article__body .article__author {
font-family: "ClanNarrowMedium", sans-serif;
font-size: 2em;
text-transform: uppercase;
margin: 0; }
.article .article__body .article__title {
font-family: "ClanNarrowBook", sans-serif;
font-size: 3.2em;
text-transform: uppercase;
margin-bottom: 20px; }
.article .article__body .nav--post {
font-size: 1.2em;
margin-bottom: 20px; }
.article .article__body .button {
margin-top: 5px; }
.article .article__body .tag {
font-size: 1.1em; }
.article .article__body .pagination {
position: absolute;
top: 10px;
right: 10px; }
.article .article__body .step_item.cloak {
display: none; }
.article .article__body .step__number {
font-family: "ClanNarrowMedium", sans-serif;
font-size: 3em;
text-transform: uppercase;
margin-bottom: 20px;
display: block; }
.article .article__body--Pome {
border: 0;
padding-left: 0;
padding-right: 0; }
.article .article__body--Pome * {
font-family: "ClanNarrowBook", sans-serif; }
.article .article__body--Pome h1 {
color: #472563;
margin: 18px 0 56px;
text-transform: uppercase;
text-align: center;
font-size: 23px;
line-height: 33px;
font-family: "FFClanWebProBookItalic", sans-serif; }
.article .article__body--Pome h1 br {
display: none; }
.article .article__body--Pome h1 span {
font-style: normal;
font-family: "ClanNarrowMedium", sans-serif;
letter-spacing: 1px; }
.article .article__body--Pome h1 span.title__newLine {
display: block; }
.article .article__body--Pome h1 span.title-lowercase {
text-transform: lowercase; }
.article .article__body--Pome p {
font-size: 13.5px;
line-height: 20px; }
.article .article__body--Pome .itv {
padding-right: 36px; }
.article .article__body--Pome .itv__item {
margin-bottom: 40px; }
.article .article__body--Pome .itv__item strong {
font-size: 13.5px;
color: #472563;
margin-top: 24px;
margin-bottom: 28px;
display: block;
font-family: "ClanNarrowMedium", sans-serif; }
.article .article__body--Pome .itv__item p {
display: inline-block;
width: 100%;
margin-bottom: 26px; }
.article .article__body--Pome .itv__item p a {
color: #472563; }
.article .article__body--Pome .itv__item strong.itv__articleHeader {
margin-top: 30px;
position: relative;
display: inline-block; }
.article .article__body--Pome .itv__item strong.itv__articleHeader:after {
position: absolute;
bottom: 0;
right: 7px;
width: 1px; }
.article .article__body--Pome .itv__item strong.itv__articleHeader.num-1 {
margin-top: 26px; }
.article .article__body--Pome .itv__item strong.itv__articleHeader.num-1:after {
content: url("../i/layout/pome/numbers/num-1.png"); }
.article .article__body--Pome .itv__item strong.itv__articleHeader.num-2 {
margin-top: 26px; }
.article .article__body--Pome .itv__item strong.itv__articleHeader.num-2:after {
content: url("../i/layout/pome/numbers/num-2.png"); }
.article .article__body--Pome .itv__item strong.itv__articleHeader.num-3 {
margin-top: 26px; }
.article .article__body--Pome .itv__item strong.itv__articleHeader.num-3:after {
content: url("../i/layout/pome/numbers/num-3.png"); }
.article .article__body--Pome .itv__item strong.itv__articleHeader.num-4 {
margin-top: 26px; }
.article .article__body--Pome .itv__item strong.itv__articleHeader.num-4:after {
content: url("../i/layout/pome/numbers/num-4.png"); }
.article .article__body--Pome .itv__item strong.itv__articleHeader.num-5 {
margin-top: 26px; }
.article .article__body--Pome .itv__item strong.itv__articleHeader.num-5:after {
content: url("../i/layout/pome/numbers/num-5.png"); }
.article .article__body--Pome .itv__item ul {
margin: 0;
padding-left: 25px;
list-style: none; }
.article .article__body--Pome .itv__item ul li {
font-size: 13.5px;
line-height: 20px; }
.article .article__body--Pome .itv__item ul li span,
.article .article__body--Pome .itv__item ul li em {
margin-right: 20px;
font-weight: 600;
font-style: normal; }
.article .article__body--Pome .itv__item ul.dot-list li {
padding-left: 20px; }
.article .article__body--Pome .itv__item ul.dot-list li em {
margin-left: -18px;
margin-right: 8px; }
.article .article__body--Pome .artist-desc {
margin-bottom: 25px; }
.article .article__body--Pome .kolorSquad--tip {
text-align: center; }
.article .article__body--Pome .kolorSquad--tip p {
color: #472563;
font-size: 24.72px;
margin-top: 40px;
line-height: 42px; }
.article .article__body--Pome .kolorSquad--tip p span,
.article .article__body--Pome .kolorSquad--tip p em {
display: block;
font-size: 15.48px;
font-style: normal;
margin-top: 20px;
font-family: "FFClanWebProBookItalic", sans-serif; }
.article .article__body--Pome.faq__body--Pome {
padding-right: 0;
margin-bottom: 80px; }
.article .article__body--Pome.faq__body--Pome h1 {
margin-bottom: 50px; }
.article .article__body--Pome.faq__body--Pome .faq__list {
border: 1px solid #a999b6; }
.article .article__body--Pome.faq__body--Pome .faq__list > ul {
list-style: none;
margin: 0; }
.article .article__body--Pome.faq__body--Pome .faq__list > ul > li {
text-align: center; }
.article .article__body--Pome.faq__body--Pome .faq__list > ul > li:last-child .faq__list--hidden {
border: 0; }
.article .article__body--Pome.faq__body--Pome .faq__list > ul > li:last-child.active span {
border-bottom: 1px solid #a999b6; }
.article .article__body--Pome.faq__body--Pome .faq__list > ul > li:last-child span {
border: 0; }
.article .article__body--Pome.faq__body--Pome .faq__list > ul > li > span {
cursor: pointer;
color: #472563;
display: block;
font-size: 18px;
line-height: 1;
padding: 20px 50px;
position: relative;
border-bottom: 1px solid #a999b6;
font-family: "FFClanWebProBookItalic", sans-serif; }
.article .article__body--Pome.faq__body--Pome .faq__list > ul > li > span:after {
content: '';
background: url("../i/layout/pome/faq-arrow.png") no-repeat;
width: 12px;
height: 17px;
position: absolute;
right: 21px;
top: 21px;
transition: all 0.3s ease; }
.article .article__body--Pome.faq__body--Pome .faq__list > ul > li.active > span {
font-family: "ClanNarrowMedium", sans-serif; }
.article .article__body--Pome.faq__body--Pome .faq__list > ul > li.active > span:after {
-ms-transform: rotate(-90deg);
transform: rotate(-90deg); }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden {
list-style: none;
margin: 0;
padding-top: 38px;
border-bottom: 1px solid #a999b6;
display: none; }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden p {
padding: 0 5px; }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li {
font-size: 14px;
text-align: left;
padding: 0 71px;
margin-bottom: 45px;
position: relative;
line-height: 20px; }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li:before {
width: 68px;
left: -10px;
position: absolute;
text-align: right;
top: -4px; }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.num-1:before {
content: url("../i/layout/pome/numbers/faq-num-1.png"); }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.num-2:before {
content: url("../i/layout/pome/numbers/faq-num-2.png"); }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.num-3:before {
content: url("../i/layout/pome/numbers/faq-num-3.png"); }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.num-4:before {
content: url("../i/layout/pome/numbers/faq-num-4.png"); }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.num-5:before {
content: url("../i/layout/pome/numbers/faq-num-5.png"); }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.num-6:before {
content: url("../i/layout/pome/numbers/faq-num-6.png"); }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.num-7:before {
content: url("../i/layout/pome/numbers/faq-num-7.png"); }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.num-8:before {
content: url("../i/layout/pome/numbers/faq-num-8.png"); }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.num-9:before {
content: url("../i/layout/pome/numbers/faq-num-9.png"); }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.num-10:before {
content: url("../i/layout/pome/numbers/faq-num-10.png"); }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.num-11:before {
content: url("../i/layout/pome/numbers/faq-num-11.png"); }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.num-12:before {
content: url("../i/layout/pome/numbers/faq-num-12.png"); }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.num-13:before {
content: url("../i/layout/pome/numbers/faq-num-13.png"); }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.faq__video {
padding: 0; }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.faq__video h3 {
font-size: 34px;
text-align: center;
text-transform: uppercase;
color: #472563;
margin-bottom: 38px;
font-family: "FFClanWebProBookItalic", sans-serif; }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.faq__video h3 span {
font-family: "ClanNarrowMedium", sans-serif;
font-weight: 600; }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.faq__video .tile {
position: relative;
margin: 0;
width: 100%; }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.faq__video .tile.tile--1x1 img {
width: auto;
height: auto; }
.article .article__body--Pome.faq__body--Pome .faq__list--hidden li.faq__video .tile .tile__info {
text-align: center; }
.article .article__body--desc p {
font-size: 1.2em;
line-height: 16px;
text-align: justify;
margin-bottom: 20px; }
.article .article__body--desc table p {
text-align: left; }
.article .article__body--desc ul li,
.article .article__body--desc ol li {
font-size: 1.2em;
line-height: 16px;
text-align: justify; }
.article .article__body--desc a {
color: #663977; }
.article .community__box.community__box--single {
margin-top: 35px;
padding: 5px 0; }
.article .community__box .nav--feed {
margin: 40px 0 0; }
.article .community__box .nav--feed li {
margin-top: 10px; }
/* ARTICLE COMMENTS */
.article__comments__wrap {
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
margin: -10px 0 10px; }
.article__comments__wrap.hidden {
margin: 0; }
.article__comments__wrap .title--comments {
padding: 15px 25px;
margin: 0; }
.article__comments__wrap > .hidden {
display: none; }
.article__comments__wrap .community__box {
border-bottom: 1px solid #ececec; }
.article__comments__wrap .community__box.hidden {
display: none; }
.article__comments__wrap .community__box .nav--feed {
margin: 13px 0 10px; }
.article__comments__wrap .community__box .nav--feed li {
vertical-align: text-top; }
.article__comments .comments__item {
background: #f7ecef;
padding: 30px 20px;
margin-top: 10px;
overflow: hidden; }
.article__comments .comments__item:nth-of-type(1) {
margin-top: 0; }
.article__comments .comments__item .item__desc {
font-size: 1.2em;
line-height: 15px; }
.article__comments .comments__item .item__foot {
display: inline-block;
width: 100%;
margin-top: 10px; }
.addComments_container {
background: #f7ecef;
padding: 20px;
font-size: 1.2em; }
.addComments_container .iText {
padding: 0 5px !important;
font-size: 1em; }
.addComments_container label {
padding-bottom: 10px; }
.addComments_container .nickName {
float: left;
width: 49%; }
.addComments_container .website {
float: right;
width: 49%; }
.addComments_container .content {
float: left;
width: 100%;
margin: 10px 0; }
.addComments_container .content textarea {
border: 0;
padding: 5px;
width: 100%;
height: 110px; }
.addComments_container .foot {
clear: both;
position: relative; }
.addComments_container .foot .button {
display: inline-block;
font-family: "ClanNarrowMedium", sans-serif;
position: absolute;
right: 0;
bottom: 0; }
/* SITEMAP */
.sitemap__wrap {
display: inline-block;
width: 100%;
padding-bottom: 100px; }
.sitemap__block {
width: 100%;
margin-top: 20px;
display: table; }
.sitemap__block .sitemap__column {
display: table-cell;
width: 146px;
min-height: 530px;
padding: 0 21px;
position: relative; }
.sitemap__block .sitemap__column:before {
content: "";
position: absolute;
width: 1px;
top: 0;
bottom: 0;
right: 0;
background: url("../i/layout/border-pattern.png") repeat-y 0 0; }
.sitemap__block .sitemap__column a {
text-decoration: none;
color: #000;
text-transform: uppercase; }
.sitemap__block .sitemap__column a:hover {
color: #d0043c !important; }
.sitemap__block .sitemap__column:first-child {
padding-left: 0; }
.sitemap__block .sitemap__column:last-child:before {
display: none; }
.sitemap__block .sitemap__column h2 {
color: #cc0033;
font-family: "ClanNarrowMedium", sans-serif;
text-transform: uppercase; }
.sitemap__block .sitemap__column ul {
margin: 0;
padding: 0;
list-style: none; }
.sitemap__block .sitemap__column ul.sitemap__sublinks__lvl1 > li {
margin-bottom: 15px;
font-size: 1.2em; }
.sitemap__block .sitemap__column ul.sitemap__sublinks__lvl1 a {
color: #666; }
.sitemap__block .sitemap__column ul.sitemap__sublinks__lvl1 strong a {
color: #000;
display: block;
padding-bottom: 3px; }
.sitemap__block .sitemap__column ul.sitemap__sublinks__lvl2 {
padding-bottom: 10px; }
.sitemap__block .sitemap__column ul.sitemap__sublinks__lvl2 li {
padding-left: 5px;
position: relative; }
.sitemap__block .sitemap__column ul.sitemap__sublinks__lvl2 li:before {
content: '>';
color: #999;
position: absolute;
top: 1px; }
.sitemap__block .sitemap__column ul.sitemap__sublinks__lvl2 a {
display: block;
color: #999;
padding-left: 10px;
font-size: 0.8em !important; }
.sitemap__block .sitemap__column ul.sitemap__sublinks li {
padding: 3px 0 0 5px; }
.sitemap__block .sitemap__column ul.sitemap__sublinks li a {
font-size: 0.9em; }
/* SEARCH RESULTS */
.search__results {
border: 1px solid #d0043c;
margin-bottom: 100px;
border-radius: 0 0 30px 0; }
.search__results h2.title {
line-height: 1.5em; }
.search__results h2.title strong {
font-family: "ClanNarrowMedium", sans-serif; }
.search__results h2.title .number {
font-size: 1.23em; }
.search__results .search__container {
padding: 25px 170px 45px 170px; }
.search__results .search__area {
width: 420px;
margin: 0 auto 50px auto; }
.search__results .search__area > {
display: inline-block;
float: left; }
.search__results .search__area .iText {
border: 1px solid #dcdcdc;
font-family: "ClanNarrowMedium", sans-serif;
padding-left: 40px !important; }
.search__results .search__area label {
display: inline-block;
width: 312px;
margin-right: 10px;
position: relative; }
.search__results .search__area label:before {
content: "";
background-image: url(../i/sprites/sprite.png);
background-position: -182px -144px;
width: 19px;
height: 19px;
position: absolute;
top: 4.5px;
left: 10.5px; }
.search__results .search__item {
border-bottom: 1px solid #dcdcdc;
padding: 0 0 25px 0;
margin-bottom: 25px; }
.search__results .search__item span.search__subtitle {
font-size: 1.2em;
font-family: "ClanNarrowMedium", sans-serif;
text-transform: uppercase;
color: #7f7f7f; }
.search__results .search__item h3 {
text-transform: uppercase;
font-family: "ClanNarrowMedium", sans-serif;
font-size: 1.4em;
padding-top: 7px; }
.search__results .search__item p {
font-size: 1.2em;
line-height: 15px;
font-family: arial; }
.search__results .search__item a {
color: #000;
font-size: 1.2em;
display: inline-block;
text-decoration: none;
margin-top: 10px; }
.search__results .search__item a:before {
padding-right: 15px;
content: '';
display: block;
float: left;
background-image: url(../i/sprites/sprite.png);
background-position: -16px -203px;
width: 8px;
height: 12px; }
.search__results .link__wrap {
text-align: center; }
/* EXPERT */
.button__back + .article--expert {
margin-top: 30px; }
.article--expert {
margin-bottom: 100px; }
.article--expert .article__media {
height: auto; }
.article--expert .expert__title {
font-family: "ClanNarrowMedium", sans-serif;
font-size: 4.5em;
color: #d0043c;
text-transform: uppercase;
margin: 0; }
.article--expert .expert__subtitle {
font-family: "ClanNarrow-Thin", sans-serif;
font-size: 4em;
color: #d0043c;
text-transform: uppercase;
margin: -5px 0 0; }
.article--expert .inline > * {
display: inline-block; }
.article--expert .inline .expert__subtitle {
font-size: 4.5em;
margin: 0 0 0 10px; }
.article--expert .itv {
margin-top: 45px; }
.article--expert .itv .itv__item {
margin-bottom: 20px; }
.article--expert .itv .itv__item h3 {
font-family: "ClanNarrowBook", sans-serif;
font-size: 1.8em;
color: #d0043c;
text-transform: uppercase;
margin-bottom: 10px; }
.article--expert .itv .itv__item h3:before {
content: "//";
margin-right: 5px; }
.article--expert .itv .itv__item p {
font-size: 1.2em;
line-height: 16px;
text-align: justify; }
.expert__photo {
width: 334px;
margin-top: 35px; }
.expert__photo img {
border-radius: 30px 0 0 0; }
.article--tips .filters {
margin: 20px 0 53px; }
.article--tips .tips {
position: relative; }
.article--tips .tips > .button {
position: absolute;
top: 3px;
right: 0;
padding-left: 27px; }
.article--tips .tips > .button:before {
content: "";
background-image: url(../i/sprites/sprite.png);
background-position: -92px -148px;
width: 10px;
height: 10px;
position: absolute;
left: 10px;
top: 50%;
margin-top: -5px; }
.article--tips .tips .tips__wrapper {
height: 457px;
overflow: hidden; }
.article--tips .tips__item {
position: relative;
margin-top: 5px; }
.article--tips .tips__item:first-child {
margin-top: 0; }
.article--tips .tips__item a {
text-decoration: none; }
.article--tips .tips__item .tips__ico {
width: 72px;
height: 72px;
margin-right: 5px;
background: #f7ecef;
display: inline-block;
float: left;
transition: background 0.3s; }
.article--tips .tips__item .tips__ico img {
width: 72px;
height: 72px; }
.article--tips .tips__item .tips__body {
height: 72px;
width: 602px;
padding-left: 18px;
background: #f7ecef;
display: table;
transition: background 0.3s; }
.article--tips .tips__item .tips__body .tips__title {
font-size: 1.2em;
color: #000;
font-weight: 700; }
.article--tips .tips__item .tips__body .nav--post {
margin: 0; }
.article--tips .tips__item .info--community {
right: 13px; }
.article--tips .tips__item .tips__body__wrapper {
display: table-cell;
vertical-align: middle; }
.article--tips .tips__item:hover .tips__ico,
.article--tips .tips__item:hover .tips__body {
background: #efdae0; }
.article--tips .pagination {
margin-top: 20px; }
.article--tips .article__comments__wrap {
border: none;
margin: 25px 0 0; }
.article--tips .article__comments__wrap .filters {
margin: 20px 0; }
.article--tips .article__comments__wrap .filters label {
margin: 0;
padding: 0; }
.article--tips .article__comments__wrap .filters .select-label .styled-select-text,
.article--tips .article__comments__wrap .filters .select-label select {
font-family: Arial, sans-serif;
font-size: 1em; }
.article--tips .article__comments__wrap .filters .select-label .styled-select-text {
padding-left: 5px; }
.article--tips .article__comments__wrap textarea {
width: 100%;
height: 110px;
padding: 5px;
border: none; }
.article--tips .article__comments__wrap .questionSend {
text-align: right;
margin-top: 12px;
display: inline-block;
width: 100%; }
.article--tips .article__comments__wrap .questionSend .button {
font-family: "ClanNarrowMedium", sans-serif; }
.article--tips .tips--single > div {
margin-top: 30px; }
.article--tips .tips--single .tip__box {
position: relative;
background: #f7ecef;
padding: 32px 27px; }
.article--tips .tips--single .tip__box + .community__box {
margin-top: 0;
padding: 40px 0 20px;
border: 1px solid #ececec;
border-top: none; }
.article--tips .tips--single .tip__box + .community__box + .article__comments__wrap {
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
margin: 0; }
.article--tips .tips--single .tip__box .nav--post {
font-size: 1.2em;
margin-bottom: 20px; }
.article--tips .tips--single .tip__box .info--community {
top: 32px;
right: 27px; }
.article--tips .tips--single .tip__box .tip__text {
font-size: 1.2em;
color: #333;
text-align: justify;
line-height: 16px;
margin: 0; }
.article--tips .tips--single .tip__box .tag {
margin-top: 20px; }
.medicalDisclaimer {
display: inline-block;
margin: -100px 0 100px;
line-height: 14px; }
.medicalDisclaimer strong {
text-transform: uppercase; }
.product__info__buy.amazon .button {
display: none; }
/* RATING & REVIEWS */
.review__comment {
border: 1px solid;
margin-bottom: 100px;
border-radius: 0 0 30px 0;
padding-bottom: 40px;
display: inline-block;
width: 100%; }
.review__comment .title--mode4 {
line-height: 46px;
margin-bottom: 0; }
.review__comment .product {
background: none !important;
border-radius: 0;
width: 300px;
height: 430px;
float: left; }
.review__comment .product .product__packshot {
width: 300px; }
.review__comment .product__review {
width: 700px;
min-height: 430px;
padding: 40px 75px 0;
float: right; }
.review__comment .product__review h3 {
text-align: center; }
.review__comment .product__review .tier {
display: inline-block;
width: 50%;
padding: 35px 0;
float: left; }
.review__comment .product__review .tier--single {
clear: both;
position: relative; }
.review__comment .product__review .tooltip__container {
position: relative; }
.review__comment .product__review p.tooltip__text {
width: 215px;
height: auto;
line-height: 16px;
margin: 0 25px;
position: relative;
top: -31px;
left: 0; }
.review__comment .product__review .required {
font-size: 1.2em;
font-style: italic;
margin: 0; }
.review__comment .product__review .example {
font-size: 1.2em;
font-style: italic;
color: #adadad;
margin-top: 5px; }
.review__comment .product__review label,
.review__comment .product__review .label {
font-size: 1.2em;
margin-bottom: 5px; }
.review__comment .product__review dl {
margin: 20px 0 0; }
.review__comment .product__review dt {
margin-top: 15px; }
.review__comment .product__review dd {
margin: 0; }
.review__comment .product__review textarea,
.review__comment .product__review input[type="text"] {
border: 1px solid #ccc;
font-size: 1.2em;
width: 100%; }
.review__comment .product__review input[type="text"] {
height: 24px;
padding: 0 10px; }
.review__comment .product__review textarea {
height: 50px;
padding: 5px 10px; }
.review__comment .product__review .styled-checkbox-wrapper {
border: 1px solid #ccc; }
.review__comment .product__review .radio__label {
margin: 0 20px 0 0; }
.review__comment .product__review .checkbox__label {
margin: 0; }
.review__comment hr {
clear: both;
margin: 20px 0; }
.review__comment .buttons {
text-align: center; }
.review__comment .buttons > * {
margin-left: 40px; }
.review__comment .buttons > *:first-child {
margin-left: 0; }
.review__comment.review__comment--proseries {
border-color: #d0043c; }
.review__comment.review__comment--wellaflex {
border-color: #8f7549; }
.review__comment.review__comment--koleston {
border-color: #663977; }
.review__comment.review__comment--koleston .product img {
top: -40px; }
.review__comment.review__comment--softcolor {
border-color: #b99620; }
.review__comment.review__comment--softcolor .product img {
top: -40px; }
.vex-closing {
display: none; }
/*# sourceMappingURL=maps/main.css.map */
