/*
 * RUBY01 STYLE TEMPLATES
 * Styles Custom
 * @author          HaiBach
 * @version         1.0
 */



/*  Table of Content
==============================================================
    .Import files
    .Font
    .Base CSS
    .Box layout
    .Background color
        .Background others
        .Background Hightlight
        .Background Transparent
        .Background Image
    .Typography
        .Text Emphasis
        .Label
        .Dropcaps
        .Blockquote
        .Text box
        .List
        .Link
        .Prettyprint
        .Title
        .HR class
    .Basic CSS
        .Iframe
        .Wrapper
        .Border
        .Padding/Margin
        .Responsive Utility
        .Icons
        .Form Style
        .Select Option
        .Social
        .Center vertical
    .Button
    .Image
        .Basic
        .Lightbox plugin
        .Zoom & Linkto
    .Effect
        .Effect Image
        .Effect Thumbnail
        .Effect Text
        .Effect Page
    .Elements
        .Accordion
        .Tab
        .Tooltip
        .Alert
        .Table
        .Table Price
        .Player
        .TimeCounting
        .BackTop
        .AutoHide
    .Navigation & Pagination
    .Show
    .Slider
    .Code slider
    .Logo & Menu
        .Logo
        .Menu Horizontal
        .Menu Vertical
        .Menu Theme-color
        .Media Queries
        .Menu Helper
        .Menu Affix
        .Menu other options
        .Menu Effect
    .Breadcrumbs
    .Portfolio
    .Blog
    .Post Elements
    .Blog Sidebar
    .Slogan
    .Team
    .Maps
    .Login
    .Footer Copyright & Social
    -------------------------------
    .Responsive - Base 960 Grid
    .Width 768px
    .Width 320px + 480px
    .Width 480px
    .Width 320px
    -------------------------------
    .Theme Control
    */


/* Thay doi trong code09 custom
    + Them class .thin, .light --> font-weight
    + Thay doi font-weight cua h1,h2...
    + Loai bo icon
*/



/*  Import files
============================================================== */
    /* Basic & Skeleton */
    @import url("rubygrid.css");

    /* Font primary */
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);

    /* Font alternative */
    @import url(http://fonts.googleapis.com/css?family=Raleway:100,300,700);

    /* Font code */
    @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,700);


/*  Font
============================================================== */

    /* Font primary
    ---------------------------------------------------------- */
    body,

    /* Form style */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea,

    /* Menu */
    .menu .menu > li > a,

    /* Button */
    .btn,

    /* Tooltip */
    .tt-content

    /* Font */
    { font-family: "Open Sans", "HelveticaNeue", Helvetica, Arial, sans-serif; }



    /* Font alternative
    ---------------------------------------------------------- */
    /* Heading */
    h1, h2, h3,
    h4, h5, h6,

    /* Font name */
    .font-alter,

    /* Dropcap */
    .dropcap:first-letter

    /* Font */
    { font-family: "Raleway", sans-serif; }



    /* Font system
    ---------------------------------------------------------- */
    /* Text & Label */
    .text-code,
    .label.code
    { font-family: "Source Code Pro", monospace, serif; }




/*  Base CSS
============================================================== */
    html { height: 100%; }
    body {
        color: #444;
        font-size: 14px;
        line-height: 21px;
        border-top-width: 0;
        border-top-color: #cc0055;
        -webkit-text-size-adjust: 100%;
    }




/* Box Layout
============================================================== */
    .layout-box {
        padding: 30px 0;
        background: transparent url(../imgs/pixel_weave.png) repeat;
    }
    .layout-box > div {
        margin-left: auto; margin-right: auto;
        background-color: #fff;
    }

    /* Layout Box Media queries */
    .layout-box > div                           { width: 1040px; }

    @media only screen and (min-width: 960px) and (max-width: 1040px) {
        .layout-box > div                       { width: auto; }
    }


    @media only screen and (min-width: 1282px) {
        .layout-box > div                       { width: 1256px; }
    }


    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .layout-box                             { padding: 20px 0; }
        .layout-box > div                       { width: 788px; }
    }
    @media only screen and (min-width: 768px) and (max-width: 788px) {
        .layout-box > div                       { width: auto; }
    }


    @media only screen and (max-width: 767px) {
        .layout-box                             { padding: 20px 20px; }
        .layout-box > div                       { width: auto; }
    }




