/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

ul, li, dl, dt, dd {margin:0; padding:0; list-style:none}

body {font-family: 'Open Sans', sans-serif; font-size:13px; color:#333;}
#outer {width:1200px; margin:0 auto}

header {overflow:hidden; margin-bottom:20px;}
header #logo {float:left; margin-left:120px;}
header #slogon {float:right; margin-top:100px; font-size:1.4em; font-weight:300}

#wrapper {height:730px; border-radius:10px; overflow:hidden}

#nav-main {width:200px; background-color:#E7E7E8; height:730px; margin-left:90px; float:left}
#nav-main ul {padding:20px 0;}
#nav-main ul li {}
#nav-main a {color:#333; text-decoration:none; font-family:"Times New Roman", Times, serif; font-size:1.1em; text-transform:uppercase; line-height:1.4; display:block; padding:10px 25px 10px 120px; margin-left:-90px; -webkit-transition:background-color 0.5s; transition:background-color 0.5s;}
#nav-main a:hover, #nav-main .active a {background-color:#fff;}

h1 {font-size:1.8em; font-weight:normal; line-height:1.2}
h4 {margin:1em 0 0.5em}
p {margin-top:0}

.list-bullet {padding-left:20px;}
.list-bullet li {list-style:disc;}
.list-arrow li {border-top:1px solid #333; padding:5px 0 5px 20px; background:url(../images/list-arrow.png) 5px 9px no-repeat;}

/* Accordion */
.accordion-content {font-family: 'Open Sans', sans-serif; margin-left:-25px;}
.ui-accordion .ui-accordion-content {padding:0 0 0 25px; font-size:0.9em}
.ui-accordion .ui-accordion-content p {margin:0 0 10px}
.ui-widget-content {border:0 none; background:transparent none;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {background:none; border:0 none;}
.ui-accordion {}
.ui-state-default .ui-icon-triangle-1-e {background:url(../images/togglerhide.png) left top no-repeat;}
.ui-state-active .ui-icon {background:url(../images/togglerexpand.png) left top no-repeat;}
.ui-accordion .ui-accordion-header {padding:8px 0 8px 25px; font-weight:normal; overflow:hidden}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {left:0; margin:0; top:12px}
.ui-accordion .ui-accordion-header span {display:block; padding-top:5px}
.ui-accordion .ui-accordion-header em {display:block; font-style:normal; font-size:0.75em; color:#fff; background-color:#4E1B00; float:left; padding:1px 5px}
.ui-accordion .ui-accordion-header .volume {display:inline-block; font-size:0.85em; margin-left:5px}

/* Scrollbar */
.mCSB_scrollTools .mCSB_draggerRail {width:8px}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {width:8px}

#footer-container {font-size:0.9em; color:#666; padding:20px 10px;}


/* Page - Home */
#page-home #wrapper {position:relative;}
#page-home #nav-main {position:absolute; z-index:100; top:0; background-color:rgba(255, 255, 255, .7)}
#page-home .bx-wrapper li img {border-radius:10px;}

/* Page - About */
#page-about #wrapper {background:url(../images/bg-about.jpg) center center no-repeat;}
#page-about .content-container {background-color:#C8C9CB; width:310px; padding:40px 60px; float:left; height:730px; font-size:1.1em}

/* Product */
.product-page h2 {font-weight:normal; font-size:1.4em; margin:0 0 1em;}
.product-page h2 span {font-size:0.7em; display:block;}
.product-menu {background-color:#4E1B00; width:200px; float:left; height:730px;}
.product-menu ul {padding:30px}
.product-menu ul li {border-top:1px solid #fff; display:block; padding:15px 0}
.product-menu ul li:first-child {border:0 none; padding-top:0}
.product-menu ul a {color:#fff; text-decoration:none; display:block;}
.product-menu ul a h4 {font-weight:normal; margin:0 0 5px 0; font-size:1.1em}
.product-menu ul a p {margin:0; line-height:1.3; font-size:1em}

/* VL LesAge */
#page-vl-lesage #wrapper {background:url(../images/bg-vl-lesage.jpg) center center no-repeat;}
#page-vl-lesage .content-container {float:right; padding:30px 40px; width:300px; line-height:1.3}
#page-vl-lesage .list-arrow {margin-top:10px; border-bottom:1px solid #333;}
#page-vl-lesage .awards {margin:20px 0 0 -70px;}
#page-vl-lesage .awards dt {float:left;}
#page-vl-lesage .awards dd {float:left; width:135px; font-size:0.9em; padding-left:10px; line-height:1.4} 
#page-vl-lesage .awards dd#andi {width:90px;}

/* VL Sensatif */
#page-vl-sensatif #wrapper {background:url(../images/bg-vl-sensatif.jpg) center center no-repeat;}
#page-vl-sensatif .content-container {float:right; padding:30px 40px; width:305px; line-height:1.3}


/* VL Inflamatif */
#page-vl-inflamatif #wrapper {background:url(../images/bg-vl-inflamatif.jpg) center center no-repeat; border:1px solid #ccc;}
#page-vl-inflamatif .content-container {float:right; padding:30px 40px; width:305px; line-height:1.3}

/* VL Intensif */
#page-vl-intensif #wrapper {background:url(../images/bg-vl-intensif.jpg) center center no-repeat;}
#page-vl-intensif .content-container {float:right; padding:30px 20px; width:380px; line-height:1.3}
#page-vl-intensif .content-container .list-bullet {margin-bottom:20px;}
#page-vl-intensif .scroll-container {height:540px;}
#page-vl-intensif .mCSB_scrollTools .mCSB_draggerRail {background-color:#FFF}
#page-vl-intensif .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background-color:#999;}


#page-vl-pearl-cream #wrapper {background:url(../images/bg-vl-pearl-cream.jpg) center center no-repeat; border:1px solid #ccc;}
#page-vl-pearl-cream h2 span {display:inline-block;}
#page-vl-pearl-cream .content-container {float:right; padding:30px 5px; width:290px; line-height:1.3}
#page-vl-pearl-cream .content-container .list-bullet {margin-bottom:20px;}
#page-vl-pearl-cream .scroll-container {height:600px;}
#page-vl-pearl-cream .mCSB_scrollTools .mCSB_draggerRail {background-color:#ddd}
#page-vl-pearl-cream .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background-color:#999;}


/* Award Winning */
#page-rs-follicular-extraction #wrapper {background:url(../images/bg-rs-follicular-extraction.jpg) center center no-repeat;}
#page-rs-follicular-extraction .content-container {background-color:#C8C9CB; width:310px; padding:40px 60px; float:left; height:730px; font-size:1.1em}
#page-rs-follicular-extraction .content-container .link {font-size:1.1em; margin:30px 0}
#page-rs-follicular-extraction .content-container .link a {color:#333; text-decoration:none;}
#page-rs-follicular-extraction .content-container #award {padding-left:70px; font-size:0.9em;}
#page-rs-follicular-extraction .content-container #award img {float:left; margin-left:-70px}

/* Milia and oil seeds */
#page-milia-oil-seeds #wrapper {background:#818284}
#page-milia-oil-seeds .content-container {background-color:#C8C9CB; width:340px; padding:40px 60px; float:left; height:730px; font-size:1.1em}
#page-milia-oil-seeds .content-compare {float:right; background-color:#E7E7E8; height:730px; overflow:hidden; padding:40px 50px;}
#page-milia-oil-seeds .content-compare ul {float:left; padding:0 10px;}
#page-milia-oil-seeds .content-compare ul li {padding:10px; text-align:center; font-size:1.2em}

/* Spa Boutique */
#page-spa-boutique #wrapper {background:url(../images/bg-spa-boutique.jpg) center center no-repeat;}
#page-spa-boutique .content-container {background-color:#C8C9CB; width:310px; padding:40px 60px; float:left; height:730px; font-size:1.1em}

/* Awards & Recognitions */
#page-awards-recognitions #wrapper {background:url(../images/bg-award-recognitions.jpg) center center no-repeat;} 
#page-awards-recognitions .content-container {background-color:#C8C9CB; width:310px; padding:60px; float:left; height:700px; font-size:1.1em}
#page-awards-recognitions .content-container li {padding-left:60px; margin-bottom:20px;}
#page-awards-recognitions .content-container li span {display:block; float:left; margin-left:-60px; width:40px; height:40px; border-radius:50%; background-color:#4E1B00; color:#fff; box-sizing:border-box; padding:6px 5px; font-size:1.3em; font-weight:700}

/* Contact Us */
#page-contact-us #wrapper {background:url(../images/bg-contact-us.jpg) center center no-repeat;} 
#page-contact-us #wrapper .content-container {background-color:#C8C9CB; width:250px; padding:40px 100px 40px 60px; float:left; height:700px;}
#page-contact-us #wrapper .content-container h1 {font-size:1.4em; text-transform:uppercase; margin-bottom:25px}
#page-contact-us #wrapper .content-container dt {font-weight:600; font-size:1.05em; margin-bottom:3px}
#page-contact-us #wrapper .content-container dt span {font-weight:500; font-size:0.7em}
#page-contact-us #wrapper .content-container dd {margin-bottom:20px;}
#page-contact-us #wrapper .content-container .vl-skincare-boutique {padding-top:30px; border-top:1px solid #666; margin-top:30px;}
#page-contact-us #wrapper .content-container address {font-style:normal}
#page-contact-us #wrapper .content-container a {display:block; text-decoration:none; color:#333;}

/* News */
#page-news #wrapper {background:url(../images/bg-news.jpg) center center no-repeat;} 
#page-news #wrapper .year-menu {float:left; background-color:#4e1b00; height:730px;}
#page-news #wrapper .year-menu ul {padding:30px}
#page-news #wrapper .year-menu li {margin-bottom:1em}
#page-news #wrapper .year-menu a {color:#fff; text-decoration:none; font-size:1.1em}
#page-news #wrapper .content-container {padding:30px 40px; float:left; width:290px; min-height:660px; position:relative;}
#page-news #wrapper .content-container h3 {margin:0 0 0.5em; font-weight:normal; font-size:1.4em;}
#page-news #wrapper .content-container a {color:#000; text-decoration:none;}
#page-news #wrapper .content-container a:hover {text-decoration:underline}
#page-news #wrapper .content-container p {margin-bottom:0.8em; font-size:0.9em}
#page-news #wrapper .content-container .news-list {display:none}
#page-news #wrapper .content-container .news-pages {display:none}
#page-news #wrapper .pagination {position:absolute; bottom:20px; right:0;}
#page-news #wrapper .pagination li {float:left; display:block; padding-left:5px; margin-left:5px; font-size:0.85em; border-left:1px solid #ccc}
#page-news #wrapper .pagination li:first-child {border:0 none}
#page-news #wrapper .pagination a {display:block; text-decoration:none; padding:2px 6px; color:#999}
#page-news #wrapper .pagination a:hover, #page-news #wrapper .pagination a.active {color:#000; text-decoration:none;}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}