/* MADE BY TB */
/*
Blue:#002d62;
Gray:#8e8f90;
*/

/* ---------- RESET ---------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,
font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,
legend,table,caption,tbody,tfoot,thead,tr,th,td {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
body {line-height:1;}
ol,ul {list-style:none;}
blockquote,q {quotes:none;}
:focus {outline:0;}
ins {text-decoration:none;}
del {text-decoration:line-through;}
table {border-collapse:collapse;border-spacing:0;}


/* ---------- GENERAL STYLES ---------- */

/* main */
html {}
body {font:normal 85% Arial, Helvetica, sans-serif;color:#8e8f90;margin:0;padding:0;background:#dbe2e7;line-height:1.5em;}
body.Face {background:#f7b680;}
body.Hair {background:#5c9acd;}
body.Body {background:#d479ac;}
body.Other {background:#909191;}
#site {width:100%; max-width:960px; margin:0 auto;}

/* text */
h1, h2, h3, h4, h5, h6, h7, p, blockquote {padding:0;}
h1 {margin:0 0 20px; color:#8e8f90; font-size:1.6em; line-height:1.8em; font-weight:bold;}
h2 {margin:0 0 15px; color:#8e8f90; font-size:1.4em; line-height:1.5em; font-weight:bold;}
h3 {margin:0 0 10px; color:#8e8f90; font-size:1.2em; line-height:1.3em; font-weight:bold;}
h4 {margin:0 0 5px; color:#8e8f90; font-size:1.1em; line-height:1.1em; font-weight:bold;}
h5 {margin:0; color:#8e8f90; font-size:1.1em; line-height:1.1em; font-weight:bold;}
p {margin:0 0 20px;}
p.clear {width:100%;}
hr {border:none; border-top:1px dashed #8e8f90; color:#fff; padding:0 0 10px;}
a {color:#8e8f90; text-decoration:underline;}
a:hover {text-decoration:none;}

/* list */
ul {margin:0 0 20px;}
ul li {margin:10px 0 10px 15px; padding:0; list-style-type:circle;}
ul li p {margin-bottom:0;}
ul.clean li {padding:0; background:none;}
ol {margin:0 0 20px;}
ol li {width:100%; margin:5px 0 5px 20px; padding:0; background:none; display:list-item; list-style-type:decimal;}
ol li p {margin-bottom:0;}

/* table */
table {margin:0 0 20px;}
table tr th {padding:10px; background:#8e8f90; color:#fff;}
table tr th a {color:#fff; text-decoration:underline;}
table tr th a:hover {text-decoration:none;}
table tr td {padding:5px; border-bottom:1px solid #8e8f90; vertical-align:top;}
table.clean tr th {background:none; color:#8e8f90;}
table.clean tr th a {color:#8e8f90;}
table.clean tr td {border-bottom:none;}

/* image */
img {width:100% !important;}
img.imgLeft {width:30% !important; float:left; margin:0 10px 0 0;}
body.home img.imgLeft {width:30% !important; margin:0;}
img.imgLeftHalf {width:49% !important; float:left; margin:0 2% 0 0;}
img.imgRight {width:30% !important; float:right; margin:0 0 0 10px;}
body.home img.imgRight {width:70% !important; margin:0;}
img.imgRightHalf {width:49% !important; float:right; margin:0;}
img.headingImg {margin:50px 0 10px;}

/* less used */
.L {float:left;}
.R {float:right;}
.hidden {display:none;}
button {cursor:pointer;}
address {font-style:normal;}
::selection {background:#8e8f90; color:#fff;}
::-moz-selection {background:#8e8f90; color:#fff;}


/* ---------- HEADER ---------- */
.headerW {width:100%; margin:40px 0 110px; background:#fff;}
body.Face .headerW {background:#d61a5e;}
body.Hair .headerW {background:#00964d;}
body.Body .headerW {background:#ffb545;}
body.Other .headerW {background:#fff;}
header {width:100%; max-width:960px; height:auto; margin:0 auto; position:relative;}
#lang {position:absolute; top:-20px; right:0;}
#lang li {float:left; margin:0; padding:0; list-style-type:none;}
#lang li a {padding:0 10px; border-left:2px solid #8e8f90; font-weight:bold; text-decoration:none;}
body.Body #lang li a {border-left:2px solid #fff; color:#fff;}
#lang li:first-child a, body.Body #lang li:first-child a {border-left:none;}
#lang li a:hover, #lang li.active a {text-decoration:underline;}
.logoW {width:100%; height:auto; max-height:180px;}
#logo {width:18%; height:auto; margin:20px 2%; background:none; display:block; float:left;}
#logo img {width:100%;}
.siteT {width:70%; color:#8e8f90; font-size:2em; line-height:1.8em; text-align:center; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; position:absolute; bottom:7%; left:30%;}
body.Face .siteT, body.Hair .siteT, body.Body .siteT {color:#fff;}
nav ul {margin:0; padding:0; position:absolute; bottom:-70px; left:0;}
nav ul li {margin:0 5px; padding:0; background:#fcfcfc; background:-webkit-linear-gradient(top, #fcfcfc, #adbbc3); background:-moz-linear-gradient(top, #fcfcfc, #adbbc3); background:-o-linear-gradient(top, #fcfcfc, #adbbc3); background:-ms-linear-gradient(top, #fcfcfc, #adbbc3); border:1px solid #8e8f90; border-radius:20px; float:left; list-style-type:none; position:relative;}
nav ul li a {padding:5px 8px; display:block; color:#8e8f90; font-size:1.2em; font-weight:normal; text-decoration:none; position:relative; z-index:2;}
nav ul li:first-child {margin-left:0;}
nav ul li:last-child {margin-right:0;}
nav ul li:hover, nav ul li.selected {background:#adbbc3; background:-webkit-linear-gradient(top, #adbbc3, #fcfcfc); background:-moz-linear-gradient(top, #adbbc3, #fcfcfc); background:-o-linear-gradient(top, #adbbc3, #fcfcfc); background:-ms-linear-gradient(top, #adbbc3, #fcfcfc);}
nav ul li:after {width:92%; height:50%; background:rgba(255,255,255,0.5); border-radius:10px; content:""; position:absolute; top:8%; left:4%; z-index:1;}
nav ul li ul {width:200px; height:auto; display:none; background:#fcfcfc; border:1px solid #8e8f90; position:absolute; top:30px; left:11px; bottom:auto; z-index:10;}
nav ul li:hover ul {display:block;}
nav ul li ul li {width:100%; margin:0; background:none; border:none; border-radius:0; font-size:0.9em; line-height:1.3em; font-weight:normal;}
nav ul li ul li:hover, nav ul li ul li.selected {background:#adbbc3;}
nav ul li ul li:after {display:none;}
nav ul li ul li a {padding:10px;}
nav ul li ul li:hover a, nav ul li ul li.selected a {color:#fff;}


/* ---------- SECTION ---------- */
section {width:100%; margin:0 0 20px; float:left;}
body.home section {margin:0;}
#banner, #innerBanner {width:100%; height:auto; margin:0; display:block; float:left; overflow:hidden;}
#banner {margin:0 0 20px;}
#innerBanner {margin:0 0 20px;}
#banner ul li, #innerBanner ul li {margin:0; padding:0;}
#banner ul li img {width:100%; max-width:960px;}
#innerBanner ul li img {width:100%; max-width:920px;}

/*article*/
article {width:75%; margin:0; padding:20px 20px 0; box-sizing:border-box; background:#fff; float:left; position:relative;}
.headingW h1 {width:50%; background:#dbe2e7; margin:-50px 10px 0 -20px; padding:10px 10px 0 20px; box-sizing:border-box; float:left; color:#fff;}
body.Face .headingW h1 {background:#d61a5e;}
body.Hair .headingW h1 {background:#00964d;}
body.Body .headingW h1 {background:#ffb545;}
.headingW h1 span {display:block; font-size:0.8em; line-height:1em; font-weight:normal;}
.headingW p {margin-top:50px; color:#dbe2e7; line-height:1.6em;}
body.Face .headingW p {color:#d61a5e; font-size:1.2em;}
body.Hair .headingW p {color:#00964d; font-size:1.2em;}
body.Body .headingW p {color:#ffb545; font-size:1.2em;}
p.boxP {margin:0 0 30px; padding:10px; background:#fcfcfc; background:-webkit-linear-gradient(top, #fcfcfc, #adbbc3); background:-moz-linear-gradient(top, #fcfcfc, #adbbc3); background:-o-linear-gradient(top, #fcfcfc, #adbbc3); background:-ms-linear-gradient(top, #fcfcfc, #adbbc3); border:1px solid #8e8f90; border-radius:20px; color:#8e8f90; font-weight:bold; position:relative;}
p.boxP span {position:relative; z-index:2;}
p.boxP:after {width:99%; height:20px; background:rgba(255,255,255,0.3); border-radius:10px; content:""; position:absolute; top:11%; left:0.5%; z-index:1;}

/*article.wide*/
body.wide article {width:100%;}

/*article.home*/
body.home article {width:100%; padding:0; background:none;}
body.home article h1 {display:none;}
body.home article p {margin:0 0 40px; padding:10px; background:#fcfcfc; background:-webkit-linear-gradient(top, #fcfcfc, #adbbc3); background:-moz-linear-gradient(top, #fcfcfc, #adbbc3); background:-o-linear-gradient(top, #fcfcfc, #adbbc3); background:-ms-linear-gradient(top, #fcfcfc, #adbbc3); border:1px solid #8e8f90; border-radius:20px; color:#8e8f90; font-weight:bold; position:relative;}
body.home article p span {position:relative; z-index:2;}
body.home article p:after {width:99%; height:20px; background:rgba(255,255,255,0.3); border-radius:10px; content:""; position:absolute; top:11%; left:0.5%; z-index:1;}

/*article.product*/
body.products.clean h1 {width:50%; margin:0 0 20px -20px; padding:5px 20px; background:#8e8f90; color:#fff; font-size:2em; line-height:1.8em;}
body.products.clean.Face h1 {background:#d61a5e; color:#fff;}
body.products.clean.Hair h1 {background:#00964d; color:#fff;}
body.products.clean.Anti h1 {background:#ffb545; color:#fff;}
body.products h2 {width:50%; margin:0 0 20px -20px; padding:5px 20px;}
body.products.Face h2 {background:#d61a5e; color:#fff;}
body.products.Hair h2 {background:#00964d; color:#fff;}
body.products.Anti h2 {background:#ffb545; color:#fff;}
body.products h3 {margin:0 0 20px; font-size:2em; font-weight:normal; line-height:1.6em; text-align:center; text-transform:uppercase; overflow:hidden;}
body.products h3:before, body.products h3:after {content:""; width:50%; height:1px; background-color:#8e8f90; display:inline-block; position:relative; vertical-align:middle;}
body.products h3:before {margin-left:-50%; right:0.5em;}
body.products h3:after {margin-right:-50%; left:0.5em;}
body.products.Face h4 {color:#d61a5e;}
.prodW {margin:0 -20px 10px; border-collapse:separate; border-spacing:20px 0;}
.prodW td {width:50%; padding:0; box-sizing:border-box; background:#fff; border:1px solid #8e8f90;}
.prodW td > div {border:1px solid #8e8f90;}
.prodW td h4 {margin:0 0 30px 0; padding:10px 20px; background:#8e8f90; color:#fff; font-size:1.2em; position:relative;}
body.Face .prodW td h4 {background:#d61a5e; color:#fff;}
body.Hair .prodW td h4 {background:#00964d; color:#fff;}
body.Body .prodW td h4 {background:#ffb545; color:#fff;}
.prodW td h4:after {content:""; width:100%; height:5px; margin:0; background:#909191; position:absolute; bottom:-10px; left:0;}
.prodW td h5, .prodW td p {margin:0 20px 30px;}
.prodW td img {float:left;}


/*aside*/
aside {width:23%; margin:0 2% 0 0; padding:0; background:#fff; float:left; position:relative;}
#subNav {margin:10px 0;}
#subNav li {margin:0 0 10px; padding:0 10px; list-style-type:none;}
#subNav li a {font-size:0.77em; text-decoration:none;}
#subNav li a:hover, #subNav li.selected a {text-decoration:underline;}

/* ---------- FOOTER ---------- */
footer {width:100%; height:35px; margin:0 0 20px; padding:5px; box-sizing:border-box; background:#002d62; float:left; position:relative; color:#666; font-size:0.9em; line-height:1.4em;}
footer .copyrights {width:50px; height:25px; background:url(../images/cpe.png) 0 0 no-repeat; display:block; text-indent:-123456px;}


/* --------- OTHER ---------- */




/* ---------- HACKS ---------- */
.clear {display:inline-block;}
#site:after, #lang:after, .logoW:after, #banner ul:after, nav ul:after, #body:after, .headingW:after, .prodW:after, .clear:after
{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden;}