/*  Background color
============================================================== */
    .dark                                           { background-color: #444; color: #eee; }
    .bg-light                                       { color: #333; }
    .bg-dark                                        { color: #fff; }


    /* Font & Typography
    ---------------------------------------------------------- */

    /* Title */
    .bg-dark article > .title                       { color: hsla(0,0%,100%,.7); }
    .bg-dark .title-up                              { background-color: hsla(0,0%,100%,.15); color: hsla(0,0%,100%,.5); }

    /* Border */
    .bg-dark .bo-t,
    .bg-dark .bo-b                                  { border-color: hsla(0,0%,100%,.5); }

    /* Show */
    .bg-dark .show-list,
    .bg-dark .show-list > li,
    .bg-dark .show-full > article,
    .bg-dark .show-full > li                        { border-color: hsla(0,0%,100%,.5); }
    .bg-dark .show-full .meta > span                { color: hsla(0,0%,100%,.5) }



    /* Navigaiton - Pagination - Show - Slider
    ---------------------------------------------------------- */

    /* Show */
    .dark .show-list,
    .dark .show-list > li,
    .dark .show-full > article,
    .dark .show-full > li                       { border-color: #666; }

    .dark .show-full > article:hover,
    .dark .show-full > li:hover                 { border-color: #cc0055; }
    .dark .show-full .meta > .title             { color: #fff; }
    .dark .show-full .meta > span               { color: #666; }
    .dark .show-full .meta:hover > .title       { color: #cc0055; }



    /* Portfolio
    ---------------------------------------------------------- */
    .dark .portfolio.single .meta,
    .dark .portfolio.single .meta a             { color: #ccc; }



    /* Layout Box
    ---------------------------------------------------------- */
    .layout-box.dark > div,
    .layout-box .dark                           { background-color: #444; }




/* Background Others
============================================================== */

    .bg-white                                   { background-color: #fff !important; }
    .bg-black                                   { background-color: #333 !important; }

    .bg-blue                                    { background-color: #1e90ff !important; }
    .bg-cyan                                    { background-color: #40e0d0 !important; }
    .bg-green                                   { background-color: #32cd32 !important; }
    .bg-olive                                   { background-color: #808000 !important; }
    .bg-orange                                  { background-color: #ffa500 !important; }
    .bg-pink                                    { background-color: #ff69b4 !important; }
    .bg-purple                                  { background-color: #800080 !important; }
    .bg-red                                     { background-color: #dc143c !important; }
    .bg-teal                                    { background-color: #008080 !important; }
    .bg-yellow                                  { background-color: #ffcc00 !important; }



    /* Background Highlight
    ---------------------------------------------------------- */
    /*body.bg-hl,
    body .bg-hl,
    body .bg-hl.dark                            { background-color: #cc0055; }*/

    .bg-hl                                      { background-color: #cc0055 !important; }
    .color-hl                                   { color: #cc0055 !important; }




    /* Background Transparent
    ---------------------------------------------------------- */
    body .bg-trans { background-color: transparent; }


    /* Background Image
    ---------------------------------------------------------- */
    .bg-img {
        overflow: hidden;
        width: 100%; height: 100%;
        left: 0; top: 0;
        background-color: #333;
        text-align: center;
    }
    /* Background type */
    .fullscreen, bg-wrap                            { background-color: #444; }
    .fullscreen .bg-img                             { position: fixed; z-index: -1; }
    .bg-wrap                                        { position: relative; }
    .bg-wrap .bg-img                                { position: absolute; }

    /*.ie7 .c-inner { z-index: 1; }
    .ie7 .bg-img { z-index: 2; }
    .ie7 .bg-img > img { display: block; z-index: 3; }
    .ie7 .bg-img ~ * { z-index: 99; }*/



    /* Image */
    .bg-img > img {
        position: absolute;
        display: inline-block;
        width: 100%; height: auto;
        left: 0; top: 0;

        /*-webkit-transition: -webkit-transform .05s;
           -moz-transition:    -moz-transform .05s;
                transition:         transform .05s;*/

        /*-webkit-transform: scale(0);*/
        -webkit-transform-origin: 0 0;
           -moz-transform-origin: 0 0;
                transform-origin: 0 0;
    }
    .bg-img.ready > img                           { width: auto; }

    /* Background Overlay */
    .bg-img [class*="overlay-"] {
        position: absolute;
        left: 0; top: 0;
        width: 100%; height: 100%;
        background-repeat: repeat;
    }
    .bg-img .overlay-light { background-image: url(../imgs/background/pattern_dot_light.png); }
    .bg-img .overlay-dark { background-image: url(../imgs/background/pattern_dot_dark.png); }




/*  Typography
============================================================== */

    /* Heading
    ---------------------------------------------------------- */
    h1, h2, h3,
    h4, h5, h6 {
        margin: 0;
        color: #181818;
        word-wrap: break-word;
    }
    h1, h2         { font-weight: 100; }
    h3, h4, h5, h6 { font-weight: 300; }

    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
    h1 { font-size: 46px; line-height: 50px; margin-bottom: 20px; }
    h2 { font-size: 35px; line-height: 40px; margin-bottom: 20px; }
    h3 { font-size: 28px; line-height: 34px; margin-bottom: 15px; }
    h4 { font-size: 21px; line-height: 30px; margin-bottom: 15px; }
    h5 { font-size: 17px; line-height: 24px; margin-bottom: 10px; }
    h6 { font-size: 14px; line-height: 21px; margin-bottom: 10px; }
    .subheader                      { color: #777; }

    /* Heading Background color */
    .dark h1, .dark h2,
    .dark h3, .dark h4,
    .dark h5, .dark h6              { color: #fff; }

    .bg-dark h1, .bg-dark h2,
    .bg-dark h3, .bg-dark h4,
    .bg-dark h5, .bg-dark h6        { color: #fff; }



    /* Paragraph
    ---------------------------------------------------------- */
    p                               { margin: 0 0 20px 0; }
    p img                           { margin: 0; }
    p.lead                          { font-size: 21px; line-height: 27px; color: #777;  }
    em                              { font-style: italic; }



    /* Text Emphasis
    ---------------------------------------------------------- */
    .strong, .bold                  { font-weight: bold; }
    .thin                           { font-weight: 100; }
    .light                          { font-weight: 300; }

    /* Special Class for Alert & Label */
    .info                           { background-color: #d9f9f9 !important; color: #09e !important; }
    .warning                        { background-color: #fff777 !important; color: #a80 !important; }
    .error                          { background-color: #f9d9d9 !important; color: #c00 !important; }
    .success                        { background-color: #d0f0c0 !important; color: #248800 !important; }

    /* Text emphasis */
    .text-info                      { color: #0099dd !important; }
    .text-success                   { color: #33bb00 !important; }
    .text-warning                   { color: #ddaa00 !important; }
    .text-error                     { color: #dd0000 !important; }
    [class*="dark"] .text-info      { color: #88c0ff !important; }
    [class*="dark"] .text-success   { color: #44ff00 !important; }
    [class*="dark"] .text-warning   { color: #ffcc00 !important; }
    [class*="dark"] .text-error     { color: #ff3030 !important; }

    .muted                          { color: #999; }
    .dark          .muted           { color: #ccc; }
    .bg-light      .muted           { color: #666; }
    .bg-dark       .muted           { color: #fff; }
    .hsla .bg-dark .muted           { color: hsla(0,0%,100%,.8); }

    .text-highlight                 { color: #cc0055; }

    /* Text others */
    .text-small                     { font-size: 85% !important; line-height: 1.5em; }



    /* Label
    ---------------------------------------------------------- */
    .label {
        background-color: #666;
        color: #fff;
        padding-left: 5px; padding-right: 5px;
        padding-top: 1px; padding-bottom: 2px;
    }
    .label.highlight                { background-color: #cc0055; color: #fff; }
    /*.label.code                     { background-color: transparent!important; color: #444; border: 1px dashed #ccc; }*/
    .label.code                     { background-color: #f5f5f5; color: #dd0000; border: 1px dashed #ddd; }

    /* Background color */
    .dark .label                    { background-color: #fff; color: #444; }
    .dark .label.highlight          { background-color: #cc0055; color: #fff; }
    .dark .label.code               { color: #eee; }

    .bg-light .label.code           { border-color: hsla(0,0%,0%,.2); }

    .bg-dark .label                 { background-color: #fff; color: #333; }
    .bg-dark .label.code            { border-color: #fff; color: #fff; }


    .bg-hl.dark .label.highlight,
    .bg-hl.bg-dark .label.highlight
    { background-color: #333; background-color: hsla(0,0%,0%,.25); }



    /* Dropcaps
    ---------------------------------------------------------- */
    .dropcap:first-letter {
        float: left;
        padding: 0.3em 0.2em 0 0;

        color: #cc0055;
        font-size: 3em;
        font-weight: bold;
        *line-height: 1em;                      /* Fix IE7 */
    }
    .dropcap.dc-muted:first-letter { color: #999; }

    /* Dropcaps Bg-light */
    .bg-light .dropcap:first-letter { color: #333; }
    .bg-light .dropcap.dc-muted:first-letter { color: #777; }

    /* Dropcaps Bg-dark */
    .bg-dark .dropcap:first-letter { color: #fff; }
    .bg-dark .dropcap.dc-muted:first-letter { color: hsla(0,0%,100%,.75); }



    /* Blockquote
    ---------------------------------------------------------- */

    /* Basic style */
    blockquote {
        margin: 0 0 20px;
        padding: 0 20px;
        border-left: 4px solid #cc0055;
    }
    blockquote, blockquote p {
        font-size: 17px;
        line-height: 24px;
        color: #777;
        font-style: italic;
    }

    /* Cite - blockquote author */
    blockquote cite {
        display: block;
        color: #555;
        font-size: 12px;
    }
    blockquote cite:before                  { content: "\2014 \0020"; }
    blockquote cite a,
    blockquote cite a:visited               { color: #555; }


    /* Highlight */
    .bq-highlight > blockquote {
        position: relative;
        margin-bottom: 34px;
        padding-bottom: 10px;

        border-width: 1px 1px 4px 1px;
        border-style: solid;
        border-color: #cc0055;
    }
    .bq-highlight > blockquote:first-letter {
        float: left;
        padding: 0.25em 0.2em 0 0;

        color: #cc0055;
        font-size: 3em;
        font-weight: bold;
        *line-height: 1em;        /* Fix IE7 */
    }
    .bq-highlight > blockquote:after {
        content: "";
        display: block;
        position: absolute;
        left: 20px; top: 100%;
        width: 0; height: 0;

        border-width: 0 30px 26px 0;
        border-style: solid;
        border-color: transparent #cc0055 transparent transparent;
    }

    /* Blockquote Author */
    .bq-highlight                           { margin-bottom: 30px; }
    .bq-highlight > figure                  { margin: -30px 0 0 55px; }
    .bq-highlight > figure > .author        { display: block; float: left; }
    .bq-highlight > figure img              { margin-right: 10px; }
    .bq-highlight > figure .name,
    .bq-highlight > figure .name > *        { color: #cc0055; margin-bottom: 0; }
    .bq-highlight > figure > .others        { color: #999; font-size: .85em; }


    /* Blockquote background color */
    .dark blockquote, .dark blockquote p    { color: #ccc; }
    .dark blockquote cite                   { color: #eee; }
    .bg-light blockquote                    { border-left-color: #999; }
    .bg-light blockquote cite               { color: #333; }

    .bg-dark blockquote, .bg-dark blockquote p
    { color: #fff; color: hsla(0,0%,100%,.8); }
    .bg-dark blockquote                     { border-left-color: #fff; border-left-color: hsla(0,0%,100%,.8); }
    .bg-dark blockquote cite                { color: #fff; }




    /* Text box
    ---------------------------------------------------------- */
    .text-box {
        display: block;
        padding: 30px;
        border: 1px solid #e5e5e5;
    }
    .text-box > * { margin-bottom: 0; }
    .text-box:before {
        display: block;
        content: " ";
        position: absolute;
        width: 100%; height: 100%;
        left: 0; top: 0;
        background-color: #eee;
        border: 5px solid #fff;
        z-index: -1;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }





    /*  List
    ---------------------------------------------------------- */
    /* List reset */
    ul, ol                                  { margin-bottom: 20px; }
    ul                                      { list-style: none; }
    ol                                      { list-style: decimal inside; }

    ul ul, ul ol,
    ol ol, ol ul                            { margin: 4px 0 6px 20px; font-size: 90%;  }
    ul ul li, ul ol li,
    ol ol li, ol ul li                      { margin-bottom: 6px; }

    li                                      { line-height: 18px; margin-bottom: 12px; }
    li p                                    { line-height: 21px; }


    /* List basic */
    ol.alpha                                { list-style-type:upper-alpha; }
    ol.roman                                { list-style-type:upper-roman; }
    .list                                   { padding-left: 0; }
    .list li                                { position: relative; padding-left: 20px; line-height: 21px; }


    /* Bullet styles */
    .list li:before,
    .list li:after {
        content: "";
        display: block;
        position: absolute;
        left: 0; top: 0;
        background-color: #ccc;
    }
    .list li:before                         { width: 4px; height: 4px; top: 9px; }

    .list.round li:before                   { width: 5px; height: 5px; border-radius: 50%; top: 8px; }

    .list[class*="cross"] li                { padding-left: 25px; }
    .list[class*="cross"] li:before         { width: 9px; height: 1px; }
    .list[class*="cross"] li:after          { width: 1px; height: 9px; left: 4px; top: 6px; }
    .list.cross   li:before                 { top: 10px; }
    .list.cross-2 li:before                 { height: 3px; }
    .list.cross-2 li:after                  { width: 3px; left: 3px; top: 6px; }

    .list[class*="line"] li:before          { width: 5px; height: 1px; top: 9px; }
    .list.line-2 li:before                  { width: 6px; height: 2px; }

    .list.tri li:before {
        width: 0; height: 0;
        top: 6px;
        background-color: transparent !important;
        border: 4px solid transparent;
        border-left-color: #ccc;
    }

    .list[class*="arrow"] li:before {
        width: 2px; height: 5px; top: 9px;
        -webkit-transform: rotate(40deg);
           -moz-transform: rotate(40deg);
                transform: rotate(40deg);
    }
    .list[class*="arrow"] li:after {
        width: 2px; height: 5px;
        left: 0; top: 6px;
        -webkit-transform: rotate(-40deg);
           -moz-transform: rotate(-40deg);
                transform: rotate(-40deg);
    }
    .list[class*="arrow"]:after             { display: none; }      /* remove clearfix */
    /*.list.arrow-2 li:before,
    .list.arrow-2 li:after                  { width: 3px; height: 6px; }*/

    .list[class*="check"] li                { padding-left: 25px; }
    .list[class*="check"] li:before,
    .list[class*="check"] li:after {
        -webkit-transform: rotate(30deg);
           -moz-transform: rotate(30deg);
                transform: rotate(30deg);
    }
    .list[class*="check"] li:before         { width: 5px; height: 2px; top: 10px; }
    .list[class*="check"] li:after          { width: 2px; height: 9px; left: 5px; top: 5px; }
    .list.check-2 li:before                 { height: 3px; top: 9px; }
    .list.check-2 li:after                  { width: 3px; height: 10px; top: 4px; }


    /* List Hover */
    ul.hover li:hover,
    ul.hover li:hover > *,
    .list.hover li:hover,
    .list.hover li:hover > *                { color: #cc0055; }
    .list.hover li:hover:before,
    .list.hover li:hover:after              { background-color: #cc0055; }
    .list.hover > li:hover ul               { color: #444; }
    .list.hover.tri li:hover:before         { border-left-color: #cc0055; }


    /* List Condensed */
    ol.condensed li,
    .list.condensed li                      { margin-bottom: 3px; }

    /* List IE7 fixed */
    .ie7 ul.list                            { list-style: disc inside; }
    .ie7 ul.list li                         { padding-left: 0; }


    /* List background color */
    .dark .list li:before,
    .dark .list li:after                    { background-color: #777; border-left-color: #777; }
    .bg-light .list li:before,
    .bg-light .list li:after                { background-color: #999; border-left-color: #999; }
    .bg-dark .list li:before,
    .bg-dark .list li:after                 { background-color: #fff; border-left-color: #fff; }

    .bg-light ul.hover li:hover,
    .bg-light ul.hover li:hover > *,
    .bg-light .list.hover li:hover,
    .bg-light .list.hover li:hover > *      { color: inherit; }
    .bg-light .list.hover li:hover:before,
    .bg-light .list.hover li:hover:after    { background-color: #333; border-left-color: #333; }
    .bg-light .list.hover > li:hover ul     { color: inherit; }

    .bg-dark ul.hover li:hover,
    .bg-dark ul.hover li:hover > *,
    .bg-dark .list.hover li:hover,
    .bg-dark .list.hover li:hover > *       { color: inherit; }
    .bg-dark .list.hover li:hover:before,
    .bg-dark .list.hover li:hover:after     { background-color: #fff; border-left-color: #fff; }
    .bg-dark .list.hover > li:hover ul      { color: inherit; }





    /*  Link
    ---------------------------------------------------------- */
    a, a:visited                            { color: #444; text-decoration: none; outline-width: 0; }
    a:hover, a:focus                        { color: #cc0055; }

    a:focus                                 { background-color: transparent; }          /* Fix All IE */
    p a                                     { line-height: inherit; text-decoration: underline; }
    a.no-deco                               { text-decoration: none; }

    /* Muted link */
    a.muted, .muted a                       { color: #999; }
    a.muted:hover, .muted a:hover,
    a.muted:focus, .muted a:focus           { color: #cc0055; }

    /* Bacground color */
    .dark a, .dark a:visited                { color: #eee; }
    .dark a:hover, .dark a:focus            { color: #cc0055; }
    .bg-light a, .bg-light a:visited        { color: #333; }
    .bg-dark  a, .bg-dark  a:visited        { color: #fff; }

    .dark a.muted, .dark .muted a                       { color: #ccc; }
    .dark a.muted:hover, .dark .muted a:hover,
    .dark a.muted:focus, .dark .muted a:focus           { color: #cc0055; }
    .bg-light a.muted, .bg-light .muted a               { color: #666; }
    .bg-dark  a.muted, .bg-dark  .muted a               { color: #fff; }
    .hsla .bg-dark a.muted, .hsla .bg-dark .muted a     { color: hsla(0,0%,100%,.8); }

    /* Element other */
    a:hover h1, a:hover h2,
    a:hover h3, a:hover h4,
    a:hover h5, a:hover h6                  { color: inherit; }



    /* Prettyprint
    ---------------------------------------------------------- */
    .prettyprint, .prettyall {
        margin-top: 0; margin-bottom: 20px;
        /*padding: 10px;*/
        padding: 0 15px;

        /*border: 1px solid #e5e5e5;*/
        border-left: 1px dashed #d5d5d5;
        background-color: #fff;
        font-family: "Source Code Pro", monospace, sans-serif;
        font-size: 12px;
        line-height: 19px;
    }
    .prettyprint span { word-wrap: break-word; }
    .prettyall > .prettyprint {
        padding: 0;
        border-width: 0;
    }
    .prettyall > .prettyprint:last-child { margin-bottom: 0; }



    /* Title
    ---------------------------------------------------------- */
    .title-line {
        margin-bottom: 25px;
        padding-bottom: 0px;
        border-bottom: 1px solid #e5e5e5;
    }
    .title-line:after {
        content: " ";
        display: block;
        /*position: absolute;*/
        width: 50px; height: 1px;
        /*bottom: -1px;*/
        margin-bottom: -1px;
        background-color: #cc0055;
    }
    .title-line *                       { margin-bottom: 0; }

    /* Title other */
    article > .title-muted              { margin-bottom: 10px; color: #999; }
    .title-up {
        position: absolute;
        padding: 2px 10px;
        top: -50px;
        background-color: #f5f5f5;
        color: #999;
        font-size: .85em;
    }

    /* Title background color */
    .dark     .title                    { border-bottom-color: #222; }
    .bg-light .title                    { border-bottom-color: #999; border-bottom-color: hsla(0,0%,0%,.1); }
    .bg-light .title:after              { background-color: #333; }
    .bg-dark  .title                    { border-bottom-color: #444; border-bottom-color: hsla(0,0%,100%,.2); }
    .bg-dark  .title:after              { background-color: #fff; }

    .dark article > .title              { color: #aaa; }
    .dark .title-up                     { background-color: #222; color: #666; }





    /*  HR class
    ---------------------------------------------------------- */
    .hr {
        position: relative;
        height: 1px;
        clear: both;
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: #e5e5e5;

        /*border: solid #e5e5e5;
        border-width: 1px 0 0;*/
    }

    /* HR margin */
    .hr.short { margin-top: 10px; margin-bottom: 10px; }
    .hr.long { margin-top: 100px; margin-bottom: 100px; }


    /* HR alternative style */
    .hr.dash:after {
        content: " ";
        display: block;
        position: absolute;
        width: 50px; height: 3px;
        left: 50%; top: -1px;
        margin-left: -25px;
        background-color: #cc0055;
    }
    .hr.dash.none { background-color: transparent; }

    .hr.cross:before, .hr.cross:after {
        content: " ";
        display: block;
        position: absolute;
        left: 50%; top: 0;
        background-color: #cc0055;
    }
    .hr.cross:before                { width: 11px; height: 3px; margin-left: -6px; margin-top: -1px; }
    .hr.cross:after                 { width: 3px; height: 11px; margin-left: -2px; margin-top: -5px; }


    /* HR position */
    .hr.dash.left:after             { left: 0; margin-left: 0; }
    .hr.dash.right:after            { left: 100%; margin-left: -50px; }

    .hr.cross.left:before           { left: 0; margin-left: 0; }
    .hr.cross.left:after            { left: 0; margin-left: 4px; }
    .hr.cross.right:before          { left: 100%; margin-left: -11px; }
    .hr.cross.right:after           { left: 100%; margin-left: -7px; }


    /* HR bacground color */
    .dark .hr                       { background-color: #222; }
    .bg-light .hr                   { background-color: #666; background-color: hsla(0,0%,0%,.1); }
    .bg-light .hr:before, .bg-light .hr:after       { background-color: #333; }

    .bg-dark .hr                    { background-color: #fff; background-color: hsla(0,0%,100%,.2); }
    .bg-dark .hr:before, .bg-dark .hr:after         { background-color: #fff; }




/*  Basic CSS
============================================================== */

    /* Wrapper
    ---------------------------------------------------------- */
    .wrapper                        { padding-top: 50px; padding-bottom: 50px; }


    /* Iframe
    ---------------------------------------------------------- */
    iframe                          { margin-bottom: 20px; }


    /* Width Special
    ---------------------------------------------------------- */
    .fullwidth                      { width: 100%; }


    /* Left Right Center & Justify
    ---------------------------------------------------------- */
    .text-left                      { text-align: left; }
    .text-right                     { text-align: right; }
    .text-center                    { text-align: center; }
    .text-center > *,
    .text-center img                { margin-left: auto; margin-right: auto; }
    .text-justify                   { text-align: justify; }

    .pull-left                      { float: left !important; }
    .pull-right                     { float: right !important; }

    /* Border */
    .no-bo                          { border: none !important; }
    .bo-t                           { border-top: 1px dotted #ccc; }
    .bo-b                           { border-bottom: 1px dotted #ccc; }

    .bo-t,
    .bo-b                           { border-color: hsla(0,0%,0%,.2); }

    .bo-l-h                         { border-left: 1px solid #cc0055; padding-left: 20px; }
    .bo-r-h                         { border-right: 1px solid #cc0055; padding-right: 20px; }

    .dark .bo-t,
    .dark .bo-b                     { border-color: #666; border-color: hsla(0,0%,100%,.4); }


    /* Margin - Padding
    ---------------------------------------------------------- */
    /* Xem xet lai - co loai bo hay khong */
    .no-ma                          { margin: 0 !important; }
    .ma-10                          { margin-top: 10px !important;  margin-bottom: 10px !important; }
    .ma-20                          { margin-top: 20px !important;  margin-bottom: 20px !important; }
    .ma-50                          { margin-top: 50px !important;  margin-bottom: 50px !important; }
    .ma-100                         { margin-top: 100px !important; margin-bottom: 100px !important;}

    .ma-t-10                        { margin-top: 10px !important; }
    .ma-t-20                        { margin-top: 20px !important; }
    .ma-t-50                        { margin-top: 50px !important; }
    .ma-t-100                       { margin-top: 100px !important; }
    .ma-b-10                        { margin-bottom: 10px !important; }
    .ma-b-20                        { margin-bottom: 20px !important; }
    .ma-b-50                        { margin-bottom: 50px !important; }
    .ma-b-100                       { margin-bottom: 100px !important; }
    .ma-l-10                        { margin-left: 10px !important; }
    .ma-l-20                        { margin-left: 20px !important; }
    .ma-l-50                        { margin-left: 50px !important; }
    .ma-l-100                       { margin-left: 100px !important; }
    .ma-r-10                        { margin-right: 10px !important; }
    .ma-r-20                        { margin-right: 20px !important; }
    .ma-r-50                        { margin-right: 50px !important; }
    .ma-r-100                       { margin-right: 100px !important; }

    .no-pa                          { padding: 0 !important; }
    .pa-10                          { padding: 10px !important; }
    .pa-20                          { padding: 20px !important; }
    .pa-50                          { padding: 50px !important; }
    .pa-100                         { padding: 100px !important; }

    .pa-t-10                        { padding-top: 10px !important; }
    .pa-t-20                        { padding-top: 20px !important; }
    .pa-t-50                        { padding-top: 50px !important; }
    .pa-t-100                       { padding-top: 100px !important; }
    .pa-b-10                        { padding-bottom: 10px !important; }
    .pa-b-20                        { padding-bottom: 20px !important; }
    .pa-b-50                        { padding-bottom: 50px !important; }
    .pa-b-100                       { padding-bottom: 100px !important; }
    .pa-l-10                        { padding-left: 10px !important; }
    .pa-l-20                        { padding-left: 20px !important; }
    .pa-l-50                        { padding-left: 50px !important; }
    .pa-l-100                       { padding-left: 100px !important; }
    .pa-r-10                        { padding-right: 10px !important; }
    .pa-r-20                        { padding-right: 20px !important; }
    .pa-r-50                        { padding-right: 50px !important; }
    .pa-r-100                       { padding-right: 100px !important; }


    /* Responsive Utility
    ---------------------------------------------------------- */
    .show-desktop                   { } /* none css */
    .hide-desktop                   { display: none !important; }

    /* Responsive */
    @media only screen and (max-width: 767px) {
        .show-desktop               { display: none !important; }
        .hide-desktop               { display: inherit !important; }
    }

    /* Show - Hidden / Visible - Invisible */
    .hide                           { display: none !important; }
    .show                           { display: inherit !important; }
    .visible                        { visibility: visible; }
    .invisible                      { visibility: hidden; }


    /* Overflow & Affix */
    .overflow                       { overflow: hidden; }
    .affix                          { position: fixed; top: 40px; overflow: auto; }
    .inline,
    .inline > *                     { display: inline; }


    /* Button toggle */
    .btn-toggle ~ [class*="hide-"].actived { display: inherit !important; }




    /*  Form
    ---------------------------------------------------------- */
    form                                    { margin-bottom: 20px; }

    /* Basic style */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea {
        display: block;
        width: 220px; height: 38px;
        max-width: 100%;
        margin: 0 0 10px;
        padding: 9px 12px;
        border: 1px solid #e5e5e5;
        border-left-width: 4px;
        outline: none;
        background-color: transparent;
        color: #999;
        font-size: 14px;
        line-height: 18px;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;

        *height: 18px; *color: #444;            /* Fix IE7 */
    }

    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus,
    textarea:focus {
        border-color: #cc0055;
        color: #444;
    }

    /* Text area */
    textarea {
        min-height: 160px;
        resize: vertical;
        overflow-y: hidden;                 /* IE */
        line-height: 21px;
    }

    /* Checkbox & Radio */
    .checkbox {
        display: inline-block;
        padding-left: 20px;
        vertical-align: middle;
        cursor: pointer;
    }
    .checkbox input[type="checkbox"] {
        display: block;
        float: left;
        margin-left: -20px;
        cursor: pointer;
    }


    /* Fieldset - Legend & Label */
    fieldset {
        margin: 0 0 20px;
        padding: 5px 10px;
        border: 1px solid #e5e5e5;
    }

    label, legend { display: block; }
    legend {
        margin-bottom: 10px;
        padding-left: 5px; padding-right: 5px;
        font-style: italic;
    }
    label { padding-top: 5px; padding-bottom: 5px; }


    /* Form Block */
    form.block input[type="text"],
    form.block input[type="password"],
    form.block input[type="email"],
    form.block textarea,
    form.block select                               { width: 100%; }

    .ie7 form.block input[type="text"],
    .ie7 form.block input[type="password"],
    .ie7 form.block input[type="email"],
    .ie7 form.block textarea,
    .ie7 form.block select                          { width: 92.5%; padding-left: 3%; padding-right: 3%; }



    /* Input Icon */
    .input-icon                                     { position: relative; }
    .input-icon [class*="i-"] {
        position: absolute;
        left: 19px; top: 9px;
        margin-right: 0;
        font-size: 1.2em;
        color: #fff;
        text-align: left;

        *left: 11px; *top: 11px;
    }
    .input-icon [class*="i-"]:before                { margin-right: 0; margin-left: -50%; }

    .input-icon input[type="text"],
    .input-icon input[type="password"]              { border-left-width: 38px; }

    .ie7 form.block .input-icon                     { padding-right: 38px; }



    /* Input Large */
    input[type="text"].large,
    input[type="password"].large,
    .input-icon.large > input[type="text"],
    .input-icon.large > input[type="password"] {
        padding-top: 11px; padding-bottom: 11px;
        border-left-width: 6px;
        height: 48px; line-height: 24px;

        *height: 24px; /* Fix IE7 */
    }
    .input-icon.large > input[type="text"],
    .input-icon.large > input[type="password"] { border-left-width: 48px; }
    .input-icon.large > [class*="i-"] {
        left: 24px; *left: 16px;
        font-size: 1.6em;
        line-height: 28px;
    }
    .ie7 form.block .input-icon.large               { padding-right: 48px; }



    /* Form Theme-dark */
    .dark input[type="text"],
    .dark input[type="password"],
    .dark input[type="email"],
    .dark textarea                                  { border-color: #333; *color: #eee; }

    .dark input[type="text"]:focus,
    .dark input[type="password"]:focus,
    .dark input[type="email"]:focus,
    .dark textarea:focus                            { border-color: #cc0055; color: #eee; }

    .dark fieldset                                  { border-color: #333; }
    .dark legend                                    { color: #eee; }
    .dark .input-icon [class*="i-"]                 { color: #444; }


    /* Background light */
    .bg-light input[type="text"],
    .bg-light input[type="password"],
    .bg-light input[type="email"],
    .bg-light textarea                              { border-color: #999; }

    .bg-light input[type="text"]:focus,
    .bg-light input[type="password"]:focus,
    .bg-light input[type="email"]:focus,
    .bg-light textarea:focus                        { border-color: #333; color: #333; }

    .bg-light fieldset                              { border-color: #999; }


    /* Background dark */
    .bg-dark input[type="text"],
    .bg-dark input[type="password"],
    .bg-dark input[type="email"],
    .bg-dark textarea { border-color: #fff; color: #fff; opacity: .5; }

    .bg-dark input[type="text"]:focus,
    .bg-dark input[type="password"]:focus,
    .bg-dark input[type="email"]:focus,
    .bg-dark textarea:focus { opacity: 1; }

    .bg-dark fieldset
    { border-color: #fff; border-color: hsla(0,0%,100%,.5); }
    .bg-dark legend                                 { color: #fff; }
    .bg-dark .input-icon [class*="i-"]              { color: #ccc; }

    .bg-dark ::-webkit-input-placeholder            { color: #fff; }
    .bg-dark :-moz-placeholder                      { color: #fff; }
    .bg-dark :-ms-input-placeholder                 { color: #fff; }



    /* Select Options
    ---------------------------------------------------------- */
    /* Select Default */
    select {
        width: 220px;
        margin: 0 0 10px;
        padding: 9px 10px;
        border: 1px solid #e5e5e5;
        outline: none;
        background-color: transparent;
        color: #444;
    }
    select:focus                                { border-color: #cc0055; }
    option                                      { margin-top: 10px; }


    /* Select alternative */
    .select {
        position: relative;
        display: inline-block;
        padding-bottom: 5px;
        z-index: 2;
    }
    .ie7 .select                                { *display: inline; zoom: 1; }
    .select:hover {
        border: 1px solid #e5e5e5;
        background-color: #fff;
    }

    .select li {
        height: 0;
        padding: 0;
        margin-bottom: 0;
        cursor: pointer;
        text-indent: -9999px;

        /* CSS Transition */
        -webkit-transition: padding-top .25s, padding-bottom .25s;
           -moz-transition: padding-top .25s, padding-bottom .25s;
                transition: padding-top .25s, padding-bottom .25s;
    }
    .select li:hover                            { color: #cc0055; }
    .select li.selected                         { border-bottom: 1px dotted #ddd; }
    .select li.selected,
    .select:hover li {
        height: auto;
        padding: 10px 28px 10px 12px;
        text-indent: 0;
    }

    .select.right li                            { text-align: left; }
    .select.right:hover li,
    .select.right li.selected                   { padding: 10px 12px 10px 28px; text-align: right; }

    .select:hover li.selected                   { color: #cc0055; }

    /* Select Arrow */
    .select:after {
        content: "";
        position: absolute;
        display: block;
        width: 0; height: 0;
        right: 10px; top: 18px;

        border: 4px solid transparent;
        border-top-color: #999;
        border-top-color: hsla(0,0%,0%,.2);
    }
    .select:hover:after {
        top: 14px;
        border-top-color: transparent;
        border-bottom-color: #999;
        border-bottom-color: hsla(0,0%,0%,.2);
    }
    .select.right:after                         { left: 10px; right: auto;}


    /* Select Background color */
    .dark select                                { background-color: #444; border-color: #333; color: #eee; }
    .dark select:focus                          { border-color: #cc0055; }

    .dark .select:hover                         { background-color: #333; border-width: 0; }
    .dark .select .selected                     { border-bottom-color: #333; }
    .dark .select:hover li.selected             { border-bottom-color: #222; }
    .dark .select li:hover                      { color: #cc0055; }
    .dark .select:after                         { border-top-color: #999; }
    .dark .select:hover:after                   { border-top-color: transparent; border-bottom-color: #999; }


    .bg-light select                            { border-color: #999; background-color: #fff; }
    .bg-light .select:hover                     { border-color: #999; color: #333; }
    .bg-light .select .selected                 { border-color: #999; }

    .bg-light .select li:hover,
    .bg-light .select:hover li.selected         { color: #333; }


    .bg-dark select                             { background-color: #444; border-color: #444; color: #fff; }

    .bg-dark .select:hover                      { background-color: #444; border-width: 0; }
    .bg-dark .select li                         { color: #fff; }
    .bg-dark .select li:hover,
    .bg-dark .select:hover li.selected          { color: #fff; }
    .bg-dark .select .selected                  { border-bottom-color: #fff; }
    .hsla .bg-dark .select .selected            { border-bottom-color: hsla(0,0%,100%,.5); }




    /* Social
    ---------------------------------------------------------- */
    .social .title {
        float: left;
        border-right: 1px dotted #ccc;
        padding-right: 10px;
        margin-bottom: 0;
        font-size: .85em;
    }
    .social .items                              { float: left; }

    /* Social clearfix */
    .social:after {
        content: " ";
        display: table;
        clear: both;
    }
    .social { *zoom: 1; }

    /* Social icon */
    .social [class*="i-"] {
        position: relative;
        display: inline-block;
        overflow-y: hidden;
        width: 24px; height: 24px;
        font-size: 1.4em;
        text-indent: -9999px;
    }
    .ie7 .social [class*="i-"]                  { text-indent: 0; }
    .social > .title + .items > [class*="i-"],
    .ie7 .title + .items
    { margin-left: 10px; margin-right: 0; }

    .social [class*="i-"]:before,
    .social [class*="i-"]:after {
        position: absolute;
        display: block;
        width: 100%; height: 100%;
        margin-top: 3px;
        text-indent: 0;

        /* Css Transition */
        -webkit-transition: top .15s;
           -moz-transition: top .15s;
                transition: top .15s;
    }

    /* Social icon color */
    .social [class*="i-"]:before        { color: #999; }
    .ie8 .social [class*="i-"]:before   {
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    }

    /* Icon hover transition */
    .social [class*="i-"]:before        { top: 0; }
    .social [class*="i-"]:after         { top: 100%; }
    .social [class*="i-"]:hover:before  { top: -100%; }
    .social [class*="i-"]:hover:after   { top: 0; }

    /* Icon without transition */
    .social .fx-none[class*="i-"]:before,
    .social .fx-none[class*="i-"]:after {
        -webkit-transition: none;
           -moz-transition: none;
                transition: none;
    }

    /* Icon with tooltip */
    .social .tooltip                    { display: inline-block; border-bottom-width: 0; }
    .social .tooltip [class*="i-"]      { z-index: 2; }

    /* Social Background color */
    .dark .social .title                        { border-right-color: #666; }
    .dark .social [class*="i-"]:hover           { background-color: #fff; }
    .ie7  .dark .social [class*="i-"]           { background-color: transparent; }

    .bg-light .social .title                    { border-right-color: #999; }
    .bg-light .social [class*="i-"]:before      { color: #666; opacity: .5; }

    .bg-dark .social .title                     { border-right-color: #fff; }
    .bg-dark .social [class*="i-"]:before       { color: #fff; opacity: .5; }
    .bg-dark .social [class*="i-"]:hover        { background-color: #fff; }
    .ie7 .bg-dark .social [class*="i-"]         { background-color: transparent; }



    /* Center vertical
    ---------------------------------------------------------- */
    body.center-ver { height: 100%; }

    .center-ver {
        display: table;
        width: 100%;
    }
    .center-ver > .c-outer {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }


    /* Fix IE7 */
    .ie7 .center-ver { position: relative; }
    .ie7 .center-ver > .c-outer { position: absolute; bottom: 50%; }
    .ie7 .center-ver .c-inner { position: relative; bottom: -50%; }





/*  Button
============================================================== */

    /* Button Basic Style
    ---------------------------------------------------------- */
    .btn {
        display: inline-block;
        height: 38px;
        margin: 0 0 20px;
        padding: 0 20px;

        border: 1px solid #e5e5e5;
        background-color: transparent;
        color: #999;
        font-size: .85em;
        line-height: 36px;
        outline: 0;
        text-decoration: none;
        cursor: pointer;

        *display: inline;
        zoom: 1;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    a.btn                                               { color: #999; }

    .btn:hover                                          { border-color: #999; color: #333; }
    .btn:active                                         { border-color: #333; }

    /* Fix IE */
    /* Remove Extra Width in IE7 */
    .ie7 button,
    .ie7 input[type="button"],
    .ie7 input[type="submit"],
    .ie7 input[type="reset"]                            { overflow: visible; }

    .ie7 button.btn, .ie7 input.btn                     { *line-height: 33px; }


    /* Button Dimensions
    ---------------------------------------------------------- */
    .btn.small {
        padding-left: 15px; padding-right: 15px;
        height: 32px; line-height: 30px;
    }
    .btn.large {
        padding-left: 30px; padding-right: 30px;
        font-size: 1em;
        height: 48px; line-height: 46px;
    }
    .btn.mega {
        padding-left: 45px; padding-right: 45px;
        font-size: 1.2em;
        height: 70px; line-height: 68px;
    }
    .btn.mega [class*="i-"] { margin-right: 20px; font-size: 1.6em; line-height: 1em; }
    .btn.mega [class*="i-"].right { margin-left: 20px; }

    .ie7 button.btn.small, .ie7 input.btn.small { *line-height: 27px; }
    .ie7 button.btn.large, .ie7 input.btn.large { *line-height: 41px; }


    /* Button Style
    ---------------------------------------------------------- */
    /* Buttron Link */
    .btn.link                                           { padding-top: 1px; padding-bottom: 1px; border: none; }
    .btn.link:active                                    { background-color: #f5f5f5; }

    /* Button Dash */
    .btn.dash                                           { border-width: 0 0 3px 0; }

    /* Button Background */
    .btn.bg {
        padding-top: 1px; padding-bottom: 1px;
        border: none;
        background-color: #666;
        color: #fff;
    }
    .btn.bg:hover                                       { background-color: #444; }
    .btn.bg:active                                      { background-color: #222; }



    /* Button Block
    ---------------------------------------------------------- */
    .btn.block{
        display: block;
        padding-left: 0; padding-right: 0;
        text-align: center;
    }
    [class*="row-"] > .btn.block                        { width: 100%; }



    /* Button Group
    ---------------------------------------------------------- */
    .btn-group { position: relative; overflow-y: hidden; }
    .btn-group .btn {
        float: left;
        width: 50%;
        margin-bottom: 0;
        padding-left: 0; padding-right: 0;
        text-align: center;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }

    .ie7 .btn-group .btn { width: 48.9%; }
    .ie7 .btn-group .btn.link,
    .ie7 .btn-group .btn.dash,
    .ie7 .btn-group .btn.bg { width: 50%; }

    /* Button Group Separated */
    .btn-group em {
        display: block;
        position: absolute;
        width: 28px; height: 28px;
        left: 50%; top: 50%;
        margin-left: -14px; margin-top: -14px;
        border-radius: 100%;
        z-index: 2;

        background-color: #333;
        color: #fff;
        text-align: center;
        font-size: 10px;
        line-height: 25px
    }
    .btn-group em.white { background-color: #fff; color: #444; }
    .btn-group em.small {
        width: 20px; height: 20px;
        margin-left: -10px; margin-top: -10px;
        line-height: 18px;
    }
    .btn-group em.large {
        width: 32px; height: 32px;
        margin-left: -16px; margin-top: -16px;
        font-size: 12px;
        line-height: 30px;
    }



    /* Button Highlight Color
    ---------------------------------------------------------- */
    .btn.highlight                                      { border-color: #cc0055 !important; color: #cc0055 !important; }
    .btn.highlight:hover                                { opacity: .5;  filter: alpha(opacity=50); }
    .btn.highlight:active                               { opacity: .25; filter: alpha(opacity=25); }

    .btn.bg.highlight                                   { background-color: #cc0055 !important; color: #fff !important; }



    /* Theme-dark Button
    ---------------------------------------------------------- */
    .dark .btn                                          { border-color: #333; color: #181818; }
    .dark .btn:hover                                    { border-color: #ccc; color: #ccc; }
    .dark .btn:active                                   { border-color: #fff; color: #fff; }

    /* Fix */
    .dark a.btn                                         { color: #181818; }

    /* Button Style */
    .dark .btn.link:active                              { background-color: #333; }
    .dark .btn.bg                                       { background-color: #333; color: #fff; }
    .dark .btn.bg:hover                                 { background-color: #ccc; color: #333; }
    .dark .btn.bg:active                                { background-color: #fff; color: #333; }


    /* Background Light Button
    ---------------------------------------------------------- */
    .bg-light .btn { border-color: #999; }
    .bg-light .btn:hover, .bg-light .btn:focus { border-color: #444; color: #333; }

    /* Button Style */
    .bg-light .btn.link:active { background-color: hsla(0,0%,0%,.05); }
    .bg-light .btn.dash:active { background-color: hsla(0,0%,0%,.05);  border-bottom-color: #000; }
    .bg-light .btn.bg:hover    { color: #fff; }


    /* Background Dark Button
    ---------------------------------------------------------- */
    .bg-dark .btn { border-color: #fff; color: #fff; opacity: .5; filter: alpha(opacity=50); }
    .bg-dark .btn:hover { opacity: .85; filter: alpha(opacity=85); }
    .bg-dark .btn:active { opacity: 1; filter: alpha(opacity=100); }

    /* Button Style */
    .bg-dark .btn.link:hover { opacity: 1; background-color: transparent; }
    .bg-dark .btn.link:active { opacity: 1; background-color: hsla(0,0%,0%,.05); }
    .bg-dark .btn.bg { background-color: #fff; color: #333; }






/*  Image
============================================================== */

    /*  Image Basic
    ---------------------------------------------------------- */
    img                                         { }
    figure > *                                  { margin-bottom: 20px; }

    /* Image Group : Blog */
    .fig-group                                  { overflow: hidden; }
    .fig-group a                                { float: left; }
    .fig-group a:nth-child(n + 3)               { width: 33.33%; }
    .fig-group a:nth-child(1),
    .fig-group a:nth-child(2)                   { width: 50%; }
    .fig-group img                              { width: 100%; height: auto; }

    /* Image Full-width */
    figure.img-full img,
    .img-full                                   { display: block; width: 100%; height: auto; }



    /*  Image box
    ---------------------------------------------------------- */
    .img-box {
        display: block;
        padding: 4px;
        border: 1px solid #e5e5e5;
    }
    .img-box > img,
    .img-box > .player { margin-bottom: 0; }



    /*  Image special & type
    ---------------------------------------------------------- */

    /* Image special */
    .thumbnail .spec {
        display: block;
        position: absolute;
        width: 0; height: 0;
        right: 0; top: 0;
        text-indent: -9999px;

        border-style: solid;
        border-width: 0 50px 50px 0;
        border-color: transparent #cc0055 transparent transparent;
        color: #fff;
    }
    .thumbnail .spec[class*="i-"] {
        margin-right: 0;
        text-indent: 0;
        font-size: 15px;
    }
    .thumbnail .spec[class*="i-"]:before {
        display: block;
        position: absolute;
        left: 28px; top: 6px;

        line-height: 1em;
        text-align: center;
        text-indent: 0;
    }
    .ie7 .thumbnail .spec[class*="i-"] {
        line-height: 30px;
        text-indent: 28px;
    }


    /* Image type */
    .thumbnail .type {
        display: block;
        position: absolute;
        right: 12px; bottom: 12px;
        color: #fff;
    }
    .thumbnail .type[class*="i-"] {
        margin-right: 0;
        opacity: .5;
        filter: progid:DXImageTransform.Miscrosoft.Alpha(Opacity=50);
        filter: alpha(opacity=50);

        font-size: 24px;
    }




    /*  Lightbox plugin
    ---------------------------------------------------------- */
    /* Basic css */
    .lightbox {
        position: absolute;
        width: 100%;
        left: 0;
        z-index: 11;
        font-weight: normal;
    }
    .lb-outerContainer {
        position: relative;
        width: 250px; height: 250px;
        margin: 0 auto;
        background-color: white;
        *zoom: 1;
    }
    .lb-outerContainer:after {
        content: " ";
        display: table;
        clear: both;
    }
    .lb-container { padding: 6px; }


    /* Lightbox overlay */
    .lightboxOverlay {
        display: none;
        position: absolute;
        top: 0; left: 0;
        z-index: 11;
        background-color: black;

        opacity: .8;
        /*filter: progid:DXImageTransform.Miscrosoft.Alpha(Opacity=80);*/
        filter: alpha(opacity=80);
    }


    /* Lightbox Image */
    .lightbox .lb-image {
        display: block;
        height: auto;
        max-width: inherit;
    }
    .lightbox a img { border: none; }


    /* Icon loading */
    .lb-loader {
        position: absolute;
        top: 50%; left: 0%;
        width: 100%;
        margin-top: -2em;
        text-align: center;
        line-height: 0;
    }
    a.lb-cancel {
        display: block;
        margin: 0 auto;
        color: #ddd;
        font-size: 4em;

        -webkit-animation: loading-rotate 2s linear infinite;
                animation: loading-rotate 2s linear infinite;
    }

    @-webkit-keyframes loading-rotate {
        0% { -webkit-transform: rotate(0); }
        0% { -webkit-transform: rotate(360deg); }
    }
    @keyframes loading-rotate {
        0% { transform: rotate(0); }
        0% { transform: rotate(360deg); }
    }

    .ie7 a.lb-cancel { font-size: 4em; }


    /* Lightbox navigation */
    .lb-nav {
        position: absolute;
        top: 0; left: 0;
        height: 100%; width: 100%;
        z-index: 11;
    }
    a.lb-prev, a.lb-next {
        cursor: pointer;
        width: 25%; height: 100%;
        display: block;         /* Trick IE into showing hover */

        -webkit-transition: opacity .4s;
           -moz-transition: opacity .4s;
                transition: opacity .4s;

        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
        text-shadow: 0 0 2px hsla(0,0%,0%,.4);

        color: #fff;
        font-size: 4em;
    }
    .lb-prev { float: left; left: 0; }
    .lb-next { float: right; right: 0; }
    .lb-prev > .i-left-mini, .lb-next > .i-right-mini {
        position: absolute;
        top: 50%;
        margin-top: -.6em;
    }
    .lb-prev > .i-left-mini { left: 20px; }
    .lb-next > .i-right-mini { right: 20px; }

    .ie7 .lb-prev > .i-left-mini,
    .ie7 .lb-next > .i-right-mini { margin-top: -2em; }

    a.lb-prev:hover, a.lb-next:hover {
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
    }


    /* Lightbox title */
    .lb-dataContainer {
        width: 100%;
        margin: 0 auto;
        padding-top: 10px;
        *zoom: 1;
    }

    .lb-dataContainer:after {
        content: " ";
        display: table;
        clear: both;
    }
    .lb-data { color: #ccc; }
    .lb-data .lb-details {
        width: 85%;
        float: left;
        text-align: left;
        line-height: 1.1em;
    }
    .lb-data .lb-caption { color: #ccc; }
    .lb-data .lb-number {
        display: block;
        clear: left;
        padding-bottom: 1em;
        font-size: 12px;
        color: #666;
    }

    /* Lightbox close */
    .lb-data .lb-close {
        cursor: pointer;
        display: block;

        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
        opacity: 0.2;

        color: #ccc;
        font-size: 1.4em;
        text-align: right;
    }
    .lb-data .lb-close:before { margin-right: 2px; }
    .lb-data .lb-close:hover {
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
    }




    /*  Zoom & Linkto
    ---------------------------------------------------------- */
    .zoom, .linkto {
        display: block;
        position: relative;
        overflow: hidden;
    }
    .zoom:after, .linkto:after {
        content: " ";
        display: block;
        position: absolute;
        width: 100%; height: 100%;
        left: 0; top: 0;

        opacity: .7;
        filter: alpha(opacity=70);
    }
    .zoom:before, .linkto:before {
        visibility: hidden;
        display: block;
        position: absolute;
        width: 100%;
        left: 0; top: 50%;
        margin-top: -25px;
        color: #000;
        font-family: "fontello";
        font-style: normal;
        font-weight: normal;
        font-size: 50px;
        line-height: 1em;
        text-align: center;
        z-index: 2;

        -webkit-transition: -webkit-transform .15s .1s;
           -moz-transition:    -moz-transform .15s .1s;
                transition:         transform .15s .1s;
        -webkit-transform: scale(0);
           -moz-transform: scale(0);
                transform: scale(0);
    }
    .zoom:before                                { content: "\e824"; }
    .linkto:before                              { content: "\00bb"; }

    .zoom:hover:after,  .linkto:hover:after     { background-color: #fff; }
    .zoom:hover:before, .linkto:hover:before {
        visibility: visible;

        -webkit-transform: scale(1);
           -moz-transform: scale(1);
                transform: scale(1);
    }

    .zoom > img, .linkto > img {
        margin-bottom: 0;
        -webkit-transition: -webkit-transform .15s;
           -moz-transition:    -moz-transform .15s;
                transition:         transform .15s;
    }
    .zoom:hover > img, .linkto:hover > img {
        -webkit-transform: scale(.85);
           -moz-transform: scale(.85);
                transform: scale(.85);
    }


    /* Zoom, linkto image */
    .zoom img, .linkto img                      { display: block; }





/* ============================================================
 * Effect
 * ============================================================ */



/*  Effect Image
============================================================== */

    /* Image Hover
    ---------------------------------------------------------- */
    .fx-img-hover {
        overflow: hidden;
        position: relative;         /* Fix IE7: overflow not hidden */
        display: none !important;
    }

    /* Image hover ready */
    .fx-img-hover.fx-ready {
        display: inline-block !important;
        *display: inline !important;
        *zoom: 1;
    }

    .fx-img-hover a { width: 100%; }

    /* Image */
    .fx-img-hover img {
        position: relative;
        left: 0; top: 0;

        /* CSS Transition */
        -webkit-transition: left .1s;
           -moz-transition: left .1s;
                transition: left .1s;
    }
    .fx-img-hover:hover img { left: -100%; }

    /* Hover effect fade */
    .fx-img-hover.fx-none img {
        -webkit-transition: left 0s;
           -moz-transition: left 0s;
                transition: left 0s;
    }


    /* Image hover responsive */
    @media only screen and (max-width: 767px) {

        .fx-img-hover.m-alter:hover img { left: 0; }
    }




/*  Effect Thumbnail
============================================================== */
    .thumbnail {
        position: relative;
        overflow: hidden;
        margin: 0;
    }
    .thumbnail img                          { margin-bottom: 0; }

    .frontface, .backface {
        -webkit-transition: -webkit-transform .2s .05s;
           -moz-transition:    -moz-transform .2s .05s;
                transition:         transform .2s .05s;
    }
    .backface {
        position: absolute;
        width: 100%; height: 100%;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }


    /* Show-less effect default
    ---------------------------------------------------------- */
    .show-less .backface {
        position: absolute;
        padding: 20px;
        top: 0; left: 0;
        background-color: #fff;
    }

    /* Fix IE */
    .ie7 .show-less .backface { padding: 0; }
    .ie7 .show-less .backface > .backface-inner { padding: 20px; }


    /* Effect transition */
    .csstransitions .show-less .backface {
        -webkit-transform: translateX(-100%);
           -moz-transform: translateX(-100%);
                transform: translateX(-100%);
    }
    .csstransitions .show-less .thumbnail:hover .frontface {
        -webkit-transform: translateX(100%);
           -moz-transform: translateX(100%);
                transform: translateX(100%);
    }
    .csstransitions .show-less .thumbnail:hover .backface {
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
                transform: translateX(0);
    }

    .no-csstransitions .show-less .backface                    { left: -100%; }
    .no-csstransitions .show-less .thumbnail:hover .frontface  { left: 100%; }
    .no-csstransitions .show-less .thumbnail:hover .backface   { left: 0; }


    /* Effect background color */
    .dark     .show-less .backface { background-color: #333; }
    .bg-light .show-less .backface { background-color: #fff; }
    .bg-dark  .show-less .backface { background-color: #333; }



    /* Show-expand effect default
    ---------------------------------------------------------- */
    .show-expand .backface {
        padding-top: 17px;
        left: 0; top: 0;
        background-color: #fff;
        text-align: center;
    }
    .show-expand .backface [class*="i-"] {
        margin-right: 0; margin-top: 17px;
        font-size: 1.4em;
        opacity: .5;
    }

    .show-expand .frontface {    }

    /* Effect transition */
    .csstransitions .show-expand .backface {
        -webkit-transform: translateY(100%);
           -moz-transform: translateY(100%);
                transform: translateY(100%);
    }
    .csstransitions .show-expand .thumbnail:hover .backface,
    .csstransitions .expand-actived .backface {
        -webkit-transform: translateY(68%);
           -moz-transform: translateY(68%);
                transform: translateY(68%);
    }
    .csstransitions .show-expand .thumbnail:hover .frontface,
    .csstransitions .expand-actived .frontface {
        -webkit-transform: translateY(-32%);
           -moz-transform: translateY(-32%);
                transform: translateY(-32%);
    }

    .no-csstransitions .show-expand .backface                       { top: 100%; }
    .no-csstransitions .show-expand .frontface                      { position: relative; height: 100%; top: 0; }
    .no-csstransitions .show-expand .thumbnail:hover .backface,
    .no-csstransitions .expand-actived .backface                    { top: 68%; }
    .no-csstransitions .show-expand .thumbnail:hover .frontface,
    .no-csstransitions .expand-actived .frontface                   { top: -20%; }


    /* Effect background color */
    .show-expand article.dark     .backface { background-color: #333; }
    .show-expand article.bg-light .backface { background-color: #fff; }
    .show-expand article.bg-dark  .backface { background-color: #333; }

    .show-expand article.expand-actived .backface  { background-color: #cc0055; }





/*  Effect 3D Flip
============================================================== */

    .fx-3d {
        -webkit-perspective: 600;
           -moz-perspective: 600px;
            -ms-perspective: 600px;
                perspective: 600px;
    }

    /* Effect Inner */
    .fx-3d .fx-inner {
        z-index: 1;

        -webkit-transition: -webkit-transform .5s;
           -moz-transition:    -moz-transform .5s;
                transition:         transform .5s;

        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;

        /* CSS for IE10 */
        transition: transform .5s;
    }
    .fx-3d .fx-inner:hover {
        -webkit-transform: rotateY(180deg);
           -moz-transform: rotateY(180deg);
                transform: rotateY(180deg);
    }
    .fx-3d .fx-inner > *,
    .fx-3d .fx-inner img {
        -webkit-backface-visibility: hidden;
           -moz-backface-visibility: hidden;


    }

    /* Effect Thumbnail & Meta */
    .fx-3d .fx-meta {
        position: absolute;
        width: 100%; height: 100%;
        left: 0; top: 0;
        background-color: #cc0055;

        -webkit-transform: rotateY(-180deg);
           -moz-transform: rotateY(-180deg);
                transform: rotateY(-180deg);

        /* CSS for IE10 */
        transition: opacity .5s;
        opacity: 0;
    }
    .fx-3d .fx-inner:hover .fx-meta {
        opacity: 1;     /* CSS for IE10 */
    }
    .fx-3d .fx-meta > * {
        margin: 10px;
    }





/*  Effect Text
============================================================== */

    /* Text Cusstom Font
    ---------------------------------------------------------- */
    .font-custom {

        -webkit-transition: -webkit-transform .3s, opacity .3s;
           -moz-transition:    -moz-transform .3s, opacity .3s;
                transition:         transform .3s, opacity .3s;

        opacity: 0;
        filter: progid:DXImageTransform.Miscrosoft.Alpha(Opacity=0);
        filter: alpha(opacity=0);


        /*
        -webkit-transform: translateY(-50%);
           -moz-transform: translateY(-50%);
                transform: translateY(-50%);
                */
    }
    .wf-loading .font-custom {

        /*
        -webkit-transform: translateY(-50%);
           -moz-transform: translateY(-50%);
                transform: translateY(-50%);
                */
    }
    .font-custom.font-ready { opacity: 1; filter: alpha(opacity=100); }



    /* Text Fill
    ---------------------------------------------------------- */
    .textfill {
        text-align: center;
        line-height: 1.2em;

        /* CSS Transition */
        -webkit-transition: font-size .3s;
           -moz-transition: font-size .3s;
                transition: font-size .3s;
    }

    /* Text Fill Size */
    .textghost {
        visibility: hidden;
        position: absolute;
        display: block;
        left: 0; top: 0;
        white-space: nowrap;
    }
    .textghost > * {
        display: block;
        float: left;
    }


    /* Text Basic
    ---------------------------------------------------------- */
    h1, h2, h3,
    h4, h5, h6,
    .font-highlight                         { text-shadow: 0 1px 0 hsla(0,0%,100%,.2); }

    .dark h1, .dark h2,
    .dark h3, .dark h4,
    .dark h5, .dark h6,
    .dark .font-highlight,

    .bg-dark h1, .bg-dark h2,
    .bg-dark h3, .bg-dark h4,
    .bg-dark h5, .bg-dark h6,
    .bg-dark .font-highlight                { text-shadow: 0 1px 0 hsla(0,0%,0%,.2); }


    /* Text 3D
    ---------------------------------------------------------- */
    html.textshadow .fx-text-3d {
        color: #fff;
        text-shadow:    0 1px 0     #ccc,
                        0 2px 0     #c4c4c4,
                        0 3px 0     #bbb,
                        0 4px 0     #b4b4b4,
                        0 5px 0     #aaa,
                        0 6px 1px   hsla(0,0%,0%,.1),
                        0 0 5px     hsla(0,0%,0%,.1),
                        0 1px 3px   hsla(0,0%,0%,.3),
                        0 3px 5px   hsla(0,0%,0%,.2),
                        0 5px 10px  hsla(0,0%,0%,.25),
                        0 10px 10px hsla(0,0%,0%,.2),
                        0 20px 20px hsla(0,0%,0%,.15) !important;
    }


    /* Text Shadow
    ---------------------------------------------------------- */
    html.textshadow .fx-text-shadow {
        color: #fff;
        text-shadow:    0       1px    0    hsla(0,0%,0%,.2),
                        0       0      1px  hsla(0,0%,0%,.1),
                        -.16em  .09em  0    hsla(0,0%,0%,.1) !important;
    }




/*  Effect Pages
============================================================== */

    /* Page transition
    ---------------------------------------------------------- */
    html.page-viewport body { height: 100%; background-color: #333; }

    .page-perspective {
        position: relative;
        height: 100%;

        -webkit-perspective: 1200px;
                perspective: 1200px;
    }
    .page-perspective.page-running          { overflow: hidden; }
    .page {
        visibility: hidden;
        overflow-y: hidden;
        position: absolute;
        width: 100%; height: 0;
        left: 0; top: 0;

        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;

        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
    }
    .page.actived                           { visibility: visible; overflow-y: visible; height: 100%; }


    /* Page center vertical */
    .page > .center-ver                     { height: 100%; }


    /* Page slide */
    .page-slideOut {
        -webkit-animation: slideOut .6s both ease;
                animation: slideOut .6s both ease;
    }
    .page-slideIn {
        -webkit-animation: slideIn .6s both ease;
                animation: slideIn .6s both ease;
    }

    /* Keyframes Slide */
    @-webkit-keyframes slideOut {
        25%  { opacity: .5; -webkit-transform: translateZ(-500px); }
        75%  { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
        100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
    }
    @-webkit-keyframes slideIn {
        0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }
        75%     { opacity: .5; -webkit-transform: translateZ(-500px) }
        100%    { opacity: 1;  -webkit-transform: translateZ(0) translateX(0); }
    }

    @keyframes slideOut {
        25%  { opacity: .5; transform: translateZ(-500px); }
        75%  { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
        100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
    }
    @keyframes slideIn {
        0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
        75%     { opacity: .5; transform: translateZ(-500px) }
        100%    { opacity: 1;  transform: translateZ(0) translateX(0); }
    }




    /* Section hover fading
    ---------------------------------------------------------- */
    .fx-hover-fade {
        opacity: .5;
        filter: progid:DXImageTransform.Miscrosoft.Alpha(Opacity=50);
        filter: alpha(opacity=50);

        -webkit-transition: opacity .2s;
           -moz-transition: opacity .2s;
                transition: opacity .2s;
    }

    .fx-hover-fade:hover {
        opacity: 1;
        filter: alpha(opacity=100);
    }

    @media only screen and (max-width: 767px) {
        .fx-hover-fade { opacity: 1; }
    }







/* ============================================================
 * Elements
 * ============================================================ */



/*  Accordion
============================================================== */

    /* Basic style
    ---------------------------------------------------------- */
    .accordion                                          { margin-bottom: 20px; }
    .accordion > section {
        /*overflow-y: hidden;*/                         /* remove for ? */
        border-bottom: 1px dotted #ccc;
    }
    .accordion > section > :first-child {
        position: relative;
        margin-bottom: 0;
        padding: 13px 20px 13px 0;
        cursor: pointer;
    }

    /* Accordion Bullet */
    .accordion > section > :first-child:before,
    .accordion > section > :first-child:after {
        content: "";
        display: block;
        position: absolute;
        background-color: #ccc;
    }
    .accordion > section > :first-child:before          { width: 10px; height: 2px; right: 0; top: 22px; }
    .accordion > section > :first-child:after           { width: 2px; height: 10px; right: 4px; top: 18px; }
    .accordion > section.ready > :first-child:before    { background-color: #cc0055; }
    .accordion > section.ready > :first-child:after     { background-color: transparent; }

    .accordion > section:hover > :first-child,
    .accordion > section.ready > :first-child           { color: #cc0055; }

    /* Accordion Show/Hide */
    .accordion section > *                              { display: none; }
    .accordion section > :first-child,
    .accordion section.actived > *                      { display: inherit; *display: block; }


    /* Accordion Style
    ---------------------------------------------------------- */
    /* Accordion Tag */
    .accordion.tag > section {
        margin-bottom: 4px;
        padding-left: 15px; padding-right: 15px;
        border: 1px solid #e5e5e5;
        border-color: hsla(0,0%,0%,.1);
    }
    .accordion.tag > section > :first-child             { padding-top: 11px; padding-bottom: 11px; }
    .accordion.tag > section.ready                      { border-color: #ccc; border-color: hsla(0,0%,0%,.2); }

    /* Accordion Background */
    .accordion.bg                                       { background-color: #fff; }
    .accordion.bg > section                             { padding-left: 15px; padding-right: 15px; }
    .accordion.bg > section:last-child                  { border-bottom-width: 0; }

    .accordion.tag.bg                                   { background-color: transparent; }
    .accordion.tag.bg > section                         { background-color: #fff; border-color: transparent; }


    /* Accordion Dark
    ---------------------------------------------------------- */
    /* Accordion Bullet */
    .dark .accordion > section > :first-child:before,
    .dark .accordion > section > :first-child:after             { background-color: #fff; }

    .dark .accordion > section.ready > :first-child:before      { background-color: #cc0055; }
    .dark .accordion > section.ready > :first-child:after       { background-color: transparent; }

    /* Accordion Style */
    .dark .accordion > section                                  { border-bottom-color: #222; }
    .dark .accordion.bg                                         { background-color: #333; }
    .dark .accordion.bg > section:last-child                    { border-bottom-color: transparent; }

    .dark .accordion.tag > section                              { border-color: #333; }
    .dark .accordion.tag > section.ready                        { border-color: #222; }
    .dark .accordion.tag.bg                                     { background-color: transparent; }
    .dark .accordion.tag.bg > section                           { background-color: #333; }


    /* Accordion Bg-Light
    ---------------------------------------------------------- */
    .hsla .bg-light .accordion > section                        { border-bottom-color: hsla(0,0%,0%,.2); }
    .bg-light .accordion > section > :first-child               { color: #181818; }

    /* Accordion Bullet */
    .bg-light .accordion > section > :first-child:before,
    .bg-light .accordion > section > :first-child:after         { background-color: #999; }

    .bg-light .accordion > section.ready > :first-child:before  { background-color: #333; }
    .bg-light .accordion > section.ready > :first-child:after   { background-color: transparent; }


    /* Accordion Bg-Dark
    ---------------------------------------------------------- */
    /* Basic Style */
    .bg-dark .accordion > section > :first-child                { color: #fff; }

    /* Accordion Bullet */
    .bg-dark .accordion > section > :first-child:before,
    .bg-dark .accordion > section > :first-child:after          { background-color: #fff; }

    .bg-dark .accordion > section.ready > :first-child:before   { background-color: #fff; }
    .bg-dark .accordion > section.ready > :first-child:after    { background-color: transparent; }

    /* Accordion Style */
    .bg-dark .accordion > section                               { border-bottom-color: #fff; border-bottom-color: hsla(0,0%,100%,.5); }
    .bg-dark .accordion.bg                                      { background-color: hsla(0,0%,0%,.08); }

    .bg-dark .accordion.tag > section                           { border-color: #fff; border-color: hsla(0,0%,100%,.3); }
    .bg-dark .accordion.tag > section.ready                     { border-color: #fff; border-color: hsla(0,0%,100%,.75); }

    .bg-dark .accordion.tag.bg                                  { background-color: transparent; }
    .bg-dark .accordion.tag.bg > section                        { background-color: hsla(0,0%,0%,.08); }


    /* Accordion Block
    ---------------------------------------------------------- */
    /* Basic style */
    .accordion.block > section { border-bottom: none; }
    .accordion.block > section > :first-child {
        margin-bottom: 0;
        padding: 40px 0 40px 0;
    }
    .accordion.block > section > :first-child > * { margin-bottom: 0; }
    .accordion.block > section > :last-child { padding-bottom: 30px; }

    /* Accordion Bullet */
    .accordion.block > section > :first-child:before
    { width: 24px; height: 4px; right: 0; top: 50px; }
    .accordion.block > section > :first-child:after
    { visibility: visible; width: 4px; height: 24px; right: 10px; top: 40px; }


    /* Accordion Bullet Color */
    .accordion.block > section.dark          > :first-child:before,
    .accordion.block > section.dark          > :first-child:after
    { background-color: #fff; }

    .accordion.block > section.dark.ready    > :first-child:before
    { background-color: #cc0055; }
    .accordion.block > section.dark.ready    > :first-child:after
    { background-color: transparent; }

    .accordion.block > section.bg-light       > :first-child:before,
    .accordion.block > section.bg-light       > :first-child:after
    { background-color: #999; }
    .accordion.block > section.bg-light.ready > :first-child:before
    { background-color: #333; }
    .accordion.block > section.bg-light.ready > :first-child:after
    { background-color: transparent; }

    .accordion.block > section.bg-dark       > :first-child:before,
    .accordion.block > section.bg-dark       > :first-child:after
    { background-color: #fff; }
    .accordion.block > section.bg-dark.ready > :first-child:after
    { background-color: transparent; }

    /* Accordion Header */
    .accordion.block > section.bg-light > :first-child { color: #181818; }
    .accordion.block > section.bg-dark > :first-child { color: #fff; }

    /* Accordion Block Bg: width 940px */
    .accordion.block.bg > section { padding-left: 40px; padding-right: 40px; }


    /* Accordion Block Responsive */
    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .accordion.block.bg > section { padding-left: 32px; padding-right: 32px; }
    }
    @media only screen and (max-width: 767px) {
        .accordion.block > section > :first-child { padding-top: 25px; padding-bottom: 25px; }
        .accordion.block > section > :first-child:before { top: 35px; }
        .accordion.block > section > :first-child:after  { top: 25px; }

        .accordion.block.bg > section { padding-left: 15px; padding-right: 15px; }
        .accordion.block.bg > section [class*="span"] { width: 270px; }
    }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .accordion.block.bg > section [class*="span"] { width: 430px; }
    }



/*  Tab
============================================================== */

    /* Tablist
    ---------------------------------------------------------- */
    .tablist                                        { margin-left: 0; margin-bottom: 0; }      /* Fix Default style ul */
    .tablist li > a                                 { display: block; }
    .tablist a > span {
        display: block;
        color: #ccc;
        font-size: .85em;
        font-style: italic;
    }
    body .tablist li.actived > a                    { border-bottom: 4px solid #cc0055; }

    /* Tablist color */
    body .tablist li:hover > a,
    body .tablist li:hover > a > :first-child,
    body .tablist li.actived > a,
    body .tablist li.actived > a > :first-child     { color: #cc0055; }


    /*  Tab Horizotal
    ---------------------------------------------------------- */
    .tab-hor                                        { margin-bottom: 30px; }

    /* Tablist */
    .tab-hor .tablist                               { border-bottom: 1px solid #e5e5e5; }
    .tab-hor .tablist li {
        display: inline-block;
        *display: inline; zoom: 1;                  /* Fix IE7 */
        margin-right: 30px; margin-bottom: 0;
    }
    .tab-hor .tablist li:hover,
    .tab-hor .tablist li.actived                    { margin-bottom: -1px; }
    .tab-hor .tablist li:last-child                 { margin-right: 0; }
    .tab-hor .tablist li > a                        { padding-top: 13px; padding-bottom: 13px; color: #ccc; }
    .tab-hor .tablist li > a > *                    { margin-bottom: 0; }

    /* Tab Section */
    .tab-hor section                                { display: none; padding-top: 20px; padding-bottom: 20px; }
    .tab-hor section > :first-child                 { display: none; }
    .tab-hor section.actived                        { display: inherit; *display: block; }

    /* Tab Style Background */
    .tab-hor.bg                                     { margin-bottom: 30px; }
    .tab-hor.bg .tablist                            { border-bottom: 2px solid #cc0055; }
    .tab-hor.bg .tablist li                         { margin-right: 1px; }
    .tab-hor.bg .tablist li:last-child              { margin-right: 0; }

    .tab-hor.bg .tablist li > a                     { padding: 10px 15px; }
    .tab-hor.bg .tablist li.actived > a {
        border-bottom: none;
        background-color: #cc0055;
        color: #fff;
    }

    .tab-hor.bg section {
        padding-left: 15px; padding-right: 15px;
        border: 1px solid #e5e5e5;
        border-top: none;
        background-color: #fff;
    }

    /*  Tab Mini */
    .tab-hor.tab-mini .tablist li                   { margin-right: 1px; vertical-align: bottom; }
    .tab-hor.tab-mini .tablist li:last-child        { margin-right: 0; }
    .tab-hor.tab-mini .tablist li > a               { width: 60px; height: 20px; padding: 0; }
    .tab-hor.tab-mini .tablist li:hover > a,
    .tab-hor.tab-mini .tablist li.actived > a       { padding-bottom: 1px; }


    /*  Tab Vertical
    ---------------------------------------------------------- */
    .tab-ver                                        { position: relative; overflow-y: hidden; margin-bottom: 30px; }

    /* Tablist */
    .tab-ver .tablist                               { display: block; float: left; height: 100%; }
    .tab-ver .tablist li                            { margin-bottom: 0; }
    .tab-ver .tablist li > a {
        padding-top: 14px; padding-bottom: 15px;
        border-bottom: 1px dotted #ddd;
        color: #999;
    }
    .tab-ver .tablist li.actived > a                { padding-bottom: 12px; }
    .tab-ver .tablist a > *                         { margin-bottom: 0; }

    /* Tab Section */
    .tab-ver > section                              { display: none; }

    .tabcontent                                     { float: left; }
    .tabcontent > section                           { display: none; }
    .tabcontent > section > :first-child            { display: none; }
    .tabcontent > section                           { display: none; margin-right: 0; }
    .tabcontent > section.actived                   { display: inherit; *display: block; }

    /* Tab Width Auto */
    .tab-ver.width-auto .tablist                    { width: 25%; }
    .tab-ver.width-auto .tabcontent                 { width: 75%; }
    .tab-ver.width-auto .tabcontent > section       { padding-left: 20px; }

    /* Tab Style Background */
    .tab-ver.bg .tabcontent                         { margin-left: 0; }
    .tab-ver.bg .tabcontent section {
        padding: 20px;
        /*border: 1px solid #e5e5e5;*/
        border-left: 2px solid #cc0055;
        background-color: #fff;
    }
    .tab-ver.bg .tablist                            { margin-top: 1px; }
    .tab-ver.bg .tablist li                         { margin-top: -1px; }
    .ie7 .tab-ver.bg .tablist,
    .ie7 .tab-ver.bg .tablist li                    { margin-top: 0; }

    .tab-ver.bg .tablist li > a                     { padding-left: 15px; padding-right: 15px; }
    .tab-ver.bg .tablist li.actived > a             { background-color: #cc0055; color: #fff; }
    .tab-ver.bg .tablist li.actived > a > *         { color: #fff; }


    /*  Tab Vertical Mini */
    .tab-ver.tab-mini .tablist {
        position: absolute;
        width: auto;
        left: 0;
        border-right: 1px solid #e5e5e5;
    }
    .tab-ver.tab-mini .tablist li                   { margin-bottom: 1px; }
    .tab-ver.tab-mini .tablist li:hover,
    .tab-ver.tab-mini .tablist li.actived           { margin-right: -1px; }

    .tab-ver.tab-mini .tablist li > a               { width: 20px; height: 60px; padding: 0; border-bottom: none; }
    .tab-ver.tab-mini .tablist li:hover > a,
    .tab-ver.tab-mini .tablist li.actived > a       { padding-bottom: 0; padding-left: 1px; }
    .tab-ver.tab-mini .tablist li:first-child > a   { border-top: none; }

    .tab-ver.tab-mini .tabcontent                   { width: auto; }
    .tab-ver.tab-mini .tabcontent > section         { margin-left: 22px; padding-left: 18px; }

    .tab-ver.tab-mini.bg .tablist                   { border-right: 2px solid #cc0055; }
    .tab-ver.tab-mini.bg .tabcontent section        { border-left: none; }
    .tab-ver.tab-mini.bg .tablist,
    .tab-ver.tab-mini.bg .tablist li                { margin-top: 0; }

    /* Fix IE7 */
    .ie7 .tab-ver.width-auto { width: 100%; }
    .ie7 .tab-ver.tab-mini .tablist { left: -16px; }


    /*  Tab Mini
     *  Position Bottom: Over style Tab-Hor & Tab-Ver
    ---------------------------------------------------------- */
    .tab-mini .tablist li > a                       { overflow: hidden; background-color: #e5e5e5; text-indent: -9999px; }
    .tab-mini .tablist li.actived > a               { border-bottom: none; }
    .tab-mini section > :first-child                { display: block; margin-bottom: 10px; }
    .tab-mini section > :first-child > *            { margin-bottom: 0; }
    .tab-mini section > :first-child > span {
        color: #ccc;
        font-size: .85em;
        font-style: italic;
    }

    /* Tablist Color */
    body .tab-mini .tablist li:hover > a,
    body .tab-mini .tablist li.actived > a          { background-color: #cc0055; }


    /* Tab Theme-dark
    ---------------------------------------------------------- */

    /* Tab Horizontal */
    .dark .tab-hor .tablist { border-bottom-color: #cc0055; }
    .dark .tab-hor .tablist li > a { color: #999; }
    .dark .tab-hor .tablist li:hover > a,
    .dark .tab-hor .tablist li.actived > a { color: #cc0055; }

    .dark .tab-hor.tab-mini .tablist li > a { background-color: #222; }
    .dark .tab-hor.tab-mini .tablist li:hover > a,
    .dark .tab-hor.tab-mini .tablist li.actived > a { background-color: #cc0055; }

    .dark .tab-hor.bg .tablist li.actived > a { color: #fff; }
    .dark .tab-hor.bg section { border-width: 0; background-color: #333; }


    /* Tab Vertical */
    .dark .tab-ver .tablist li > a { border-bottom-color: #222; }
    .dark .tab-ver .tablist li.actived > a { border-bottom-color: #cc0055; }

    .dark .tab-ver.tab-mini .tablist { border-right-color: #cc0055; }
    .dark .tab-ver.tab-mini .tablist li > a { background-color: #222; }
    .dark .tab-ver.tab-mini .tablist li:hover > a,
    .dark .tab-ver.tab-mini .tablist li.actived > a { background-color: #cc0055; }

    .dark .tab-ver.bg .tabcontent > section { /*border-width: 0 0 0 2px;*/ background-color: #333; }


    /* Tab Bg-light
    ---------------------------------------------------------- */

    /* Tablist */
    .bg-light .tablist li > a                       { color: #999; }

    /* Tab Horizontal */
    .bg-light .tab-hor .tablist                     { border-bottom-color: #999; }
    .bg-light .tab-hor .tablist li:hover > a,
    .bg-light .tab-hor .tablist li.actived > a      { border-bottom-color: #666; color: #181818; }

    .bg-light .tab-hor.tab-mini .tablist li > a     { background-color: hsla(0,0%,0%,.1); }
    .bg-light .tab-hor.tab-mini .tablist li:hover > a,
    .bg-light .tab-hor.tab-mini .tablist li.actived > a
    { background-color: #666; }

    .bg-light .tab-hor.bg .tablist                  { border-bottom-color: #666; }
    .bg-light .tab-hor.bg .tablist li.actived > a   { background-color: #666; color: #fff; }
    .bg-light .tab-hor.bg section                   { border-width: 0; }

    /* Tab Vertical */
    .bg-light .tab-ver .tablist li > a              { border-bottom-color: #999; }
    .bg-light .tab-ver .tablist li:hover > a,
    .bg-light .tab-ver .tablist li.actived > a      { border-bottom-color: #666; color: #181818; }

    .bg-light .tab-ver.tab-mini .tablist            { border-right-color: #999; }
    .bg-light .tab-ver.tab-mini .tablist li > a     { background-color: hsla(0,0%,0%,.1); }
    .bg-light .tab-ver.tab-mini .tablist li:hover > a,
    .bg-light .tab-ver.tab-mini .tablist li.actived > a
    { background-color: #666; }

    .bg-light .tab-ver.bg .tablist li.actived > a   { background-color: #666; color: #fff; }
    .bg-light .tab-ver.bg .tabcontent > section     { border-left-color: #666; }

    .bg-light .tab-ver.tab-mini.bg .tablist         { border-right-color: #666; }


    /* Tab Bg-dark
    ---------------------------------------------------------- */
    /* Tablist */
    .bg-dark .tablist li > a                        { color: hsla(0,0%,100%,.5); }
    .no-hsla .bg-dark .tablist li > a               { color: #fff; }

    /* Tab horizontal */
    .bg-dark .tab-hor .tablist                      { border-bottom-color: #fff; }
    .bg-dark .tab-hor .tablist li:hover > a,
    .bg-dark .tab-hor .tablist li.actived > a       { border-bottom-color: #fff; color: #fff; }

    .bg-dark .tab-hor.tab-mini li > a               { background-color: hsla(0,0%,100%,.3); }
    .bg-dark .tab-hor.tab-mini li:hover > a,
    .bg-dark .tab-hor.tab-mini li.actived > a       { background-color: #fff; }

    .bg-dark .tab-hor.bg .tablist li.actived > a    { background-color: #fff; color: #666; }
    .bg-dark .tab-hor.bg section {
        border-width: 0;
        background-color: #444;
        background-color: hsla(0,0%,0%,.1);
    }

    /* Tab Vertical */
    .bg-dark .tab-ver .tablist li > a               { border-bottom-color: #fff; }
    .bg-dark .tab-ver .tablist li > a               { border-bottom-color: hsla(0,0%,100%,.3); }
    .bg-dark .tab-ver .tablist li:hover > a,
    .bg-dark .tab-ver .tablist li.actived > a       { border-bottom-color: #fff; color: #fff; }

    .bg-dark .tab-ver.tab-mini .tablist             { border-right-color: #fff; }
    .bg-dark .tab-ver.tab-mini .tablist li > a      { background-color: #666; }
    .bg-dark .tab-ver.tab-mini .tablist li > a      { background-color: hsla(0,0%,100%,.3); }
    .bg-dark .tab-ver.tab-mini .tablist li:hover > a,
    .bg-dark .tab-ver.tab-mini .tablist li.actived > a
    { background-color: #fff; }

    .bg-dark .tab-ver.bg .tablist li.actived > a    { background-color: #fff; color: #666; }
    .bg-dark .tab-ver.bg .tabcontent > section {
        border-left-color: #fff;
        background-color: #444;
    }
    .bg-dark .tab-ver.bg .tabcontent > section      { background-color: hsla(0,0%,0%,.1); }



/*  Tooltip
============================================================== */

    /* Tooltip Basic
    ---------------------------------------------------------- */
    .tooltip {
        position: relative;
        cursor: default;
    }
    a.tooltip, p.tooltip, span.tooltip { border-bottom: 1px dotted #999; }

    /* Tooltip Content */
    .tt-content {
        overflow: hidden;
        position: absolute;
        width: 0; height: 0;
        z-index: -1;

        background-color: #fff;
        border: 0 solid #999;
        color: #444;

        font-size: 12px;
        line-height: 18px;
        white-space: nowrap;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;

        /* CSS Transition */
        -webkit-transition: left, right, top, bottom;
           -moz-transition: left, right, top, bottom;
                transition: left, right, top, bottom;

        -webkit-transition-duration: .15s;
           -moz-transition-duration: .15s;
                transition-duration: .15s;
    }
    .tooltip:hover .tt-content {
        overflow: visible;
        width: auto; height: auto;
        padding: 9px 15px;

        z-index: 10;
        border-width: 1px;
    }
    .tp-left:hover .tt-content,
    .tp-right:hover .tt-content { padding-top: 10px; padding-bottom: 10px; }


    /* Tooltip Helper hover
    ---------------------------------------------------------- */
    .tooltip:after {
        content: " ";
        position: absolute;
        display: block;
        width: 100%; height: 100%;
        padding-top: 12px; padding-bottom: 5px;
        left: 0; top: -5px;
        background-color: transparent;
    }


    /* Tooltip width-auto
    ---------------------------------------------------------- */
    .tooltip.width-auto .tt-content { width: 220px; white-space: normal; }


    /* Tooltip Position
    ---------------------------------------------------------- */
    .tp-top             .tt-content             { bottom: 0; }
    .tp-bottom          .tt-content             { top   : 0; }
    .tp-left            .tt-content             { right : 0; }
    .tp-right           .tt-content             { left  : 0; }

    .tp-top:hover       .tt-content             { bottom: 100%; margin-bottom: 10px; border-bottom-width: 3px; }
    .tp-bottom:hover    .tt-content             { top   : 100%; margin-top   : 15px; border-top-width   : 3px; }
    .tp-left:hover      .tt-content             { right : 100%; margin-right : 10px; border-right-width : 3px; }
    .tp-right:hover     .tt-content             { left  : 100%; margin-left  : 10px; border-left-width  : 3px; }

    .tp-top.ta-left     .tt-content,
    .tp-bottom.ta-left  .tt-content             { left  : 0;   }
    .tp-top.ta-right    .tt-content,
    .tp-bottom.ta-right .tt-content             { right : 0;   }
    .tp-top.ta-center   .tt-content,
    .tp-bottom.ta-center .tt-content            { left  : 50%; }

    .tp-left.ta-top     .tt-content,
    .tp-right.ta-top    .tt-content             { top   : -11px; }
    .tp-left.ta-bottom  .tt-content,
    .tp-right.ta-bottom .tt-content             { bottom: -11px; }
    .tp-left.ta-center  .tt-content,
    .tp-right.ta-center .tt-content             { top   : 50%; }


    /* Tooltip Arrow
    ---------------------------------------------------------- */
    .tooltip .tt-content:after {
        content: "";
        position: absolute;
        width: 0; height: 0;
        border: 0 solid transparent;
    }
    .tooltip:hover .tt-content:after            { display: block; border-width: 4px; }

    .tp-top     .tt-content:after               { bottom: -11px; border-top-color   : #999; }
    .tp-bottom  .tt-content:after               { top   : -11px; border-bottom-color: #999; }
    .tp-left    .tt-content:after               { right : -11px; border-left-color  : #999; }
    .tp-right   .tt-content:after               { left  : -11px; border-right-color : #999; }

    /* Arrow position */
    .tp-top.ta-left      .tt-content:after,
    .tp-bottom.ta-left   .tt-content:after      { left  : 13px; }
    .tp-top.ta-right     .tt-content:after,
    .tp-bottom.ta-right  .tt-content:after      { right : 13px; }
    .tp-top.ta-center    .tt-content:after,
    .tp-bottom.ta-center .tt-content:after      { left  : 50%; margin-left: -4px; }

    .tp-left.ta-top      .tt-content:after,
    .tp-right.ta-top     .tt-content:after      { top   : 15px; }
    .tp-left.ta-bottom   .tt-content:after,
    .tp-right.ta-bottom  .tt-content:after      { bottom: 15px; }
    .tp-left.ta-center   .tt-content:after,
    .tp-right.ta-center  .tt-content:after      { top   : 50%; margin-top: -4px; }

    /* Tooltip Size-of-others */
    .tt-content > .player                       { min-width: 150px; }


    /* Theme-dark Tooltip
    ---------------------------------------------------------- */
    .dark .tooltip .tt-content                          { background-color: #333; border-color: #000; color: #eee; }

    .dark .tp-top .tt-content { border-width: 0 0 3px; }
    .dark .tp-bottom .tt-content { border-width: 3px 0 0; }
    .dark .tp-left .tt-content { border-width: 0 3px 0 0; }
    .dark .tp-right .tt-content { border-width: 0 0 0 3px; }

    .dark .tp-top     .tt-content:after                 { border-top-color   : #000; }
    .dark .tp-bottom  .tt-content:after                 { border-bottom-color: #000; }
    .dark .tp-left    .tt-content:after                 { border-left-color  : #000; }
    .dark .tp-right   .tt-content:after                 { border-right-color : #000; }


    /* Background Light Tooltip
    ---------------------------------------------------------- */
    .bg-light .tt-content { border-color: #666; }
    .bg-light .tp-top      .tt-content                  { border-width: 0 0 3px 0; }
    .bg-light .tp-bottom   .tt-content                  { border-width: 3px 0 0 0; }
    .bg-light .tp-left     .tt-content                  { border-width: 0 3px 0 0; }
    .bg-light .tp-right    .tt-content                  { border-width: 0 0 0 3px; }

    .bg-light .tp-top     .tt-content:after             { border-top-color   : #666; }
    .bg-light .tp-bottom  .tt-content:after             { border-bottom-color: #666; }
    .bg-light .tp-left    .tt-content:after             { border-left-color  : #666; }
    .bg-light .tp-right   .tt-content:after             { border-right-color : #666; }


    /* Background Dark Tooltip
    ---------------------------------------------------------- */
    .bg-dark a.tooltip,
    .bg-dark p.tooltip, .bg-dark span.tooltip
    { border-bottom-color: #fff; border-bottom-color: hsla(0,0%,100%,.5); }

    .bg-dark .tt-content { background-color: #444; border-color: #444; color: #fff; }
    .bg-dark .tp-top     .tt-content:after              { border-top-color   : #444; }
    .bg-dark .tp-bottom  .tt-content:after              { border-bottom-color: #444; }
    .bg-dark .tp-left    .tt-content:after              { border-left-color  : #444; }
    .bg-dark .tp-right   .tt-content:after              { border-right-color : #444; }


    /* Tooltip Highlight
    ---------------------------------------------------------- */
    .tt-highlight .tt-content                           { border-color: #cc0055 !important; }
    .tt-highlight.tp-top    .tt-content:after           { border-top-color    : #cc0055; }
    .tt-highlight.tp-bottom .tt-content:after           { border-bottom-color : #cc0055; }
    .tt-highlight.tp-left   .tt-content:after           { border-left-color   : #cc0055; }
    .tt-highlight.tp-right  .tt-content:after           { border-right-color  : #cc0055; }



/*  Alert
============================================================== */

    /* Basic style
    ---------------------------------------------------------- */
    .alert {
        position: relative;
        margin-bottom: 10px;
        padding: 20px 20px 20px 72px;

        background-color: #d9f9f9;
        color: #069;

        font-size: 14px;
        line-height: 21px;
    }


    /* Alert Header Color */
    .alert *                                    { color: #069 !important; }
    .alert h1, .alert h2, .alert h3,
    .alert h4, .alert h5, .alert h6             { text-shadow: 0 1px 0 hsla(0,0%,100%,.2); }

    /* Alert Header */
    .alert h1, .alert h2 { margin-bottom: 10px; }
    .alert h3, .alert h4 { margin-bottom: 5px; }
    .alert h5, .alert h6 { margin-bottom: 5px; }


    /* Alert Icon
    ---------------------------------------------------------- */
    .alert:after {
        content: "";
        display: block;
        position: absolute;
        width: 32px; height: 32px;
        left: 20px; top: 25px;                  /* Top: padding 5px */
        background-image: url(../imgs/icons/alert_icons.png);
        background-repeat: no-repeat;
        background-position: -32px -32px;
    }

    /* Alert No-Icon */
    .alert.no-icon                              { padding-left: 20px; }
    .alert.no-icon:after                        { display: none; }


    /* Alert Close
    ---------------------------------------------------------- */
    .alert > .close {
        position: absolute;
        display: block;
        width: 30px;
        right: 0; top: 0;
        padding: 14px 0;
        margin: 0;
        border: none;
        background-color: transparent;
        opacity: .1;
        filter: Alpha(opacity=10);
        text-indent: -9999px;
        cursor: pointer;
    }
    .alert > .close > .cite {
        display: block;
        width: 10px; height: 2px;
        margin-left: 10px;
        background-color: #333;
    }

    .alert > .close:hover,
    .alert > .close:focus                       { opacity: .75; filter: Alpha(opacity=75);}
    .alert > .close:active                      { opacity: 1; }



    /* Alert Style
    ---------------------------------------------------------- */
    .alert.warning:after                        { background-position: 0 0; }
    .alert.warning *                            { color: #a80 !important; }

    .alert.error:after                          { background-position: -32px 0; }
    .alert.error *                              { color: #c00 !important; }

    .alert.success:after                        { background-position: 0 -32px; }
    .alert.success *                            { color: #248800 !important; }


    /* Alert Block
    ---------------------------------------------------------- */
    .alert-block                                { visibility: hidden; background-color: #d9f9f9; }
    .alert-block .alert                         { margin-bottom: 0; padding-top: 30px; padding-bottom: 30px; }
    .alert-block .alert:after                   { top: 30px; }
    .alert-block .alert > .close {
        width: 38px;
        padding-top: 18px; padding-bottom: 18px;
    }
    .alert-block .alert > .close > .cite {
        width: 12px;
        margin-left: 13px;
    }
    .alert-block.ready                          { visibility: visible; }


    /* Alert Responsive
    ---------------------------------------------------------- */
    @media only screen and (max-width: 767px) {
        .alert                                  { padding-left: 62px; padding-right: 15px; }
        .alert:after                            { left: 15px; }
    }


    /* Alert Effect
    ---------------------------------------------------------- */
    .alert.fx-zoomin {
        -webkit-transition: -webkit-transform .2s, opacity .2s;
           -moz-transition:    -moz-transform .2s, opacity .2s;
                transition:         transform .2s, opacity .2s;

        -webkit-transform: scale(0, 0);
           -moz-transform: scale(0, 0);
                transform: scale(0, 0);

        opacity: 0;
    }



/*  Table
============================================================== */

    /* Table basic
    ---------------------------------------------------------- */
    table {
        width: 100%;

        margin-bottom: 20px;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    table caption, table th, table td           { padding: 9px 0 9px 15px; text-align: left; }


    /* Table caption
    ---------------------------------------------------------- */
    table caption *                             { margin-bottom: 0; }


    /* Table head
    ---------------------------------------------------------- */
    table th {
        border-bottom: 1px solid #999;
        color: #999;

        vertical-align: bottom;
        text-align: left;
        font-weight: normal;
    }

    /* Table Head Bullet */
    /*table th:before {
        content: " ";
        display: inline-block;
        width: 3px; height: 10px;
        margin-right: 6px;
        background-color: #ccc;
    }*/


    /* Table body
    ---------------------------------------------------------- */
    table td                                    { border-top: 1px dotted #ddd; }
    table tr:first-child td                     { border-top: none; }


    /* Table style
    ---------------------------------------------------------- */
    /* Table Striped */
    table.striped tbody > tr:nth-child(odd) > td
    { background-color: #f5f5f5; }

    /* Table Hover */
    table.hover tbody > tr:hover > td           { background-color: #eee; }

    /* Table Box & Highlight */
    table.box                                   { border: 1px solid #e5e5e5; }
    table.highlight                             { border: 1px solid #cc0055; }
    table.highlight > thead th
    { background-color: #cc0055; border-bottom-color: #cc0055; color: #fff; }

    /* Table Box & Highlight Caption */
    table.box caption, table.highlight caption
    { position: relative; }

    table.box caption:before,
    table.highlight caption:before {
        content: " ";
        display: inline-block;
        position: absolute;
        width: 3px; height: 12px;
        left: 0px; top: 15px;
        background-color: #ccc;
    }

    /* Table Condensed */
    table.condensed > tbody td                  { padding-top: 4px; padding-bottom: 4px; }


    /* Table tag Theme-dark
    ---------------------------------------------------------- */
    .dark table                                 { border-top-color: #666; border-top-color: hsla(0,0%,100%,.2); }
    .dark table tr                              { border-bottom-color: #666; border-bottom-color: hsla(0,0%,100%,.2); }




/*  BackTop
============================================================== */
    #backtop {
        position: fixed;
        display: block;
        bottom: 60px;
        width: 38px; height: 38px;

        background-color: #ccc;
        color: #fff;
        opacity: .3;
        filter: alpha(opacity=30);       /* Fix IE */
        line-height: 38px;
        text-align: center;
        text-indent: -9999px;
        border: none;
    }
    #backtop:hover, #backtop:focus {
        background-color: #cc0055;
        opacity: 1;
        filter: alpha(opacity=100);
    }

    /* Backtop Arrow */
    #backtop > .first {
        position: absolute;
        display: block;
        width: 0; height: 0;
        top: 50%; left: 50%;
        margin-left: -8px; margin-top: -8px;

        border: 8px solid transparent;
        border-bottom-color: #000;
        border-top: none;
    }
    #backtop > .last {
        position: absolute;
        display: block;
        width: 6px; height: 6px;
        top: 50%; left: 50%;
        margin-left: -3px; margin-top: -1px;
        background-color: #000;
    }
    #backtop:hover > .first,
    #backtop:focus > .first             { border-bottom-color: #fff; }
    #backtop:hover > .last,
    #backtop:focus > .last              { background-color: #fff; }


    /* Backtop Transition */
    #backtop                            { right: -38px; }
    #backtop.actived                    { right: 0; }
    .csstransitions #backtop {
        right: 0;

        /* CSS transition */
        -webkit-transition: -webkit-transform .25s;
           -moz-transition:    -moz-transform .25s;
                transition:         transform .25s;

        -webkit-transform: translateX(100%);
           -moz-transform: translateX(100%);
                transform: translateX(100%);
    }
    .csstransitions #backtop.actived {
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
                transform: translateX(0);
    }

    /* Theme-dark */
    .dark #backtop                      { opacity: .15; filter: alpha(opacity=15); }
    .dark #backtop:hover                { opacity: 1; filter: alpha(opacity=100); }




/*  AutoHide
============================================================== */
    .autohide { display: none; }
    .autohide.actived { display: block; }
    .view-outer {
        position: relative;
        height: 37px;
    }
    .view-inner {
        position: absolute;
        left: 50%;
        width: 35px; height: 35px
    }
    .viewmore {
        position: absolute;
        display: block;
        left: -50%;
        width: 100%; height: 100%;

        background: url(../imgs/viewmore.png) 0 0 no-repeat #fff;
        border: 1px solid #ccc;
        border-radius: 50%;
        text-indent: -9999px;
    }
    .viewmore:hover { background-position: 0 -37px; border-color: #666; }
    .viewmore.actived { background-position: 0 -74px; }
    .viewmore.actived:hover { background-position: 0 -111px; border-color: #666; }







/*  Navigation & Pagination
============================================================== */

    /*  Navigation
    ---------------------------------------------------------- */
    .nav,
    .nav li {
        float: left;
        margin-bottom: 0;
        *line-height: 0;
    }
    .nav a {
        display: block;
        background-color: #fff;

        opacity: .3;
        filter: alpha(opacity=30);
    }

    /* Nav Icon */
    .nav a:before {
        display: inline-block;
        width: 100%;

        color: #333;
        font-family: "fontello";
        text-align: center;
    }
    .nav a.prev:before              { content: "\e82b"; }
    .nav a.next:before              { content: "\e82a"; }

    .ie7 .nav a {
        font-family: "fontello";
        line-height: 1em;
        text-align: center;
    }
    .nav a.prev                     { *zoom: expression( this.runtimeStyle["zoom"] = "1", this.innerHTML = " "); }
    .nav a.next                     { *zoom: expression( this.runtimeStyle["zoom"] = "1", this.innerHTML = " "); }


    .nav.center a                   { position: absolute; top: 50%; margin-top: -19px; }
    .nav.top a                      { background-color: transparent; }
    .nav li:hover a                 { opacity: 1; filter: alpha(opcity=100); }


    /* Navigation Size */
    .nav a                          { font-size: 1.4em; }
    .nav.center a                   { width: 24px; height: 38px; line-height: 38px; }
    .nav.top a,
    .nav.bottom a                   { width: 38px; height: 24px; line-height: 24px; }

    .nav.mini a                     { font-size: 1.15em; }
    .nav.mini.center a              { width: 16px; height: 25px; line-height: 24px; }
    .nav.mini.top a,
    .nav.mini.bottom a              { width: 24px; height: 17px; line-height: 16px; }


    /* Navigation Position */
    .nav.center a                   { position: absolute; top: 50%; margin-top: -19px; }
    .nav.center .prev               { left: 0; }
    .nav.center .next               { right: 0; }

    .nav.top, .nav.bottom           { position: absolute; right: 0; }
    .nav.top                        { bottom: 100%; margin-bottom: 5px;}
    .nav.bottom                     { bottom: 0; }
    .nav.top a, .nav.bottom a       { float: left; margin-left: 1px; }

    .nav.mini.center a              { margin-top: -12px; }



    /*  Pagination
    ---------------------------------------------------------- */
    .pagi,
    .pagi li                        { float: left; margin-bottom: 0; }
    .pagi li a {
        display: block;
        margin-right: 1px;
        padding: 10px 15px;
    }

    /* Pagination Mini - Tiny */
    .pagi.mini li a                 { padding: 3px 8px; }
    .pagi.tiny li a {
        width: 10px; height: 10px;
        margin-right: 4px;
        padding: 0;
        text-indent: -9999px;
        line-height: 0;
    }

    /* Pagination Color */
    .pagi li a                      { color: #ccc; border: 1px solid transparent;}
    .pagi li:hover a                { border-color: #666; color: #333; }
    .pagi li.selected a             { color: #cc0055; }

    .pagi.tiny li a                 { background-color: #ccc; border-width: 0; }
    .hsla .pagi.tiny li a           { background-color: hsla(0,0%,0%,.2); }
    .pagi.tiny li:hover a,
    .pagi.tiny li.selected a        { background-color: #cc0055; }


    /* Pagination Background color */
    .dark .pagi li a                { color: #666; }
    .dark .pagi li:hover a          { border-color: #666; color: #fff; }
    .dark .pagi li.selected a       { color: #cc0055; }

    .bg-light .pagi li a            { color: #999; }
    .bg-light .pagi li:hover a      { border-color: #666; color: #333; }
    .bg-light .pagi li.selected a   { color: #666; font-weight: bold; }

    .bg-dark .pagi li a             { color: #fff; }
    .hsla .bg-dark .pagi li a       { color: hsla(0,0%,100%,.8); }
    .bg-dark .pagi li:hover a       { border-color: #fff; color: #fff; }
    .bg-dark .pagi li.selected a    { color: #fff; font-weight: bold; }





/*  Show
============================================================== */
    .thumbnail img { display: block; }


    /*  Show Less
    ---------------------------------------------------------- */
    .show-less > li,
    .show-less > article            { margin-bottom: 20px; }

    /*.show-less > li > a,
    .show-less > article > a,
    .show-less .thumbnail           { display: block; }

    .show-less img.thumbnail,
    .show-less .thumbnail img       { width: 100%; height: auto; }*/

    /*.show-less .title {
        visibility: hidden;
        position: absolute;
        top: 0; left: 0;
        padding: 0 10px;
        margin: 0 10px;

        background-color: #333;
        color: #fff;
        font-size: .85em;
        z-index: 1;
    }

    .show-less a:hover .title {
        visibility: visible;
        margin-top: 20%;
    }*/

    /* Show Less - Slider */
    .slider show-less li            { margin-bottom: 0; }


    /*  Show Full
    ---------------------------------------------------------- */
    .show-full article,
    ul.show-full > li {
        margin-bottom: 50px;
        border-bottom: 1px dotted #ddd;
    }
    .show-full article:hover,
    ul.show-full > li:hover                     { border-color: #cc0055; }
    .ie7 .show-full                             { z-index: 1; }


    /* Thumbnail */
    .show-full .thumbnail                       { display: block; position: relative; }
    .show-full .thumbnail img                   { width: 100%; height: auto; }
    .show-full .thumbnail .zoom,
    .show-full .thumbnail .linkto               { margin-bottom: 0; }

    .no-hsla .show-full .thumbnail:hover img {
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25);
    }


    /* Meta */
    .show-full .meta {
        display: block;
        padding-top: 20px; padding-bottom: 20px;
        text-align: center;
    }
    .show-full .meta > .title {
        margin-bottom: 0;
        color: #666;
        line-height: .9em;
    }
    .show-full .meta:hover > .title             { color: #cc0055; }
    .show-full .meta > .tags {
        color: #ccc;
        font-size: .85em;
        line-height: .85em;
    }



    /*  Show Items List
    ---------------------------------------------------------- */
    .show-list                                  { border-top: 1px dotted #ccc; }
    .show-list > li {
        overflow: hidden;
        padding: 10px 0;
        border-bottom: 1px dotted #ccc;
    }
    .show-list img                              { float: left; margin: 0 10px 10px 0; }
    .show-list .author {
        float: right;
        margin-top: -10px;
        color: #999;
        font-size: .85em;
        font-weight: bold;
    }


    /*  Show Fit
    ---------------------------------------------------------- */
    .show-fit {
        overflow: hidden;
        visibility: hidden;
    }
    .show-fit > article                         { float: left; /*margin-left: 1px; margin-bottom: 1px; */}
    .show-fit .thumbnail                        { float: left; }
    .show-fit .thumbnail img                    { margin-bottom: 0; }

    /* Show Ready */
    .show-fit.ready                             { visibility: visible; }
    .show-fit.ready thumbnail > img             { width: 100%; height: auto; }

    /* Meta */
    .show-fit .meta                             { display: none; }



    /*  Show Expand
    ---------------------------------------------------------- */
    /* Item Expand */
    .show-expand > article > .expand            { display: none; }
    .expand {
        position: absolute;
        float: left;
        width: 100%;
        padding-top: 50px; padding-bottom: 50px;
        opacity: 0;
        border-top: 4px solid #cc0055;

        /* CSS Transition */
        -webkit-transition: opacity .5s;
                transition: opacity .5s;
    }
    .expand.ready                               { opacity: 1; }
    .expand img                                 { width: 100%; height: auto; }

    /* Expand thumbnail */
    .show-expand .thumbnail img                 { margin-bottom: 0; }

    /* Expand close */
    .expand-close {
        position: absolute;
        display: block;
        width: 48px;
        padding: 23px 0;
        right: 0; top: -50px;
        border: none;
    }
    .expand-close .cite {
        display: block;
        width: 12px; height: 2px;
        margin-left: 18px;
        background-color: #666;
    }
    .expand-close:hover { background-color: #333; }
    .expand-close:hover .cite { background-color: #fff; }

    /* Fixed IE */
    .ie7 .portfolio .show-expand                { z-index: 1; }








/* ============================================================
 * Logo & Menu
 * ============================================================ */
    .wrapper.header                         { padding-top: 10px; padding-bottom: 0; }



/*  Logo
============================================================== */
    .logo {
        display: inline-block;
        padding-bottom: 10px;
        line-height: 1em;
    }
    .logo > * { margin-bottom: 0; }
    .logo img { display: block; }


    /* Logo position
    ---------------------------------------------------------- */
    .logo-left  .logo                       { float: left; }
    .logo-right .logo                       { float: right; }
    .logo-center                            { text-align: center }
    .logo-center .logo {
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }

    .header.logo-center.logo-v3 .logo {
        position: absolute;
        margin: 0;
        z-index: 9;
    }


    /* Logo with Mobile-alter & Mobile scale
    ---------------------------------------------------------- */
    .logo.m-alter img,
    .logo.m-scale img                       { display: none;  }
    .logo.m-alter img:first-child,
    .logo.m-scale img:first-child           { display: block; }


    @media only screen and (max-width: 767px) {

        .logo.m-alter img,
        .logo.m-scale img                   { display: block; }
        .logo.m-alter img:first-child,
        .logo.m-scale img:first-child       { display: none;  }
    }



/*  Menu Horizontal
============================================================== */
    .menu-hor                                       { display: block; position: relative; }
    .ie7 .header:hover                              { position: relative; z-index: 9; }  /* Fix z-index menu */
    .ie7 .header.helper                             { position: fixed; }


    /* Menu style
    ---------------------------------------------------------- */
    .menu                                           { margin-bottom: 0; }
    .menu a                                         { cursor: pointer; }
    .menu > li {
        position: relative;
        margin-bottom: 0;
        min-width: 38px; min-height: 1px;
    }
    .menu > li > a {
        display: block;
        position: relative;
        padding: 10px 20px;                          /* Height 38px */
        margin-bottom: 0;
        text-shadow: none;
        white-space: nowrap;
    }
    .ie7 .menu > li > a                             { position: static; }  /* Fixed border menu lv2 */

    /* Menu Level 1 */
    .menu-hor > .menu,
    .menu-hor > .menu > li                          { float: left; }
    .menu-hor > .menu > li > a                      { float: left; margin-right: 1px; color: #999; }
    .menu-hor > .menu > li.selected > a,
    .menu-hor > .menu > li:hover > a                { background-color: #555a5f; color: #fff; }

    /* Menu Level 2 & 3 */
    .menu .menu {
        display: none;
        position: absolute;
        width: 200px;
        margin-left: 0;
        background-color: #555a5f;
    }
    .menu-hor .menu .menu {
        margin-top: -1px;
        border-top: 1px solid #555a5f;
        border-bottom: 1px solid #555a5f;
    }
    .ie7 .menu-hor .menu .menu                      { border-bottom-width: 0; }

    .menu .menu                                     { left: 0   ; top: 100%; z-index: 9; }
    .menu .menu .menu                               { left: 100%; top: 0; }

    .menu > li:hover .menu,
    .menu .menu > li:hover .menu                    { display: block; }
    .menu > li .menu .menu                          { display: none; }

    .menu .menu > li                                { position: relative; }

    .menu .menu > li > a {
        padding-left: 20px; padding-right: 20px;
        color: #fff;
        font-size: 12px;
        white-space: normal;
    }
    .menu .menu > li.selected > a,
    .menu .menu > li:hover > a                      { background-color: #fff; color: #333; }



    /* Menu mega
    ---------------------------------------------------------- */
    .menu .menu-mega { position: static; }
    .menu-mega .menu-outer {
        display: none;
        position: absolute;
        width: 100%;
        padding-top: 20px; padding-bottom: 20px;
        left: 0; top: 38px;
        background-color: #555a5f;
        font-size: .85em;
        color: #fff;
    }
    .menu-mega .menu {
        position: static;
        width: auto;
    }
    .menu-hor .menu-mega .menu { border-width: 0; }

    .menu-mega:hover .menu-outer { display: block; }



    /* Menu right
    ---------------------------------------------------------- */
    .menu.right                                     { left: auto; right: 1px; }



    /* Menu Border
    ---------------------------------------------------------- */
    .menu .bo-t,
    .menu .bo-bo                                    { border-color: #999;}


    /* Logo position and menu
    ---------------------------------------------------------- */
    .logo-left  .menu-hor                           { float: right; }
    .logo-right .menu-hor                           { float: left; }

    .logo-center.logo-v2 .menu-hor                  { float: right; position: relative; left: -50%; }
    .logo-center.logo-v2 .menu-hor > .menu          { position: relative; left: 50%; }

    .logo-center.logo-v3 .menu-hor > .menu          { width: 94%; margin-right: 6%;}
    .logo-center.logo-v3 .float-right               { float: right; }

    .logo-center .menu                              { text-align: left; }
    .logo-center .menu-hor > .menu > li > a         { padding-left: 40px; padding-right: 40px; }


    /* Menu Arrow
    ---------------------------------------------------------- */
    .menu-hor > .menu > li.selected > a:after {
        content: "";
        display: block;
        position: absolute;
        width: 0; height: 0;
        margin-left: -6px;
        left: 50%; bottom: -11px;

        border: 6px solid transparent;
        border-top-color: #555a5f;
        z-index: 1;
    }


    /* Menu Caret
    ---------------------------------------------------------- */
    .menu a > .caret {
        display: block;
        position: absolute;
        width: 6px; height: 1px;
        right: 15px; top: 19px;
        background-color: #aaa;
    }
    .menu-hor > .menu > li > a > .caret             { display: none; }


    /* Menu Toggle
    ---------------------------------------------------------- */
    .menu-toggle {
        display: none;
        position: absolute;
        width: 48px;
        padding-top: 15px; padding-bottom: 10px;
    }
    .m-classic .menu-toggle {
        width: 38px;
        padding-top: 11px; padding-bottom: 9px;
    }
    .menu-toggle > span {
        display: block;
        width: 18px; height: 3px;
        margin-left: 15px; margin-bottom: 3px;
        background-color: #999;
        background-color: hsla(0,0%,0%,.4);
        box-shadow: 0 1px 0 hsla(0,0%,100%,.05);
    }
    .m-classic .menu-toggle > span                  { margin-left: 10px; }

    .menu-toggle:hover   > span,
    .menu-toggle.actived > span,
    .menu-toggle.push    > span {
        background-color: #333;
        background-color: hsla(0,0%,0%,.8);
    }

    /* Menu Toggle theme-dark & bg-dark*/
    body.dark    .menu-toggle > span,
    body.bg-dark .menu-toggle > span {
        background-color: #fff;
        box-shadow: 0 1px 0 hsla(0,0%,0%,.5);
    }




/*  Menu Vertical
============================================================== */
    .menu-ver {
        margin-bottom: 30px;
        /*border: 1px solid #e5e5e5;*/
        border-right: 1px solid #e5e5e5;
        /*border-width: 1px 0;*/
    }

    .menu-ver .menu > li > a {
        padding-top: 15px; padding-bottom: 15px;
        color: #999;
    }

    /* Menu level 1 */
    .menu-ver > .menu {
        float: none;
        padding-top: 10px; padding-bottom: 10px;
    }
    .menu-ver > .menu > li {
        display: block;
        float: none;
    }
    .menu-ver > .menu > li > a {
        float: none;
        padding-left: 15px; padding-right: 15px;
    }
    .menu-ver > .menu > li.selected > a,
    .menu-ver > .menu > li.selected:hover > a        { color: #333; }
    .menu-ver > .menu > li > a.actived,
    .menu-ver > .menu > li:hover > a                 { background-color: transparent; color: #333; }

    /* Menu level 2 & 3 */
    .menu-ver .menu .menu {
        display: none;
        position: static;
        width: auto;
        margin-top: 0;
        padding-left: 15px;
        background-color: transparent;
    }

    .menu-ver .menu > li .menu,
    .menu-ver .menu .menu > li .menu { display: none; }
    .menu-ver .menu > li .menu.actived { display: block; }

    /*.menu-ver .menu .menu > li > a { color: #999; }*/


    /* Menu Arrow
    ---------------------------------------------------------- */
    .menu-ver > .menu > li.selected > a:after {
        content: " ";
        display: block;
        position: absolute;
        width: 0; height: 0;
        left: 0; top: 50%;
        margin-top: -5px;
        border: 5px solid transparent;
        border-left-color: #e5e5e5;
    }


    /* Menu Caret
    ---------------------------------------------------------- */
    .menu-ver a > .caret { top: 23px; background-color: #ddd; }
    .menu-ver a.actived > .caret { background-color: #333; }


    /* Menu Border
    ---------------------------------------------------------- */
    .menu-ver .bo-t,
    .menu-ver .bo-b { border-color: #ccc; }



/*  Form Search
============================================================== */

    .menu input.search-value {
        margin-bottom: 0;
        background: url(../imgs/icon_zoom.png) no-repeat right 11px;
        border: none;
    }

    /* Menu icon */
    /*.menu .search [class*="i-"] {
        position: absolute;
        width: 38px; height: 38px;
        top: 0; right: 0;
        margin-right: 0;

        opacity: .5;
        filter: progid:DXImageTransform.Miscrosoft.Alpha(Opacity=50);
        filter: alpha(opacity=50);

        font-size: 1.4em;
        line-height: 38px;
        text-shadow: 0 1px 0 hsla(0,0%,0%,.25);
    }*/




    /* Menu horizontal search
    ---------------------------------------------------------- */
    /* Search position */
    .logo-left   .search form { right: 0; }
    .logo-center .search form { right: 0; }

    /* Search style */
    .menu-hor .search { position: static; }
    .menu-hor .search form {
        position: absolute;
        margin: 0;

        *top: -1px;
    }

    .menu-hor input.search-value {
        width: 38px; height: 38px;
        padding-top: 10px; padding-bottom: 10px;
        color: #fff;
        text-indent: -9999px;

        *padding-top: 0; *padding-bottom: 0;
        *line-height: 38px;

        /* CSS transition */
        -webkit-transition: width .3s cubic-bezier(0.2, 1, 0.3, 1);
           -moz-transition: width .3s cubic-bezier(0.2, 1, 0.3, 1);
                transition: width .3s cubic-bezier(0.2, 1, 0.3, 1);
    }

    .menu-hor .search-value:hover,
    .menu-hor .search-value:focus,
    .menu-hor .search-value.focus {
        background-color: #555a5f;
        padding-right: 40px;
        width: 240px;
        text-indent: 0;
        border: none;
        box-shadow: none;
        opacity: 1 !important;

        *width: 200px;
    }



    /* Menu vertical search
    ---------------------------------------------------------- */
    .menu-ver .search form { margin-bottom: 0; }
    .menu-ver input.search-value {
        width: 100%;
        margin-top: 5px;
        padding: 15px 15px 5px 44px;
        background-position: 15px 16px;
        border-top: 1px solid #e5e5e5;

        *width: 77%;
        *padding-left: 18%; *padding-right: 5%;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    .menu-ver .search-value:hover,
    .menu-ver .search-value:focus,
    .menu-ver .search-value.focus { opacity: 1 !important; }



/*  Menu Theme color
============================================================== */

    /* Menu horizontal color
    ---------------------------------------------------------- */
    .dark .menu-hor > .menu > li > a                { color: #ccc; }
    .dark .menu-hor > .menu > li:hover > a,
    .dark .menu-hor > .menu > li.selected > a       { color: #fff; }
    .dark .menu-hor input.search-value              { background-position: right -39px; opacity: .5; }

    .bg-light .menu-hor > .menu > li > a            { color: #666; }
    .bg-light .menu-hor > .menu > li:hover> a,
    .bg-light .menu-hor > .menu > li.selected> a    { color: #fff; }
    .bg-light .menu-hor input.search-value          { color: #fff; }

    .bg-dark .menu-hor > .menu > li > a             { color: hsla(0,0%,100%,.8); }
    .no-hsla .bg-dark .menu-hor > .menu > li > a    { color: #fff; }
    .bg-dark .menu-hor > .menu > li:hover > a,
    .bg-dark .menu-hor > .menu > li.selected > a    { color: #fff; }
    .bg-dark .menu-hor input.search-value           { background-position: right -39px; }



    /* Menu vertical theme-dark
    ---------------------------------------------------------- */
    .dark .menu-ver                                 { border-color: #333; }

    .dark .menu-ver .menu > li > a                  { color: #ccc; }
    .dark .menu-ver .menu > li:hover > a,
    .dark .menu-ver .menu > li.selected > a,
    .dark .menu-ver .menu > li > a.actived          { background-color: transparent; color: #fff; }

    /* Arrow & Caret*/
    .dark .menu-ver > .menu > li.selected > a:after { border-left-color: #333; }
    .dark .menu-ver a > .caret                      { background-color: #666; }
    .dark .menu-ver a.actived > .caret              { background-color: #fff; }

    /* Search */
    .dark .menu-ver input.search-value              { background-position: 15px -34px; opacity: .5; }
    .dark .menu-ver input.search-value,
    .dark .menu-ver input.search-value:focus        { border-color: #333; }


    /* Menu vertical bg-light
    ---------------------------------------------------------- */
    .bg-light .menu-ver                             { border-color: #999; }

    .bg-light .menu-ver .menu > li > a              { color: #666; }
    .bg-light .menu-ver .menu > li:hover > a,
    .bg-light .menu-ver .menu > li.selected > a,
    .bg-light .menu-ver .menu > li > a.actived      { background-color: transparent; color: #333; }

    /* Arrow & Caret*/
    .bg-light .menu-ver > .menu > li.selected > a:after
    { border-left-color: #999; }
    .bg-light .menu-ver a > .caret                  { background-color: #ccc; }
    .bg-light .menu-ver a.actived > .caret          { background-color: #333; }

    /* Search */
    .bg-light .menu-ver input.search-value          { background-position: 15px 17px; }
    .bg-light .menu-ver input.search-value,
    .bg-light .menu-ver input.search-value:focus    { border-color: #999; }


    /* Menu vertical bg-light
    ---------------------------------------------------------- */
    .bg-dark .menu-ver
    { border-color: #fff; border-color: hsla(0,0%,100%,.75); }

    .bg-dark .menu-ver .menu > li > a               { color: #fff; color: hsla(0,0%,100%,.75); }
    .bg-dark .menu-ver .menu > li:hover > a,
    .bg-dark .menu-ver .menu > li.selected > a,
    .bg-dark .menu-ver .menu > li > a.actived
    { background-color: transparent; color: #fff; }

    /* Arrow & Caret*/
    .bg-dark .menu-ver > .menu > li.selected > a:after
    { border-left-color: #fff; border-left-color: hsla(0,0%,100%,.75); }
    .bg-dark .menu-ver a > .caret                   { background-color: #fff; background-color: hsla(0,0%,100%,.25); }
    .bg-dark .menu-ver a.actived > .caret           { background-color: #fff; }

    /* Search */
    .bg-dark .menu-ver input.search-value           { background-position: 15px -34px; opacity: .5; }
    .bg-dark .menu-ver input.search-value,
    .bg-dark .menu-ver input.search-value:focus     { border-color: #fff; border-color: hsla(0,0%,100%,.75); }




/*  Logo & Menu Media Queries
============================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {

    .logo-center .menu-hor > .menu > li > a
    { padding-left: 28px; padding-right: 28px; }
}

@media only screen and (max-width: 767px) {

    .wrapper.header                             { }
    .header .container                          { overflow: hidden; }

    /* Logo
    ---------------------------------------------------------- */
    .logo { padding-bottom: 10px; }


    /* Menu Horizontal classic
    ---------------------------------------------------------- */

    /* Menu Style */
    .menu-hor .menu > li                        { float: none; }
    .menu-hor .menu > li > a {
        position: static;
        display: inline-block;
        float: none;
        padding: 15px 30px 15px 0 !important;
    }

    .menu-hor .menu > li:hover > a,
    .menu-hor .menu > li.selected > a,
    .menu-hor .menu > li > a.actived            { background-color: transparent; color: #333; }

    /* Menu Level 1 */
    .menu-hor                                   { float: none !important; clear: both; }
    .menu-hor > .menu                           { float: none; border-top: 1px dotted #ccc; border-top-color: hsla(0,0%,0%,.2); }
    .menu-hor > .menu > li > a                  { margin-right: 0;  color: #999; }

    .menu-hor > .menu                           { display: none; }
    .menu-hor > .menu.actived                   { display: block; }

    /* Menu Level 2 & 3 */
    .menu .menu {
        position: static;
        width: auto;
        padding-left: 20px;
        background-color: transparent;
    }
    .menu-hor .menu .menu                       { border: none; }
    .menu .menu .menu                           { left: 0; top: 0; }
    .menu .menu > li > a                        { color: #999; }

    .menu .menu > li:hover > a,
    .menu .menu > li.selected > a               { background-color: transparent; color: #333; }

    .menu       > li:hover .menu,
    .menu .menu > li:hover .menu                { display: none; }
    .menu       > li .menu.actived,
    .menu .menu > li .menu.actived              { display: block; }


    /* Menu mega */
    .menu .menu-mega { position: relative; }
    .menu-mega .menu-outer {
        position: static;
        background-color: transparent;
        color: #444;
    }
    .menu-mega .menu-outer { padding-top: 0; padding-bottom: 0; }
    .menu-mega .container { padding-left: 20px; }
    .menu-mega .menu { padding-left: 0; }

    .menu-mega:hover .menu-outer { display: none; }
    .menu-mega .menu-outer.actived,
    .menu-mega .menu-outer.actived .menu { display: block; }



    /* Menu Arrow */
    .menu-hor > .menu > li.selected > a:after   { display: none; }

    /* Menu Caret */
    .menu-hor > .menu > li > a .caret           { display: block; }
    .menu a         > .caret                    { top: 23px; background-color: #ccc; }
    .menu a.actived > .caret                    { background-color: #333; }

    /* Menu button toggle */
    .menu-toggle                                { display:block; position: absolute; top: -48px; }
    .logo-left .menu-toggle.btn-toggle          { left: auto; right: 0; }


    /* Search form */
    .menu .search form                          { position: static; float: none; }

    .menu-hor input.search-value,
    .menu-hor input.search-value:hover,
    .menu-hor input.search-value:focus,
    .menu-hor input.search-value.focus {
        float: none;
        width: 100%; height: auto;
        padding: 15px 20px 15px 30px;
        background-color: transparent;
        background-position: 0 17px;
        color: #333;

        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    .ie7 .menu-hor input.search-value           { display: none; }



    /* Menu Vertical classic
    ---------------------------------------------------------- */
    .menu-ver .menu > li > a                    { position: static; display: inline-block; }
    .menu-ver > .menu                           { padding-top: 0; }

    /* Menu vertical show/hide */
    .menu-ver > .menu                           { display: none; }
    .menu-ver > .menu.actived                   { display: block; }

    /* Menu vertical toggle */
    .menu-ver .menu-toggle                      { position: relative; left: 5px; top: 0; }



    /* Menu Theme color
    ---------------------------------------------------------- */
    /* Menu horizontal theme-dark */
    .dark .menu > li > a                        { color: #ccc; }

    .dark .menu > li:hover > a,
    .dark .menu > li.selected > a,
    .dark .menu > li > a.actived                { color: #fff; }

    .dark .menu a         > .caret              { background-color: #666; }
    .dark .menu a.actived > .caret              { background-color: #fff; }

    .dark .menu-hor input.search-value,
    .dark .menu-hor input.search-value:hover,
    .dark .menu-hor input.search-value:focus,
    .dark .menu-hor input.search-value.focus {
        background-position: 0 -34px;
        color: #fff;
    }

    /* Menu horizontal Bg-light */
    .bg-light .menu-hor .menu > li:hover> a,
    .bg-light .menu-hor .menu > li.selected> a,
    .bg-light .menu-hor .menu > li > a.actived  { color: #333; }
    .bg-light .menu .menu > li > a              { color: #666; }

    .bg-light .menu a         > .caret          { background-color: hsla(0,0%,0%,.15); }
    .bg-light .menu a.actived > .caret          { background-color: #333; }

    /* Menu horizontal Bg-dark */
    .bg-dark .menu-hor .menu > li:hover> a,
    .bg-dark .menu-hor .menu > li.selected> a,
    .bg-dark .menu-hor .menu > li > a.actived   { color: #fff; }

    .bg-dark .menu .menu > li > a               { color: #fff; color: hsla(0,0%,100%,.8);  }

    .bg-dark .menu a         > .caret           { background-color: hsla(0,0%,100%,.4); }
    .bg-dark .menu a.actived > .caret           { background-color: #fff; }

    .bg-dark .menu-hor input.search-value,
    .bg-dark .menu-hor input.search-value:hover,
    .bg-dark .menu-hor input.search-value:focus,
    .bg-dark .menu-hor input.search-value.focus {
        background-position: 0 -34px;
        color: #fff;
    }



    /* Menu Push
    ---------------------------------------------------------- */
    /* Logo */
    .l-push                                     { text-align: center }
    .l-push .logo                               { display: inline-block; float: none; }


    /* Menu Push style */
    .m-push {
        position: fixed;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;      /* For iOS5+ */
        z-index: 10;

        width: 250px !important; height: 100%;
        left: 0; top: -1px;
        visibility: hidden;
        background-color: #333;
    }
    .m-push.menu-ver                            { border: none; }

    .m-push .menu > li                          { float: none; display: block; }
    .m-push .menu > li > a {
        float: none;
        display: inline-block;
        position: static;
        padding: 15px 30px 15px 0 !important;
        color: #ccc !important;
    }

    .m-push .menu > li:hover > a,
    .m-push .menu > li.selected > a,
    .m-push .menu > li > a.actived              { background-color: transparent; color: #fff !important; }


    /* Menu Level 1 */
    .m-push > .menu {
        display: block;
        float: none;
        padding-left: 20px; padding-top: 5px;
        border-top: none;                       /* For menu hor */
    }
    .m-push > .menu > li > a                    { margin-right: 0; }


    /* Menu Level 2 & 3 */
    .m-push .menu .menu {
        position: static;
        width: auto;
        padding-left: 20px;
        background-color: transparent;
        border: none;
    }

    .m-push .menu .menu > li:hover > a,
    .m-push .menu .menu > li.selected > a       { background-color: transparent; color: #fff; }


    /* Menu mega */
    .m-push .menu-mega .menu-outer {
        width: auto;
        padding-right: 20px;
        color: #ccc;
    }
    .m-push .menu-mega [class*="span"]          { width: auto;  }
    .m-push .menu-mega .menu                    { padding-left: 0; }


    /* Menu Arrow */
    .m-push > .menu > li.selected > a:after     { display: none; }


    /* Menu Caret */
    .m-push a > .caret                          { top: 23px; background-color: #666 !important; }
    .m-push a.actived > .caret                  { background-color: #fff !important; }
    .m-push > .menu > li > a .caret             { display: block; }

    /* Menu Toggle */
    .menu-toggle.ele-toggle {
        display: block;
        position: fixed;
        left: 0; top: 10px;
        z-index: 10;
    }
    .menu-toggle.ele-toggle:after {
        content: " ";
        display: block;
        position: absolute;
        width: 0; height: 0;
        left: 0; top: 18px;
        border: 4px solid transparent;
        border-left-color: #333;
        border-left-color: hsla(0,0%,0%,.4);
    }

    .menu-toggle.push                           { height: 100%; width: 100%; }
    .menu-toggle.push:after                     { border-left-color: #333; }
    .menu-toggle.push:before {
        content: " ";
        display: block;
        position: absolute;
        width: 100%; height: 100%;
        top: -10px;
        background-color: transparent;
    }


    /* Search form */
    .m-push .search form                        { position: static; float: none; }

    .m-push input.search-value,
    .m-push input.search-value:hover,
    .m-push input.search-value:focus,
    .m-push input.search-value.focus {
        float: none;
        width: 185px;
        padding: 15px 0 15px 30px;
        margin-top: 0;
        border: none;
        background-color: transparent;
        background-position: 0 -34px !important;
        color: #fff !important;
        -webkit-box-sizing: content-box;
           -moz-box-sizing: content-box;
                box-sizing: content-box;
    }
    .m-push .search-value::-webkit-input-placeholder        { color: #ccc; }
    .m-push .search-value:-moz-placeholder                  { color: #ccc; }
    .m-push .search-value:-ms-input-placeholder             { color: #ccc; }


    /* Push transition */
    .m-push,
    .menu-toggle.ele-toggle {
        -webkit-transition: -webkit-transform .15s;
           -moz-transition:    -moz-transform .15s;
                transition:         transform .15s;
    }
    .m-push {
        -webkit-transform: translateX(-250px);
           -moz-transform: translateX(-250px);
                transform: translateX(-250px);
    }


    /* Menu push actived */
    html.push                                   { overflow-x: hidden; background-color: #333; }
    html.push body                              { position: relative; left: 250px; background-color: #fff; }
    html.push.touch body                        { left: 0; }

    html.touch .m-push                          { visibility: visible; }
    html.push .m-push {
        visibility: visible;

        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
                transform: translateX(0);
    }
    .menu-toggle.push {
        -webkit-transform: translateX(250px);
           -moz-transform: translateX(250px);
                transform: translateX(250px);
    }
    .no-csstransforms .menu-toggle.push         { left: 250px; }
}




/*  Logo & Menu Helper
============================================================== */

    /* Helper
    ---------------------------------------------------------- */
    .helper {
        position: fixed;
        left: 0;
        width: 100%;
        padding-top: 0 !important;
        z-index: 10;
        background-color: #fff;
        /*box-shadow: 0 1px 0 hsla(0,0%,0%,.1);*/
    }

    .ie7 .helper                        { position: fixed; }

    /* Helper Transition */
    .csstransitions .helper {
        -webkit-transform: translateY(-30px);
           -moz-transform: translateY(-30px);
                transform: translateY(-30px);
    }
    .csstransitions .helper.ready {
        -webkit-transition: -webkit-transform .15s .1s;
           -moz-transition:    -moz-transform .15s .1s;
                transition:         transform .15s .1s;
    }
    .csstransitions .helper:hover {
        -webkit-transform: translateY(0);
           -moz-transform: translateY(0);
                transform: translateY(0);
    }

    .no-csstransforms .helper           { top: -30px; }
    .no-csstransforms .helper:hover     { top: 0; }

    /* Helper logo */
    .helper .logo                       { display: none; }

    /* Helper menu */
    .helper .menu-hor > .menu           { font-size: .85em; }

    /* Easy Hover */
    .helper:after {
        content: " ";
        position: absolute;
        display: block;
        top: 100%;
        width: 100%; height: 29px;      /* IE10: height 30px -> error: bg-color: black ??? */
        background-color: transparent;
    }

    /* Header Ghost
    ---------------------------------------------------------- */
    .ghost                          { display: none; }
    .ghost.ready                    { display: block; visibility: hidden; }


    /* Helper background color */
    .dark.helper                    { background-color: #444; }


    /* Helper Layout-box
    ---------------------------------------------------------- */
    .layout-box .header.helper {
        left: 50%;
        width: 1040px;
        margin-left: -520px;
    }

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .layout-box .header.helper          { width: 788px; margin-left: -394px; }
    }

    @media only screen and (max-width: 767px) {
        .layout-box .header.helper          { width: 320px; margin-left: -160px; }
    }

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .layout-box .header.helper          { width: 480px; margin-left: -240px; }
    }


    /* Helper Responsive
    ---------------------------------------------------------- */
    @media only screen and (max-width: 767px) {

        .helper .menu-hor > .menu { font-size: 1em; }
        .ghost.ready { display: none; }
    }



/*  Menu Affix
============================================================== */
    .menu-ver.affix
    { z-index: 10; background-color: #fff; }

    /* Theme-color */
    .dark .menu-ver.affix,
    .bg-dark .menu-ver.affix
    { background-color: #444; border-color: transparent; }

    .bg-dark .menu-ver.affix > .menu > li.selected > a:after
    { border-left-color: #fff; }
    .bg-dark .menu-ver.affix input.search-value  { border-color: #666; }




/*  Menu other options
============================================================== */

    /* Menu condensed */
    .menu-hor.condensed li > a,
    .menu-ver.condensed li > a,
    .menu.condensed li > a
    { padding-top: 10px !important; padding-bottom: 10px !important; }
    .menu-hor.condensed a > .caret,
    .menu-ver.condensed a > .caret,
    .menu.condensed a > .caret { top: 18px; }


    /* Menu condensed 2 */
    .menu-hor.condensed2 li > a,
    .menu-ver.condensed2 li > a,
    .menu.condensed2 li > a
    { padding-top: 8px !important; padding-bottom: 8px !important; }
    .menu-hor.condensed2 a > .caret,
    .menu-ver.condensed2 a > .caret,
    .menu.condensed2 a > .caret { top: 17px; }




/*  Menu Effect
============================================================== */

    @-webkit-keyframes menubounce {
        25%     { text-indent: 15px; }
        100%    { text-indent: 0; }
    }

    /* Desktop */
    @media only screen and (min-width: 768px) {

        .menu-hor.fx-animate .menu li > .menu {
            display: block;
            visibility: hidden;

            -webkit-transition: -webkit-transform .2s cubic-bezier(.2,.6,.3,1);
               -moz-transition:    -moz-transform .2s cubic-bezier(.2,.6,.3,1);
                    transition:         transform .2s cubic-bezier(.2,.6,.3,1);

            -webkit-transform: translateY(20px);
               -moz-transform: translateY(20px);
                    transform: translateY(20px);
        }

        .menu-hor.fx-animate .menu li:hover > .menu {
            visibility: visible;

            -webkit-transform: translateY(0);
               -moz-transform: translateY(0);
                    transform: translateY(0);
        }
    }





/*  Breadcrumbs
============================================================== */

    /* Page Title
    ---------------------------------------------------------- */
    .page-title {
        display: inline-block;
        *display: inline; zoom: 1;
        border-bottom: 1px dotted #ddd;
    }
    .page-title > *                             { display: inline; color: #999; }



    /* Breadcrumbs Content
    ---------------------------------------------------------- */
    .bc-nav                                 { margin-top: 5px; margin-bottom: 0; }
    .bc-nav li                              { float: left; margin-bottom: 0; }
    .bc-nav a {
        position: relative;
        padding-left: 13px; padding-right: 10px;
        color: #ccc;
        font-size: .85em;
    }
    .bc-nav a:hover                         { color: #cc0055; }

    /* Breadcrumbs Arrow */
    .bc-nav a:before {
        content: "";
        display: block;
        position: absolute;
        width: 0; height: 0;
        top: 5px; left: 0;
        border: 4px solid transparent;
        border-left-color: #ccc;
    }
    .bc-nav a:hover:before                  { border-left-color: #cc0055; }

    /* Button Home */
    .bc-nav li.i-home                       { font-size: 1em; }
    .bc-nav li.i-home a {
        display: inline-block;
        opacity: .2;
        text-indent: -9999px;
    }
    .bc-nav li.i-home                       { color: #ccc; margin-right: 0; }
    .bc-nav li.i-home:hover                 { color: #cc0055; }

    .bc-nav li:first-child a                { padding-left: 0; }
    .bc-nav li:first-child a:before         { display: none; }

    .ie7 .bc-nav li a                       { padding-left: 5px; }


    /* Background color
    ---------------------------------------------------------- */
    .dark .page-title                       { border-bottom-color: #666; }
    .dark .bc-nav li.i-home,
    .dark .bc-nav a                         { color: #999; }
    .dark .bc-nav li.i-home:hover,
    .dark .bc-nav a:hover                   { color: #cc0055; }
    .dark .bc-nav a:before                  { border-left-color: #999; }
    .dark .bc-nav a:hover:before            { border-left-color: #cc0055; }

    .bg-light .page-title                   { border-bottom-color: #999; }
    .bg-light .page-title > *               { color: #666; }
    .bg-light .bc-nav li.i-home,
    .bg-light .bc-nav a                     { color: #333; opacity: .5; }
    .bg-light .bc-nav a:before              { border-left-color: #333; }
    .bg-light .bc-nav li.i-home:hover,
    .bg-light .bc-nav a:hover               { opacity: 1; }
    .ie7 .bg-light .bc-nav li.i-home        { color: #666; }

    .bg-dark .bc-nav li.i-home,
    .bg-dark .bc-nav a                      { color: #fff; opacity: .5; }
    .bg-dark .bc-nav a:before               { border-left-color: #fff; }
    .bg-dark .bc-nav li.i-home:hover,
    .bg-dark .bc-nav a:hover                { opacity: 1; }
    .ie7 .bg-dark .bc-nav li.i-home         { color: #fff; }






/*  Portfolio
============================================================== */
    .ie7 .portfolio *                       { z-index: 2; }

    /* Portfolio Filter
    ---------------------------------------------------------- */
    .portfolio .filter {
        position: absolute;
        right: 0; top: -158px;
        z-index: 3;
    }
    .ie7 .portfolio .filter                 { overflow: hidden; }


    /* Portfolio Article
    ---------------------------------------------------------- */
    .portfolio .items {

        /* Isotope transition */
        -webkit-transition-duration: .3s;
           -moz-transition-duration: .3s;
                transition-duration: .3s;
        -webkit-transition-property: height, width;
           -moz-transition-property: height, width;
                transition-property: height, width;
    }
    .portfolio .items > article {

        /* Isotope transition */
        -webkit-transition-duration: .5s;
           -moz-transition-duration: .5s;
                transition-duration: .5s;
        -webkit-transition-property: -webkit-transform, opacity;
           -moz-transition-property:    -moz-transform, opacity;
                transition-property:         transform, opacity;
    }



    /* Portfolio Pagination
    ---------------------------------------------------------- */
    .portfolio .pagi {
        position: relative;
        float: right;
        left: -50%;
    }
    .portfolio .pagi ul                         { position: relative; left: 50%; }






/* Blog Background color
============================================================== */
    .dark .blog .item > .title              { color: #fff; }
    .dark .blog.classic .item > .thumbnail  { background-color: #333; }

    .dark .blog aside .tags a               { background-color: #333; color: #999; }
    .dark .blog aside .tags a:hover         { background-color: #cc0055; color: #fff; }






/*  Slogan
============================================================== */
    .slogan                             { margin-bottom: 50px; text-align: center; }
    .slogan h1,
    .slogan h2,
    .slogan h3,
    .slogan h4,
    .slogan h5,
    .slogan h6                          { color: #666; }






/*  Footer Copyright & Social
============================================================== */

    /*  Footer Copyright
    ---------------------------------------------------------- */
    .copyright                                  { float: left; }
    .copyright p {
        font-size: .85em;
        margin-bottom: 0;
    }
    .copyright a                                { text-decoration: none; }
    .copyright .term {
        padding-right: 10px;
        margin-right: 10px;
        border-right: 1px dotted #ccc;
    }
    .copyright .term:last-child                 { border-right: none; }

    /* Background color */
    .dark     .copyright .term                  { border-right-color: #666; }
    .bg-light .copyright .term                  { border-right-color: #999; }
    .bg-dark  .copyright .term                  { border-right-color: #fff; }


    /*  Footer Social
    ---------------------------------------------------------- */
    .footer .social                             { float: right; }

    /* Background color */
    .dark .footer .social                       { color: #999; }





/*  Responsive
    Note: Design for a width of 768px
============================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {


}




/*  Note: Design for a width of 320px + 480px
============================================================== */
@media only screen and (max-width: 767px) {


    /* Show */
    .show-less > .columns               { margin-bottom: 10px; }
    .show-full > .columns               { margin-bottom: 30px; }



    /* Team */
    .team .column                       { margin-left: 5px; margin-right: 5px; }


    /* Basic CSS
    ---------------------------------------------------------- */
    .wrapper                            { padding-top: 30px; padding-bottom: 30px; }

    /* Title */
    .title-up                           { display: none; }


    /* Typography
    ---------------------------------------------------------- */
    h1 { font-size: 35px; line-height: 40px; margin-bottom: 10px;}
    h2 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
    h3 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
    h4 { font-size: 17px; line-height: 24px; }
    h5 { font-size: 14px; line-height: 21px; }



    /* Portfolio
    ---------------------------------------------------------- */
    .portfolio .filter                          { top: -50px; }





    /* Blog
    ---------------------------------------------------------- */
    /* Blog classic */
    .blog.classic .item .time                   { width: 48px; }
    .blog.classic .item .item-content,
    .blog.classic .pagi                         { margin-left: 60px; }



    /* Discussion */
    .discussion .comment.level-2                { padding-left: 108px; background-position: 10px 10px; }
    .discussion .comment.level-3                { padding-left: 148px; background-position: 50px 10px; }

    .discussion .comment.level-2 .avatar        { left: 40px; }
    .discussion .comment.level-3 .avatar        { left: 80px; }

    /* Write Comment */
    .write-comment textarea,
    .write-comment input[type="text"] {
        width: 93.5%;
        margin-right: 0;
        padding-left: 3%; padding-right: 3%;
    }
    .write-comment textarea                     { height: 100px; }


    /* Map
    ---------------------------------------------------------- */
    .map                                        { height: 400px; }


    /*  Footer Copyright
    ---------------------------------------------------------- */
    .copyright                                  { float: none; }


    /* Footer Social
    ---------------------------------------------------------- */
    .footer .social {
        position: relative;
        float: none;
        margin-top: 10px;
    }
    .footer .social [class*="i-"]               { margin-right: 20px; }


    /* Backtop
    ---------------------------------------------------------- */
    #backtop                                    { display: none; }




    /* Theme Dark
    ---------------------------------------------------------- */
    /* Footer Social */
    .dark .footer .social .items                { background-color: #222; box-shadow: none; }

}



/*  Note: Design for a width of 480px only
============================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {


    /* Show */
    .show-full .span4                           { width: 46%; margin-left: 2%; margin-right: 2%; }



    /* Team */
    .team .item.four.columns,
    .team .item.one-third.columns               { width: 220px; }

}



/*  Note: Design for a width of 320px only
============================================================== */
@media only screen and (max-width: 480px) {

    /* Updates
    ---------------------------------------------------------- */

    /* Portfolio */
    .portfolio article.four.columns             { width: 140px; }



    /* Blog
    ---------------------------------------------------------- */
    /* Blog classic */
    .blog.classic .item .time { display: none; }
    .blog.classic .item .item-content { margin-left: 0; }
}

    @-webkit-keyframes menubounce {
        25%     { text-indent: 15px; }
        100%    { text-indent: 0; }
    }

    /* Desktop */
    @media only screen and (min-width: 768px) {

        .rm01hor.fx-animate .menu li > .menu {
            display: block;
            visibility: hidden;

            -webkit-transition: -webkit-transform .2s cubic-bezier(.2,.6,.3,1);
               -moz-transition:    -moz-transform .2s cubic-bezier(.2,.6,.3,1);
                    transition:         transform .2s cubic-bezier(.2,.6,.3,1);

            -webkit-transform: translateY(20px);
               -moz-transform: translateY(20px);
                    transform: translateY(20px);
        }

        .rm01hor.fx-animate .menu li:hover > .menu {
            visibility: visible;

            -webkit-transform: translateY(0);
               -moz-transform: translateY(0);
                    transform: translateY(0);
        }
    }