//	PAGE Style
//==================================================
body {
    // custom scroll-bar
    .scroll-bar();
}

main {
}

#page {
    background: #fff;
    padding-bottom: 20px;
}
.bg-white {
    background: #fff;
}
.black-bg {
    padding:50px 0;
    color:#fff;
}
.full {
    overflow: hidden;
}
//	HEADER Style
//==================================================
.top-middle {
    //line-height : 21px;
    [class*="icon"] {
        font-size : @font-size-larger;
        &::before {
            margin-top : -4px;
        }
    }
}

header {
    background : @header-bg;
    color      : @header-color;

    // -- LOGO Style
    .logo {
        margin: 20px 0;
        //font-family: 'Anton', sans-serif;
        font-weight: normal;
        font-size: 50px;
        color: #99178c;

        span {
            font-size   : 25px;
            font-weight : bold;
            line-height : 1.5em;
            margin-top  : 8px;
            display     : block;
        }

        a {  color: #99178c;
            //&:hover {
            //    color : @link-color;
            //}
        }
        img {
            margin : 0;
            .box-shadow(none);
        }
    }

    // -- NAV in HEADER Style
    nav {
    }
}

.after-logo-box {
    padding-top : 40px;
}

// -- NAV Style
nav {
}

.l {
    &_menu {
        background-color : @nav-bg;
        z-index          : 30;
        position         : relative;
    }

    &_top {
        background-color : #ddd;
        border-bottom    : 5px solid @brand-primary;
        padding          : 6px 0;
        line-height      : 2em;
    }
    &_skin {
        background-color : #f4f8f9;
        border-bottom    : 5px solid darken(#f4f8f9, 8%);
        text-transform   : uppercase;
        margin-top       : 30px;
        font-size        : 36px;
        overflow         : hidden;
        height           : 130px;
        font-family      : @font-family-menu;

        .title {
            margin : 7px 0;
            color  : @gray-darker;
        }
        .sub-title {
            margin : 7px 0;
            color  : @brand-primary;
        }
        .grid_4 {
            position : relative;
            .tpopup {
                position : absolute;
                top      : 0;
                left     : 0;
            }
        }
    }
    &_copyrights {
        background-color : @gray-darker;
        padding          : 10px 0;
        text-align       : center;
        font-size        : @font-size-mini;
        color            : @gray;
        p {
            margin : 0;
        }
    }
}

.box {
    &_hello {
        padding     : 0px 0 10px;
        //font-family : @font-family-headings;
        line-height : 1.5em;
        font-size   : 16px;
        font-family : @font-family-menu;
    }
}

.top {
    &-title {
        text-transform : uppercase;
        color          : @gray-darker;
        font-size      : 1.4em;
        font-weight    : 700;
    }
    &-links {
        text-align  : right;
        font-weight : bold;
        a {
            padding-left : 10px;
            margin-left  : 10px;
        }
        a + a {
            border-left : 1px solid @gray;
        }
    }
}

.testimonials-prof-list {
    list-style : none;
    margin     : 0;
    padding    : 0;
    overflow   : hidden;
    & > .tpopup {
        position : absolute;
        top      : -15px;
        left     : 0;
    }
    .img {
        height   : 210px;
        overflow : hidden;
    }
    .inline-block-wrap;
    li {
        margin           : 0;
        vertical-align   : top !important;
        background-color : transparent;
        .grid-elements(3; @grid-margin-width; false);
    }
    .name {
        font-size     : @font-size-larger;
        margin-bottom : 0.15em;
        margin-top    : 0.15em;
    }
    .extra {
        color         : @gray-light;
        height        : 45px;
        margin-bottom : 0.55em;

        & ~ * {
            font-style : italic;
        }
    }
    p {
        margin : 0;
    }

    .testimonials-home & {
        li {
            .grid-elements(3; @grid-margin-width; false);
            &.visible {
                display : block;
            }
        }
    }

}

.box-heading {
    border-bottom  : 4px solid @brand-primary;
    padding-bottom : 0.35em;
    padding-top    : 0.35em;
    margin-bottom  : 0.5em;
}

.videos {
    article {
        padding : 2.4em 0;
        & + article {
            border-top : 1px solid @gray-lighter;
        }
    }
}

.testimonials-list {
    list-style       : none;
    margin           : 0;
    padding          : 0;
    background-color : #f4f8f9;
    & > .tpopup {
        position : absolute;
        top      : -15px;
        left     : 0;
    }
    li {
        margin  : 0 0 19px 0;
        padding : 25px 20px 0 20px;
        width   : 100%;
        &:not(.visible) + li:not(.visible) {
            margin-top : 15px;
        }
    }
    blockquote {
        font-size  : 16px;
        margin     : 0;
        padding    : 0.25em 0.25em 0.25em 2.5em;
        font-style : italic;

        &::before {
            //content : none;
            left       : 0;
            color      : darken(#f4f8f9, 14%);
            top        : -16px;
            font-size  : 24px;
            font-style : normal;
        }
        &::after {
            color      : darken(#f4f8f9, 14%);
            font-size  : 24px;
            font-style : normal;
            right      : 0;
            top        : -16px;
        }
    }
    strong {
        color      : @gray-darker;
        font-style : normal;
        & + * {
            margin-top : 10px;
        }
    }

    .testimonials-home & {
        li {
            height     : 164px;
            display    : none;
            margin-top : 0 !important;
            overflow   : hidden;
            &.visible {
                display : block;
            }

            p {
                height   : 165px;
                overflow : hidden;
            }
        }
    }
}

.view-more-line {
    background-color : #333;
    padding          : 8px 18px;
    a {
        font-weight : bold;
        font-size   : 12px;
        color:#fff;
    }
}

.content-title {
    background-color : @brand-primary;
    color            : @primary-color;
    font-weight      : 300;
    font-family      : @font-family-headings;
    padding          : 15px 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 28px;
    margin-bottom: 0;
    &._s {
        font-size : 23px;

        span {
            height : 37px;
            width  : 31px;
            &:after {
                border-width : 18px 8px;
            }
        }
    }

    span {
        background-color : @gray-darker;
        color            : @primary-color;
        display          : none;
        width            : 40px;
        height           : 40px;
        float            : left;
        margin-right     : 25px;
        text-align       : center;
        line-height      : 2em;
        position         : absolute;
        top              : 0;
        left             : 0;
        &:after {
            content      : "";
            border-width : 20px 8px;
            border-style : solid;
            display      : block;
            width        : 0;
            position     : absolute;
            top          : 0;
            border-color : @gray-darker transparent transparent @gray-darker;
            right        : -16px;
        }
    }
}

.headline {
    background-color : @brand-primary;
    padding          : 15px 20px 15px 110px;
    margin           : 0 0 10px;
    font-size        : 30px;
    font-family      : @font-family-headings;
    font-weight      : 700;
    color            : @primary-color;
    line-height      : 1.25em;

    span {
        background-color : @gray-darker;
        color            : @primary-color;
        display          : block;
        width            : 57px;
        height           : 67px;
        float            : left;
        margin-right     : 25px;
        text-align       : center;
        line-height      : 2em;
        position         : absolute;
        top              : 0;
        left             : 0;
        padding-left     : 10px;
        &:after {
            content      : "";
            border-width : 34px 16px;
            border-style : solid;
            display      : block;
            width        : 0;
            position     : absolute;
            top          : 0;
            border-color : @gray-darker transparent transparent @gray-darker;
            right        : -31px;
        }
    }
}

.testimonials-professionals {
    background-color : #f4f8f9;
    .list {
        overflow : hidden;
        .inline-block-wrap;
    }
    article {
        .grid-elements(3; @grid-margin-width; false);
        vertical-align   : top !important;
        background-color : transparent;
    }

    &.home {
        li {
            padding : 20px;
            .grid-elements(1; 0; true);
            .grid-elements-device(1; 1; 1; 0; true);
        }
    }

    .name {
        font-size     : @font-size-larger;
        margin-bottom : 0.15em;
        margin-top    : 0.15em;
    }
    .extra {
        color         : @gray-light;
        height        : 45px;
        margin-bottom : 0.55em;

        & ~ * {
            font-style : italic;
        }
    }
}

.box_gray {
    background-color : #f4f8f9;
    padding          : 20px;
    h2.headline {
        margin-left   : -20px;
        margin-right  : -20px;
        margin-top    : -20px;
        margin-bottom : 20px;
    }
}

.review-box {
    padding-top : 0;

    hr {
        background-color : #f4f8f9;
        color            : darken(#f4f8f9, 8%);
        border-color     : darken(#f4f8f9, 8%);
        margin-top       : 30px;
        margin-bottom    : 30px;
    }
    .title {
        font-family : @font-family-headings;
        font-weight : 900;
        line-height : 1.25em;
        font-size   : 20px;
    }
    .desc {
        font-style : italic;
        //line-height : 16px;
        text-align : justify;
        //font-size   : 13px;
    }

}

.question-box {
    .title {
        font-size   : 1.65em;
        font-weight : 300;
        text-align: left;
        margin: 17px 0!important;
    }
    //.desc {
    //    background-color : #f4f8f9;
    //    padding          : 20px;
    //    .border-radius(10px);
    //}
}

.as-see-in-box {
    .img_gallery li {
        .grid-elements(14; 0; true; 10; 7);
        img {
            width : 100%;
        }
    }
}

.video-box {
    h4.title, .description {
        display : none;
    }
}

.store-locator-item {
    margin-bottom : 20px;
    .title {
        margin-bottom : 0.25em;
    }
    //background-color: lighten(@brand-primary, 35%);
    li {
        .grid-elements(1; 0; true);
        margin : 0 0 0.15em;
    }
}

.salons-list {
    position : relative;
    //height   : 0;
    overflow : hidden;
    & > .tpopup {
        position : absolute;
        top      : -7px;
        left     : 0;
    }
    //&.full{
    //    height : auto;
    //}
}

.salon-item-full {
    background-color : lighten(@brand-primary, 35%);
    margin-bottom    : @grid-margin-width;
    padding          : 15px 25px;
    &:empty {
        display : none;
    }
}

.salon-item {
    background-color : lighten(@brand-primary, 35%);
    margin-bottom    : @grid-margin-width;
    .title {
        background-color : @brand-primary;
        padding          : 10px;
        color            : @primary-color;
    }
    & > div {
        // padding : 5px 25px;
        > p {
            margin : 0;
        }
    }
    li {
        .grid-elements(4; @grid-margin-width; true; 3; 1);
        margin-bottom : 10px;
        padding       : 15px;
        .page-title {
            font-size   : 1.10em;
            font-weight : bold;
        }
    }

}

.package-box {
    background-color : lighten(@brand-primary, 35%);
    .prod {
        padding : 15px 5px 15px 15px;
    }
    .cont {
        padding : 15px 15px 15px 5px;
        color   : @gray-darker;
    }
}

.contact-form .title {
    background-color : @brand-primary;
    padding          : 5px 10px;
    color            : @primary-color;
    margin           : 0;
}

//	CONTENT Style
//==================================================
article {
    //background : #333;
    color      : @content-color;

    section {
        margin-bottom : 30px;
    }
}

// -- 404 Page Style
.page404 {
    padding : 1em 0 3em;
    color   : @gray-dark;

    .first {
        text-align  : center;
        font-size   : 17em;
        font-size   : 17vmax;
        line-height : 1;
    }
}

//	SIDEBAR Style
//==================================================
aside {
    .aside-box {
        margin-bottom : 30px;
    }
}
.sale .show-more {
    display:none;
}
//	FOOTER Style
//==================================================
footer {
    padding    : @padding-small-vertical * 2 0;
    background : @footer-bg;
    color      : @footer-color;
    font-size  : @font-size-small;

    p {
    }

    .footer-box {
    }
}

//	Button to scroll top
//==================================================
#go-top {
    .button-color(#fff; fade(#000, 50%); fade(#000, 50%); @primary-color; @primary-bg; @primary-bg);
}

.webPage-go-top {
    .button-color(#fff; fade(#000, 50%); fade(#000, 50%); @primary-color; @primary-bg; @primary-bg);
}

.imgGmaps {
    display  : block;
    overflow : hidden;
    height   : 0;
}

.undefined {
    & > img {
        & + div {
            height : 150px !important;
        }
    }
}

.zip-search {
    padding-bottom : 12px;
    margin-bottom  : 30px;
    border-bottom  : 3px solid @gray-lighter;

    [name="doZipSearch"] {
        input {
            float : left;
            width : 70%;
            + input {
                width : 30%;
            }
        }
    }
    [name="zipForSearch"] {
        &:focus {
            .placeholder(@input-bg);
        }
    }
    &[data-zip-status=""] {
        display : none;
    }
}



.contact-info {
    background-color : lighten(@brand-primary, 35%);
    padding          : 15px 15px 15px 15px;
    line-height      : 25px;
    border-left      : 4px solid @brand-primary;

    &::before {
        //position: absolute;
        //top         : 20px;
        //left        : 10px;
        font-size    : 60px;
        display      : block;
        float        : left;
        line-height  : 1.3em;
        margin-right : 15px;
        color        : lighten(@brand-primary, 20%);
        content      : "\e050";
        font-family  : 'flexkit-icons';
    }
}

h4.title, .youtube-player + .description {
    display : none;
}
.top-text {

    p {
        font-size: 1.2em;
        font-weight: 300;
        line-height: 1.7em;
        text-align: center;
    }
    h2.title {
        color:#fff;
    }
}