/* -----------------------------------------------------------------------------

    ORDO
    v 1.0
    by Phantasia Aeterna

----------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------

    TABLE OF CONTENT

    1.) General
    2.) Typography
    3.) Components
    4.) Wrapper
    5.) Header
    6.) Page
    7.) Sections
    8.) Twitter Feed
    9.) Widgets
    10.) Footer
    11.) Back To Top
    12.) Responsive
    13.) HiDPI Graphics

----------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------

    1.) GENERAL

----------------------------------------------------------------------------- */

body { color: #000; background: #fff url('../../dummies/page_bg.jpg') center 0 no-repeat; background-attachment: fixed; }
a { color: #6c8c36; }
a:hover { color: #4b595f; }



/* -----------------------------------------------------------------------------

    2.) TYPOGRAPHY

----------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------
        HEADINGS
    ------------------------------------------------------------------------- */

    .various-content h1, .various-content h2,
    .various-content h3, .various-content h4,
    .various-content h5, .various-content h6 { color: #2B393F; }

    /* -------------------------------------------------------------------------
        TABLE
    ------------------------------------------------------------------------- */

    .various-content table td,
    .various-content table th { border-color: #EEE; }


/* -----------------------------------------------------------------------------

    3.) COMPONENTS

----------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------
        ACCORDION
    ------------------------------------------------------------------------- */

    .accordion-toggle { color: #FFF; background: #263034; }
    .accordion-content { border-color: #EEE; }

    /* ----------------------------------
        ALERT MESSAGES
    ---------------------------------- */

    p.alert { border-color: #EEE; }
    p.alert.warning .ico,
    p.alert.warning strong { color: #d40041; }
    p.alert.success .ico,
    p.alert.success strong { color: #499143; }
    p.alert.info .ico,
    p.alert.info strong { color: #0084ff; }
    p.alert.notification .ico,
    p.alert.notification strong { color: #f68e56; }

    /* -------------------------------------------------------------------------
        BUTTONS
    ------------------------------------------------------------------------- */

    .button { border-color: rgba(255,255,255,.07); }
    .button.color1 > span { color: #40551d; text-shadow: 0 1px 0 rgba(255,255,255,.15); background: #6c8c36;
        box-shadow: inset 0 0 1px rgba(255,255,255,0.3), inset 0 2px 0 rgba(255,255,255,0.1);
        -webkit-box-shadow: inset 0 0 1px rgba(255,255,255,0.3), inset 0 2px 0 rgba(255,255,255,0.1);
        -moz-box-shadow: inset 0 0 1px rgba(255,255,255,0.3), inset 0 2px 0 rgba(255,255,255,0.1); }
    .button.color1:hover > span { background: #7b984a; }
    .button.color1:active > span { background: #56702b;
        box-shadow: inset 0 0 1px rgba(255,255,255,0.3);
        -webkit-box-shadow: inset 0 0 1px rgba(255,255,255,0.3);
        -moz-box-shadow: inset 0 0 1px rgba(255,255,255,0.3); }
    .button.color2 > span { color: #FFF; text-shadow: 0 1px 0 rgba(255,255,255,.15); background: #263034;
        box-shadow: inset 0 0 1px rgba(255,255,255,0.3), inset 0 2px 0 rgba(255,255,255,0.1);
        -webkit-box-shadow: inset 0 0 1px rgba(255,255,255,0.3), inset 0 2px 0 rgba(255,255,255,0.1);
        -moz-box-shadow: inset 0 0 1px rgba(255,255,255,0.3), inset 0 2px 0 rgba(255,255,255,0.1); }
    .button.color2:hover > span { background: #3d494e; }
    .button.color2:active > span { background: #212a2e;
        box-shadow: inset 0 0 1px rgba(255,255,255,0.3);
        -webkit-box-shadow: inset 0 0 1px rgba(255,255,255,0.3);
        -moz-box-shadow: inset 0 0 1px rgba(255,255,255,0.3); }

    /* -------------------------------------------------------------------------
        LOADING ANIMATION
    ------------------------------------------------------------------------- */

    .loading-anim i { background: url('../img/gfx.default.png') 0 -30px no-repeat; }
    .loading-anim.dark i { background-position: -30px -30px; }
    .mod-rgba .loading-anim span { background-color: rgba(0,0,0,.2); }

    /* -------------------------------------------------------------------------
        PAGE TITLE
    ------------------------------------------------------------------------- */

    .page-title { color: #FFF; background: #6c8c36; border-color: #56702b; }
    .page-title h2 { text-shadow: 0 1px 0 rgba(0,0,0,.3); }
    .page-title p,
    .page-title ul { color: #283a0a; text-shadow: 0 1px 0 rgba(255,255,255,.15); }
    .page-title a { color: #FFF; text-shadow: 0 1px 0 rgba(0,0,0,.15); }
    .page-title .project-info,
    .page-title .contact-info { border-color: #56702b; }
    .page-title .project-info ul,
    .page-title .contact-info ul { border-color: #829d54; }

    /* -------------------------------------------------------------------------
        PAGINATION
    ------------------------------------------------------------------------- */

    .pagination li a { color: #FFF; background: #263034; }
    .pagination li a:hover,
    .pagination li.active a { background: #6c8c36; }
    .pagination li a:active { background: #56702b; }
    .pagination li.dots { color: #CCC; }

    /* -------------------------------------------------------------------------
        SECTION TITLE
    ------------------------------------------------------------------------- */

    .section-title { color: #FFF; background: #6c8c36; border-color: #56702b; }
    .section-title h2 { text-shadow: 0 1px 0 rgba(0,0,0,.3); }
    .section-title p { color: #283a0a; text-shadow: 0 1px 0 rgba(255,255,255,.15); }
    .section-title a { color: #FFF; text-shadow: 0 1px 0 rgba(0,0,0,.3); }

    /* ----------------------------------
        TABS
    ---------------------------------- */

    .tabs .tab { color: #222B2F; border-color: #EEE; }
    .tabs .tab i { color: #BBB; }
    .tabs .tab.active { border-bottom-color: #FFF; }
    .tab-content .item { border-color: #EEE; }

    /* ----------------------------------
        THUMBNAIL GRID
    ---------------------------------- */

    .thumbnail-grid li .overlay { color: #FFF; background: #263034; background: rgba(0,0,0,.7); }

    /* MORE */

    .thumbnail-grid li.more .label { color: #FFF; background: #2f302e; background: rgba(0,0,0,.8); }
    .thumbnail-grid li.more a:active .label { background: rgba(0,0,0,.9); }



/* -----------------------------------------------------------------------------

    4.) WRAPPER

----------------------------------------------------------------------------- */

.wrapper-inner { background: #e9e8d3; }
.mod-rgba #wrapper { border: 22px solid rgba(255,255,255,.1); }


/* -----------------------------------------------------------------------------

    5.) HEADER

----------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------
        NAVBAR
    ------------------------------------------------------------------------- */

    #navbar { background: #FFF; }
    #navbar a { color: #6C8C36; }

    /* MAIN NAVIGATION */

    nav.main > button { color: #FFF; background: #6c8c36; }
    nav.main > button.active { background: #222b2f; }
    #navbar nav.main > ul > li.active > a,
    #navbar nav.main > ul > li.hover > a { color: #263034; }
    nav.main .arrow i { border-top-color: #FFF; }

    /* submenu */

    nav.main > ul > li > ul { background: #263034; }
    #navbar nav.main > ul > li > ul a { color: #FFF; border-top-color: #2d363a; border-bottom-color: #222b2f; }
    #navbar nav.main > ul > li > ul a:hover { color: #b6c69b; }
    nav.main > ul > li > ul i { color: #FFF; }


/* -----------------------------------------------------------------------------

    6.) PAGE

----------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------
        ARTICLE
    ------------------------------------------------------------------------- */

    article h2 { color: #222b2f; border-color: #EEE; }
    article ul.default-list li .ico { color: #BBB; }

    /* -------------------------------------------------------------------------
        ARTICLE TAGS
    ------------------------------------------------------------------------- */

    .article-tags li a { color: #848484; background: #F2F2F2; }
    .article-tags li a:hover { color: #FFF; background: #6c8c36; }
    .article-tags li a:active { background: #56702b; }


/* -----------------------------------------------------------------------------

    7.) SECTIONS

----------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------
        CONTACT FORM
    ------------------------------------------------------------------------- */

    section.contact-form { color: #FFF; background: #263034; border-color: #171d1f; }
    section.contact-form h2 { border-color: #333c40; }
    section.contact-form h2 span { border-color: #191f22; }
    section.contact-form form p .error-ico { color: #D40041; }
    section.contact-form form p.alert { background: #222b2f; }
    section.contact-form input,
    section.contact-form textarea,
    section.contact-form select { color: #777; }

    /* -------------------------------------------------------------------------
        FEATURED PROJECT
    ------------------------------------------------------------------------- */

    section.featured-project { color: #FFF; background: #6c8c36; border-color: #56702b; }

    /* DESCRIPTION */

    section.featured-project .project-description > h2 { border-color: #829d54; }
    section.featured-project .project-description > h2 > span { border-color: #56702b; }
    section.featured-project .various-content { color: #283a0a; text-shadow: 0 1px 0 rgba(255,255,255,.15); }
    section.featured-project .various-content a { color: #FFF; text-shadow: 0 1px 0 rgba(0,0,0,.3); }

    /* IMAGES */

    section.featured-project .project-images .image h3 { color: #FFF; background: #273134; }
    section.featured-project .project-images .image .img { border-color: #56702b; }
    section.featured-project .slider-nav li button { background: #a7ba86; }
    section.featured-project .slider-nav li.active button,
    section.featured-project .slider-nav li button:hover { background: #263034; }

    /* -------------------------------------------------------------------------
        FEATURES
    ------------------------------------------------------------------------- */

    section.features { background: #263034; border-color: #171d1f; }
    section.features .feature .ico { color: #FFF; background: #6a8a36; }
    section.features .feature h3 { color: #FFF; }
    section.features .various-content { color: #a5aeb2; }
    section.features .various-content a { color: #8DD0F3; }
    section.features .various-content a:hover { color: #a5aeb2; }

    /* -------------------------------------------------------------------------
        PRICE TABLE
    ------------------------------------------------------------------------- */

    section.price-table .price-column { color: #FFF; background: #263034;  }
    section.price-table .price-column .ico { color: #FFF; background: #6c8c36; }
    section.price-table .price-column h3 { background: #222b2f; border-top-color: #191f22; border-bottom-color: #333c40; }
    section.price-table .price-column h3 span { border-top-color: #333c40; border-bottom-color: #191f22; }
    section.price-table .price-column .price { color: #A5AEB2;  }
    section.price-table .price-column .price strong { color: #FFF; }
    section.price-table .price-column ul { color: #A5AEB2; border-top-color: #191f22; border-bottom-color: #333c40; }
    section.price-table .price-column li { border-top-color: #333c40; border-bottom-color: #191f22; }

    /* -------------------------------------------------------------------------
        SERVICES
    ------------------------------------------------------------------------- */

    section.services { color: #FFF; background: #263034; border-color: #171d1f; }
    section.services .service.first { background: url('../img/services1_right_bg.png') right 0 no-repeat; }
    section.services .service.last { background: url('../img/services1_left_bg.png') 0 0 no-repeat; }
    section.services .icon { color: #FFF; background: #6c8c36; }
    section.services .various-content p { color: #a5aeb2; }
    section.services .various-content a { color: #8DD0F3; }
    section.services .various-content a:hover { color: #a5aeb2; }

    /* -------------------------------------------------------------------------
        SLIDER
    ------------------------------------------------------------------------- */

    section.slider { background: #263034; }

    /* ITEMS */

    section.slider .carousel-inner .item .title-bg { color: #FFF; background: #171d1f; }
    section.slider .carousel-inner .item .text-bg { color: #FFF; background: #6c8c36; }
    section.slider .carousel-inner .item a { color: #FFF; }

    /* CONTROLS */

    section.slider .nav button { color: #40551d; text-shadow: 0 1px 0 rgba(255,255,255,.2); background-color: #6c8c36;  }
    section.slider .nav.prev button {
        background: #6c8c36; /* Old browsers */
        background: -moz-linear-gradient(left,  #6c8c36 0%, #6c8c36 61%, #4b6324 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#6c8c36), color-stop(61%,#6c8c36), color-stop(100%,#4b6324)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left,  #6c8c36 0%,#6c8c36 61%,#4b6324 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left,  #6c8c36 0%,#6c8c36 61%,#4b6324 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left,  #6c8c36 0%,#6c8c36 61%,#4b6324 100%); /* IE10+ */
        background: linear-gradient(to right,  #6c8c36 0%,#6c8c36 61%,#4b6324 100%); /* W3C */ }
    section.slider .nav.next button {
        background: #6c8c36; /* Old browsers */
        background: -moz-linear-gradient(left,  #4b6324 0%, #6c8c36 39%, #6c8c36 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4b6324), color-stop(39%,#6c8c36), color-stop(100%,#6c8c36)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left,  #4b6324 0%,#6c8c36 39%,#6c8c36 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left,  #4b6324 0%,#6c8c36 39%,#6c8c36 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left,  #4b6324 0%,#6c8c36 39%,#6c8c36 100%); /* IE10+ */
        background: linear-gradient(to right,  #4b6324 0%,#6c8c36 39%,#6c8c36 100%); /* W3C */ }

    /* -------------------------------------------------------------------------
        TEAM
    ------------------------------------------------------------------------- */

    section.team .team-member .portrait { border-color: #fff; }
    section.team .team-member > h3 { color: #222b2f; }
    section.team .team-member > h4 { color: #456645; }
    section.team .team-member .social { border-color: #587b58; }
    section.team .team-member .social a { color: #bcbec0; }
    section.team .team-member .social .twitter a:hover { color: #12ccb8; }
    section.team .team-member .social .facebook a:hover { color: #004ae0; }
    section.team .team-member .social .dribbble a:hover { color: #c5376d; }
    section.team .team-member .social .linkedin a:hover { color: #5674b9; }


/* -----------------------------------------------------------------------------

    8.) TWITTER FEED

----------------------------------------------------------------------------- */

#twitter-feed { color: #FFF; background: #222b2f; border-color: #56702b; }
#twitter-feed .tweet { color: #a5aeb2; }
#twitter-feed ul { border-color: #191f22; }
#twitter-feed h3 a { color: #FFF; }
#twitter-feed a { color: #8dd0f3; }
#twitter-feed a:hover { color: #FFF; }
#twitter-feed .date { text-shadow: 0 1px 0 rgba(0,0,0,.6); }
#twitter-feed .date,
#twitter-feed .date a { color: #4c5458; }


/* -----------------------------------------------------------------------------

    9.) WIDGETS

----------------------------------------------------------------------------- */

#widgets { color: #FFF; background: #263034; border-color: #191f22; }
#widgets .widgets-inner { border-color: #333c40; }

#widgets .widget h3 { border-color: #191f22; }
#widgets .widget-content { border-color: #333c40; }
#widgets a { color: #8dd0f3; }
#widgets a:hover { color: #FFF; }
#widgets .widget h3 i { color: #0F0F0F; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }

    /* -------------------------------------------------------------------------
        TEXT WIDGET
    ------------------------------------------------------------------------- */

    #widgets .text.widget .portrait { border-color: #1e262a; }
    #widgets .text.widget p { color: #a5aeb2; }

    /* -------------------------------------------------------------------------
        TAGS WIDGET
    ------------------------------------------------------------------------- */

    #widgets .tags.widget li a { color: #919597; background: #222b2f;
        box-shadow: inset 0 2px 0 rgba(0,0,0,0.08), inset 0 -1px 0 rgba(255,255,255,0.06);
        -webkit-box-shadow: inset 0 2px 0 rgba(0,0,0,0.08), inset 0 -1px 0 rgba(255,255,255,0.06);
        -moz-box-shadow: inset 0 2px 0 rgba(0,0,0,0.08), inset 0 -1px 0 rgba(255,255,255,0.06); }
    #widgets .tags.widget li a:hover { color: #FFF; background: #6c8c36;
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none; }
    #widgets .tags.widget li a:active { background: #56702b; }

    /* -------------------------------------------------------------------------
        IMAGES WIDGET
    ------------------------------------------------------------------------- */

    #widgets .widget.images .image-list { background: #222b2f; }

/* -----------------------------------------------------------------------------

    10.) FOOTER

----------------------------------------------------------------------------- */

footer { background: #222b2f; border-color: #191f22; }
.footer-inner { border-color: #333c40; }
footer .social-links li i { background: url('../img/gfx.default.png') 0 0 no-repeat; }

    /* -------------------------------------------------------------------------
        COPYRIGHT
    ------------------------------------------------------------------------- */

    footer .copyright p { color: #5e666a; }
    footer .copyright p a { color: #858585; }
    footer .copyright p a:hover { color: #5e666a; }

    /* -------------------------------------------------------------------------
        SOCIAL LINKS
    ------------------------------------------------------------------------- */

    footer .social-links li a { background: #6c8c36; }
    footer .social-links li a:hover { background: #7b984a; }
    footer .social-links li a:active { background: #56702b; }


/* -----------------------------------------------------------------------------

    11.) BACK TO TOP

----------------------------------------------------------------------------- */

    #back-to-top a { background: #6c8c36; }
    #back-to-top a:hover { background: #7b984a; }
    #back-to-top a i { color: #FFF; }


/* -----------------------------------------------------------------------------

    12.) RESPONSIVE

----------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------
        SMALL DESKTOP
    ------------------------------------------------------------------------- */

    @media (max-width: 1300px) {

    /* SECTIONS */

    /*  featured project */
    section.featured-project .project-images .image h3 { background: none; }
    /* slider */
    section.slider .nav button { color: #FFF; text-shadow: 0 1px 0 rgba(255,255,255,.2); }
    section.slider .nav.prev button { background: #171d1f; background: rgba(0,0,0,.5);
        filter: none; /* IE6-9 */ }
    section.slider .nav.next button { background: #171d1f; background: rgba(0,0,0,.5);
        filter: none; /* IE6-9 */ }
    section.slider .nav button:hover { background: rgba(0,0,0,.7); }

    }

    /* -------------------------------------------------------------------------
        LARGE TABLET
    ------------------------------------------------------------------------- */

    @media (max-width: 979px) {

    /* NAVBAR */

    nav.main > ul > li > a { border-color: #F1F1F1; }
    nav.main .arrow i { color: #6C8C36; }
    .active .arrow i { color: #FFF; }
    nav.main > ul > li > ul { background: none; }
    #navbar nav.main > ul > li > ul a { color: #6C8C36; }
    nav.main > ul > li > ul > li > .ico { color: #6C8C36; }
    #navbar nav.main > ul > li > ul li a { border-top-color: #F1F1F1; }

    }

    /* -------------------------------------------------------------------------
        SMALL TABLET
    ------------------------------------------------------------------------- */

    @media (max-width: 767px) {

    /* SECTIONS */

    /* services*/
    section.services .service,
    section.services .service.centered,
    section.services .service.centered.first,
    section.services .service.first { background: url('../img/services1_left_bg.png') 0 0 no-repeat; }
    section.services .service-inner { background: url('../img/services1_right_bg.png') right 0 no-repeat; }

    }

/* -----------------------------------------------------------------------------

    13.) HiDPI GRAPHICS

----------------------------------------------------------------------------- */

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

    .loading-anim i,
    footer .social-links li i { background-image: url('../img/gfx.default.2x.png'); background-size: 330px 60px; }

}