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

    ORDO
    v 1.0
    by Phantasia Aeterna

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


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

    TABLE OF CONTENT
    
    1.) Google Fonts
    2.) General
    3.) Typography
    4.) Components
    5.) Header
    6.) Page
    7.) Sections
    8.) Twitter Feed
    9.) Widgets
    10.) Footer
    11.) Back To Top
    12.) Various
    13.) Responsive

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


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

    1.) GOOGLE FONTS
    Please see the documentation on how to change fonts.

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

@import url(http://fonts.googleapis.com/css?family=Sintony:400,700|Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext);


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

    2.) GENERAL
    Some general definitions and resets.

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

body { margin: 0; padding-bottom: 50px; font-size: 16px; font-family: sans-serif; }

    /* -------------------------------------------------------------------------
        RESET
    ------------------------------------------------------------------------- */

    a { text-decoration: none; }
    a img { border: 0; }
    ol, ul, li { margin: 0; padding: 0; list-style-type: none; }
    a { -webkit-transition: background-color 300ms ease-in-out, color 300ms ease-in-out; -moz-transition: background-color 300ms ease-in-out, color 300ms ease-in-out; -ms-transition: background-color 300ms ease-in-out, color 300ms ease-in-out; -o-transition: background-color 300ms ease-in-out, color 300ms ease-in-out; transition: background-color 300ms ease-in-out, color 300ms ease-in-out; }
    ::-moz-focus-inner { border: 0; padding: 0; }
    button { padding: 0; border: 0; font-size: 1em; background: transparent; cursor: pointer;
        -webkit-transition: background-color 300ms ease-in-out, color 300ms ease-in-out; -moz-transition: background-color 300ms ease-in-out, color 300ms ease-in-out; -ms-transition: background-color 300ms ease-in-out, color 300ms ease-in-out; -o-transition: background-color 300ms ease-in-out, color 300ms ease-in-out; transition: background-color 300ms ease-in-out, color 300ms ease-in-out; }
    input, textarea, select { font-family: 'Sintony', sans-serif; outline: 0;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    img { max-width: 100%; }
    var { display: none; }
    iframe { display: block; margin: 0; border: 0; }

    /* -------------------------------------------------------------------------
        UTILITY CLASSES
    ------------------------------------------------------------------------- */

    .centered { text-align: center; }
    .rounded,
    .rounded img { border-radius: 50%; }


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

    3.) TYPOGRAPHY

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

.various-content > * { margin-top: 30px; }
.various-content *:first-child { margin-top: 0; }

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

    .various-content h1, .various-content h2,
    .various-content h3, .various-content h4,
    .various-content h5, .various-content h6 { font: normal 2.15em/1.4em 'Sintony', sans-serif; }
    .various-content h1 { margin: 40px 0 0 0; }
    .various-content h2 { margin: 40px 0 0 0; font-size: 1.7em; }
    .various-content h3 { margin: 30px 0 0 0; font-size: 1.3em; }
    .various-content h4 { margin: 30px 0 0 0; font-size: 1.1em; }
    .various-content h5 { margin: 30px 0 0 0; font-size: 1em; }
    .various-content h6 { margin: 30px 0 0 0; font-size: 0.9em; }

    /* -------------------------------------------------------------------------
        PARAGRAPHS & SECTIONS
    ------------------------------------------------------------------------- */

    .various-content p { margin: 30px 0 0 0; line-height: 1.7em; }
    .various-content p.lead { font: normal 1.2em/1.6em 'Sintony', sans-serif; }
    .various-content section { margin: 60px 0 0 0; }
    .various-content section.minor { margin: 30px 0 0 0; }

    /* -------------------------------------------------------------------------
        LISTS
    ------------------------------------------------------------------------- */

    ul.default-list { margin: 30px 0 0 0; list-style-type: none; font-size: 0.9em; }
    ul.default-list li { position: relative; margin: 10px 0 0 0; padding: 0 0 0 25px; list-style-type: none; }
    ul.default-list li:first-child { margin-top: 0; }
    ul.default-list li .ico { position: absolute; left: 3px; top: 0; font-size: 14px; }

    .various-content ol { margin: 30px 0 0 0; list-style-type: decimal; }
    .various-content ol li { position: relative; margin: 10px 0 0 0; list-style-type: decimal; list-style-position: inside; }
    .various-content ol li:first-child { margin-top: 0; }

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

    .various-content table { width: 100%; }
    .various-content table { margin-top: 30px; border-collapse: collapse; border: 0; }
    .various-content table th { font-weight: bold; text-align: left; }
    .various-content table td,
    .various-content table th { padding: 20px 15px; vertical-align: top; border-top: 1px solid transparent; }
    .various-content table tr:first-child th { border-top: 0; }
    

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

    4.) COMPONENTS

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

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

    .accordion { margin-top: 30px; }
    .accordion-item { margin-top: 10px; }
    .accordion-item:first-child { margin-top: 0; }
    .accordion-toggle { position: relative; margin: 0; padding: 10px 20px 10px 45px; font: normal 1em/1.3em  sans-serif; border-radius: 7px; cursor: pointer; }
    .accordion-toggle i { position: absolute; left: 15px; top: 10px; font-size: 18px; }
    .accordion-content { display: none; margin: 0 10px 0 10px; padding: 20px; font-size: 0.9em; border: 1px solid transparent; border-top: 0; border-radius: 0 0 7px 7px; }

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

    p.alert { position: relative; margin: 30px 0 0 0; padding: 16px 20px 16px 55px; line-height: 1.6em; font-family:  sans-serif; border: 1px solid transparent; border-radius: 7px; }
    p.alert .ico { position: absolute; top: 15px; left: 16px; font-size: 24px; }

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

    .button { display: inline-block; border: 5px solid transparent; border-radius: 34px; font-family:  sans-serif; }
    .button > span { display: inline-block; position: relative; top: 0; padding: 10px 24px 9px 24px; font-size: 1em; font-weight: bold; border-radius: 20px;
        -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
    .button:active > span { box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; }
    .button i { position: relative; top: 2px; margin-right: 6px; }

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

    @keyframes loading { from { transform: rotate(0); } to { transform: rotate(359deg); } }
    @-moz-keyframes loading { from { -moz-transform: rotate(0); } to { -moz-transform: rotate(359deg); } }
    @-webkit-keyframes loading { from { -webkit-transform: rotate(0); } to { -webkit-transform: rotate(359deg); } }
    @-o-keyframes loading { from { -o-transform: rotate(0); } to { -o-transform: rotate(359deg); } }

    .loading-anim { display: none; position: absolute; width: 100%; }
    .loading-anim span { display: block; position: relative; margin: 0 auto 0 auto; width: 50px; height: 50px; border-radius: 50%; }
    .loading-anim i { display: block; position: relative; top: 10px; left: 10px; width: 30px; height: 30px;
        animation-name: loading; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite;
        -moz-animation-name: loading; -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite;
        -webkit-animation-name: loading; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite;
        -o-animation-name: loading; -o-animation-duration: 1s; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; }

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

    .page-title { padding: 40px 0 50px 0; border-top: 10px solid transparent; background-position: center; background-size: cover; background-repeat: no-repeat; }
    .page-title h1 { margin: 0; font-size: 2.25em; font-family:  serif; line-height: normal; }
    .page-title p { margin: 10px 0 0 0; font-size: 1.12em; line-height: 1.5em; }
    .page-title a { text-decoration: none; }
    .page-title a:hover { text-decoration: underline; }

    /* CONTACT INFO */

    .page-title .contact-info { margin-top: 10px; font-size: 0.9em; border-top: 1px solid transparent; }
    .page-title .contact-info ul { padding-top: 20px; border-top: 1px solid transparent; }
    .page-title .contact-info li { position: relative; padding: 3px 0 3px 120px; }
    .page-title .contact-info h3 { position: absolute; left: 0; top: 4px; margin: 0; padding-left: 20px; width: 110px; font-size: 0.95em; text-transform: uppercase;
         font-family: 'Sintony', sans-serif;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    .page-title .contact-info h3 i { position: absolute; left: 0; top: -1px; font-size: 14px; }

    /* PROJECT INFO */

    .page-title .project-info { margin-top: 10px; font-size: 0.9em; border-top: 1px solid transparent; }
    .page-title .project-info ul { padding-top: 20px; border-top: 1px solid transparent; }
    .page-title .project-info li { position: relative; padding: 3px 0 3px 80px; }
    .page-title .project-info h3 { position: absolute; left: 0; top: 4px; margin: 0; width: 70px; font-size: 0.95em; font-family: 'Sintony', sans-serif; text-transform: uppercase; }

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

    .pagination { padding: 30px 0 30px 0; text-align: center; }
    .pagination li { display: inline-block; margin: 0 1px 0 1px; }
    .pagination li a { display: block; width: 40px; height: 40px; line-height: 40px; border-radius: 50%;
        -webkit-transition: background-color 300ms ease-in-out; -moz-transition: background-colory 300ms ease-in-out; -ms-transition: background-color 300ms ease-in-out; -o-transition: background-color 300ms ease-in-out; transition: background-color 300ms ease-in-out; }
    .pagination li.dots { margin: 0 4px 0 4px; }
    .pagination li.dots i { position: relative; top: 2px; }

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

    .section-title { padding: 40px 30px 50px 30px; border-top: 10px solid transparent; }
    .mod-rgba .section-title { border-bottom: 1px solid rgba(255,255,255,.05); }
    .section-title h2 { margin: 0; font-size: 2.25em; font-family: , serif; line-height: normal; }
    .section-title p { margin: 10px 0 0 0; font-size: 1.12em; line-height: 1.5em; }

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

    .tabs { position: relative; margin-top: 30px; z-index: 30; }
    .tabs .tab { display: block; position: relative; float: left; margin-left: 5px; padding: 8px 25px 8px 55px; font-size: 1.07em; border: 1px solid transparent; cursor: pointer;
        border-radius: 7px 7px 0 0; }
    .tabs .tab:first-child { margin-left: 0; }
    .tabs .tab span { font-family: 'Sintony', serif; font-size: 0.9em; }
    .tabs .tab i { position: absolute; top: 10px; left: 25px; font-size: 18px; }
    .tab-content { position: relative; top: -1px; z-index: 20; }
    .tab-content .item { display: none; padding: 20px; border: 1px solid transparent; border-radius: 0 7px 7px 7px; }
    .tab-content .item.active { display: block; }
    .tab-content .item .various-content { font-size: 0.9em; }

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

    /* THUMBNAIL */

    /* value of width in following declaration represents the relative width of thumbnails,
    add "100%" for full width thumbs or "50%" for half width thumbs */

    .thumbnail-grid li { width: 25%; -webkit-transform: translate3d(0,0,0); }
    .thumbnail-grid.big-thumbs li { width: 50%; }

    /* value of padding-bottom in following declaration represents the height of thumbnail
    add "100%" for square thumbnails, lower than 100 for wide thumbnails and higher than 100 for portrait thumbnails */

    .thumbnail-grid li .thumb { padding-bottom: 60%; -webkit-transform: translate3d(0,0,0); }

    .thumbnail-grid li { float: left; position: relative; }
    .thumbnail-grid li .thumb { position: relative; width: 100%; height: 0; overflow: hidden; }
    .thumbnail-grid li .thumb.video { background-position: center; background-repeat: no-repeat; }
    .thumbnail-grid li .thumb.video.loading .loading-anim { display: block; top: 50%; }
    .thumbnail-grid li .thumb.video .loading-anim span { top: -25px; }

    /* OVERLAY */

    .thumbnail-grid li .overlay { display: block; position: absolute; left: 0; top: 0; margin: 0; width: 100%; height: 100%; text-align: center; opacity: 0;
        -webkit-transform: translate3d(0,0,0);
        -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; }
    .thumbnail-grid li .overlay:hover { opacity: 1; }
    .thumbnail-grid li .overlay:active { opacity: .8; }
    .thumbnail-grid li .overlay span { display: block; position: absolute; left: 0; right: 0; bottom: -50px; margin: auto; padding: 20px; line-height: normal; font-weight: bold; text-align: center; opacity: 0;
        -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }
    .thumbnail-grid li .overlay:hover span { bottom: 0; opacity: 1; }
    .thumbnail-grid.big-thumbs li .overlay:hover span { bottom: 20px; font-size: 1.4em; }

    /* MORE */

    .thumbnail-grid li.more .overlay { display: none; font-family:  serif;  }
    .thumbnail-grid li.more .overlay.more { display: block;}
    .thumbnail-grid li.more .overlay { opacity: .8; z-index: 20; }
    .thumbnail-grid li.more .overlay:hover { opacity: 1; }
    .thumbnail-grid li.more .overlay:active { opacity: .8; }
    .thumbnail-grid li.more .overlay span { bottom: auto; top: 50%; padding: 0; font-size: 1.4em; font-weight: bold; opacity: 1; }
    .thumbnail-grid li.more .overlay span i { position: relative; top: 4px; font-size: 24px; font-weight: normal; }
    .thumbnail-grid li.more .overlay span strong { position: relative; height: 30px; line-height: 30px; top: -15px; }

    /* LOADING */

    .thumbnail-grid li.more.loading .overlay { opacity: 1; }
    .thumbnail-grid li.more.loading .overlay span { display: none; }
    .thumbnail-grid li.more.loading .loading-anim { display: block; top: 50%; z-index: 30; }
    .thumbnail-grid li.more.loading .loading-anim span { top: -25px; }


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

    5.) HEADER

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

header { padding: 46px 0 0px 0; }
#branding img { width: 450px; }

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

    #navbar { position: relative; z-index: 30; }
    .navbar-inner { height: 70px; }

    nav.main { padding: 0 20px; }
    nav.main > button { display: none; margin: 0 2px 0 2px; width: 50px; height: 50px; text-align: center; border-radius: 50%; }
    nav.main > ul { text-align: center; }
    nav.main > ul > li { display: inline-block; position: relative; }
    nav.main > ul > li > a { display: block; padding: 0 20px 0 20px; height: 70px; line-height: 70px;
        -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }
    nav.main > ul > li > a i { position: relative; top: 2px; margin-right: 5px; font-size: 18px; }
    nav.main > ul > li > a span { font: bold 1em  serif; text-transform: uppercase; }
    nav.main .arrow { display: block; position: absolute; left: 0; top: 70px; width: 100%; height: 0; line-height: 0; font-size: 0; text-align: center; z-index: 20; }
    nav.main .arrow i { display: inline-block; position: relative; bottom: 0; width: 0; height: 0; text-indent: -1000em; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top-width: 7px; border-top-style: solid;
        -webkit-transition: border-color 150ms ease-in-out; -moz-transition: border-color 150ms ease-in-out; -ms-transition: border-color 150ms ease-in-out; -o-transition: border-color 150ms ease-in-out; transition: border-color 150ms ease-in-out; }

    /* SUBMENU */
    nav.main > ul > li > ul { display: none; position: absolute; left: 0; top: 70px; padding: 10px 0 10px 0; text-align: left; z-index: 30; }
    nav.main > ul > li > ul li { position: relative; padding: 0 30px 0 30px; }
    nav.main > ul > li > ul > li > i { position: absolute; top: 12px; left: 10px; font-size: 12px; }
    nav.main > ul > li > ul .active a { font-weight: bold; }
    nav.main > ul > li > ul a { display: block; position: relative; left: 0; padding: 8px 0 8px 0; white-space: nowrap; border-style: solid; border-width: 1px 0 1px 0;
        -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }
    nav.main > ul > li > ul a:hover { left: 3px; }
    nav.main > ul > li > ul a:active { left: 6px; }
    nav.main > ul > li > ul li:first-child a { border-top: 0; }
    nav.main > ul > li > ul li:last-child a { border-bottom: 0; }


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

    6.) PAGE

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

#page-content { padding-bottom: 90px; }
#page-content.no-padding { padding-bottom: 0; }

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

    article { padding-top: 60px; }
    .article-footer { padding-top: 60px; }
    article > * { margin-top: 30px; }
    article > *:first-child { margin-top: 0; }
    article section { margin-top: 80px; }
    article section.minor { margin-top: 30px; }
    article section:first-child { margin: 0; }
    article h2 { margin: 60px 0 30px 0; padding-bottom: 10px; font: normal 1.7em/1.3em  sans-serif; border-bottom: 1px solid transparent; }
    article h2:first-child { margin-top: 0; }

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

    .article-tags li { display: inline-block; margin: 0 5px 10px 0; }
    .article-tags li a { display: block; padding: 8px 10px 8px 10px; font-size: .9em; text-decoration: none; border-radius: 5px;
        -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }

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

    .article-comments { margin-top: 60px; }


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

    7.) SECTIONS

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

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

    section.contact-form { padding: 60px 0; border-top: 10px solid transparent; }
    section.contact-form h2 { margin: 0; font: normal 1.8em/1.3em  sans-serif; border-bottom: 1px solid transparent; }
    section.contact-form h2 span { display: block; padding-bottom: 10px; border-bottom: 1px solid transparent; }
    section.contact-form form { margin-top: 30px; }
    section.contact-form form p { position: relative; margin: 30px 0 0 0; }
    section.contact-form form p .error-ico { position: absolute; bottom: 4px; right: 10px; font-size: 24px; }
    section.contact-form form p:first-child { margin: 0; }
    section.contact-form form p.alert { margin: 30px 0; border: 0; }
    section.contact-form label { display: block; margin-bottom: 10px; font: normal 0.9em/1.4em  sans-serif; text-transform: uppercase; }
    section.contact-form input,
    section.contact-form textarea,
    section.contact-form select { display: block; margin: 0; padding: 12px 18px; width: 100%; font-size: 14px; resize: none; border-radius: 4px; border: 0; }
    section.contact-form textarea { height: 258px; }
    section.contact-form select.error { padding-right: 45px; }

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

    section.featured-project { position: relative; border-top: 10px solid transparent; }
    section.featured-project .featured-project-inner { padding: 60px; }

    /* DESCRIPTION */

    section.featured-project .project-description > h2 { text-transform: uppercase; margin: 0; font: normal 2.14em/1.4em , sans-serif; border-bottom: 1px solid transparent; }
    section.featured-project .project-description > h2 > span { display: block; padding-bottom: 10px; border-bottom: 1px solid transparent; }
    section.featured-project .various-content { margin-top: 20px; }
    section.featured-project .various-content a:hover { text-decoration: underline; }

    /* IMAGES */

    section.featured-project .project-images { padding-top: 30px; text-align: center; }
    section.featured-project .project-images .slider { margin: 0; }
    section.featured-project .project-images .image { display: inline-block; position: relative; }
    section.featured-project .project-images .image .img { display: block; width: 270px; height: 270px; text-align: center; overflow: hidden; border: 7px solid transparent; }
    section.featured-project .project-images .image.rounded img { display: block; border-radius: 50%; }
    section.featured-project .project-images .image h3 { display: table; position: absolute; top: 0; right: -60px; margin: 0; width: 140px; height: 140px; line-height: 1.4em; text-align: center; border-radius: 50%; }
    section.featured-project .project-images .image h3 > span { display: table-cell; padding: 10px; vertical-align: middle; }
    section.featured-project .project-images .image h3 { font-size: 1.3em; }
    section.featured-project .project-images .image h3 em { font-weight: normal; font-size: 0.9em; }
    section.featured-project .slider-nav { position: absolute; bottom: 15px; right: 15px; }
    section.featured-project .slider-nav li { display: inline-block; }
    section.featured-project .slider-nav li button { display: block; width: 12px; height: 12px; border-radius: 50%; }

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

    section.features { border-top: 10px solid transparent; }
    section.features .features-inner { padding: 30px 60px; }
    section.features .feature { position: relative; padding: 30px 20px 30px 60px; }
    section.features .feature .ico { position: absolute; top: 22px; left: 0; width: 40px; height: 40px; text-align: center; border-radius: 50%; }
    section.features .feature .ico i { position: relative; top: 8px; font-size: 18px; }
    section.features .feature h3 { margin: 0; font: normal 1.3em/1.4em  sans-serif; }
    section.features .feature .various-content { margin-top: 10px; font-size: 0.9em; }

    /* -------------------------------------------------------------------------
        MAP
    ------------------------------------------------------------------------- */

    section.map iframe { width: 100%; height: 350px; }

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

    section.price-table .price-column { padding: 30px 0; border-radius: 10px; }
    section.price-table .price-column .ico { display: inline-block; position: static; left: auto; top: auto; margin-bottom: 15px; width: 60px; height: 60px; text-align: center; border-radius: 50%; }
    section.price-table .price-column .ico i { position: relative; top: 8px; font-size: 30px; }
    section.price-table .price-column h3 { margin: 0; font: normal 1.4em/1.3em  sans-serif; border: 1px solid transparent; border-left: 0; border-right: 0; }
    section.price-table .price-column h3 span { display: block; padding: 10px 0; border: 1px solid transparent; border-left: 0; border-right: 0; }
    section.price-table .price-column .price { margin: 0; padding: 20px 0; font-size: 0.8em; }
    section.price-table .price-column .price strong { font: normal 2.8em/1.4em  sans-serif; }
    section.price-table .price-column .price strong sup { font-size: 0.6em; }
    section.price-table .price-column ul { margin: 0 30px; border: 1px solid transparent; border-left: 0; border-right: 0; }
    section.price-table .price-column li { padding: 10px 0; font-size: 0.9em; border: 1px solid transparent; border-left: 0; border-right: 0; }
    section.price-table .price-column .cta { margin: 20px 0 0 0; }

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

    section.services { border-top: 10px solid transparent; }
    section.services .service-inner { position: relative; padding: 40px 60px; text-align: center; }
    section.services .icon { display: inline-block; position: static; left: auto; top: auto; margin-bottom: 15px; width: 60px; height: 60px; text-align: center; border-radius: 50%; }
    section.services .icon i { position: relative; top: 8px; font-size: 30px; }
    section.services h2 { margin: 0; font: normal 1.57em/1.8em  serif; }
    section.services .various-content { margin-top: 10px; }

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

    section.slider { position: relative; z-index: 20; }
    section.slider .slider-inner { position: relative; }
    section.slider .carousel { position: relative; margin: 0; z-index: 30; }

    /* ITEMS */

    section.slider .carousel-inner .item { height: 600px; background-position: center; background-size: cover; background-repeat: no-repeat; }
    section.slider .carousel-inner .item-inner { display: table; width: 100%; height: 100%; }
    section.slider .carousel-inner .item-content { display: table-cell; padding: 30px; vertical-align: middle; }
    section.slider .carousel-inner .item .title-bg,
    section.slider .carousel-inner .item .text-bg { display: inline-block; padding: 18px 30px;  }
    section.slider .carousel-inner .item .text-bg { margin-top: 10px; }
    section.slider .carousel-inner .item .text-bg > *:first-child { margin: 0; }
    section.slider .carousel-inner .item h2 { margin: 0; font: normal 2.14em/1.3em  sans-serif ; }
    section.slider .carousel-inner .item p { margin: 10px 0 0 0; font-size: 1.57em; line-height: 1.4em; }
    section.slider .carousel-inner .item p:first-child { margin-top: 0; }
    section.slider .carousel-inner .item p a { text-decoration: underline; }
    section.slider .carousel-inner .item p a:hover { text-decoration: none; }
    section.slider .carousel-inner .item .button { line-height: normal; font-size: 0.75em; text-decoration: none; }

    /* CONTROLS */

    section.slider .nav { display: block; position: absolute; top: 50%; width: 60px; height: 70px; z-index: 20; }
    section.slider .nav.prev { left: -50px; }
    section.slider .nav.next { right: -50px; }
    section.slider .nav button { display: block; position: relative; top: -35px; width: 60px; height: 70px; text-align: center; cursor: pointer;
        -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
    section.slider .nav.prev button { left: 0; }
    section.slider .nav.next button { right: 0; }
    section.slider .nav.prev button:hover { left: -4px; }
    section.slider .nav.prev button:active { left: -7px; }
    section.slider .nav.next button:hover { right: -4px; }
    section.slider .nav.next button:active { right: -7px; }
    section.slider .nav button i { display: block; position: relative; top: 0; font-size: 24px; }
    section.slider .nav.prev button i { left: -2px; }
    section.slider .nav.next button i { right: -2px; }

    /* LOADING */

    section.slider .loading-anim { display: block; position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; z-index: 50; }

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

    section.team .team-member { padding: 0 20px; text-align: center; }
    section.team .team-member .portrait { display: block; margin: auto; width: 150px; height: 150px; border: 7px solid transparent; }
    section.team .team-member > h3 { margin: 15px 0 0 0; font: normal 1.2em/1.4em sans-serif; }
    section.team .team-member > h4 { margin: 5px 0 0 0; font: normal 0.9em/1.4em , sans-serif; font-style: italic; }
    section.team .team-member .social { margin-top: 20px; padding: 5px 0; border: 1px solid transparent; border-left: 0; border-right: 0; }
    section.team .team-member .social li { display: inline-block; }
    section.team .team-member .social i { font-size: 24px;  }
    section.team .team-member .various-content { margin-top: 20px; font-size: 0.9em; }


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

    8.) TWITTER FEED

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

#twitter-feed { text-align: center; border-top-style: solid; border-top-width: 10px; }
#twitter-feed ul li { margin-top: 30px; }
#twitter-feed ul li:first-child { margin: 0; }
#twitter-feed { padding: 30px; }
#twitter-feed h3 { margin: 0; font-size: 1em; font-family:  serif; }
#twitter-feed .tweet { margin: 15px 0 0 0; font-size: 1.2em; font-style: italic; }
#twitter-feed .date { margin: 12px 0 0 0; font-size: 0.75em; }


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

    9.) WIDGETS

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

#widgets { border-top-style: solid; border-top-width: 1px; }
#widgets .widgets-inner { padding: 0 30px 0 30px; border-top-style: solid; border-top-width: 1px; }

#widgets .widget { margin: 30px 0 30px 0; }
#widgets .widget > h3 { position: relative; margin: 0; padding: 15px 0 14px 0; font-size: 1em; font-weight: normal; font-family:  serif; text-transform: uppercase; line-height: 1em;
    border-bottom: 1px solid transparent; }
#widgets .widget-content { padding: 20px 0 0 0; font-size: 0.9em; border-top: 1px solid transparent; }

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

    #widgets .text.widget.with-portrait { position: relative; padding-left: 125px; min-height: 110px; }
    #widgets .text.widget .portrait { position: absolute; left: 0; top: 0; width: 100px; height: 100px; }
    #widgets .text.widget .portrait { border-style: solid; border-width: 7px; }
    #widgets .text.widget .various-content p { margin-top: 20px; }
    #widgets .text.widget .various-content p:first-child { margin-top: 0; }
    #widgets .text.widget ul { font-size: 0.9em; }
    #widgets .text.widget li { margin: 8px 0 8px 0; }
    #widgets .text.widget li .ico { position: relative; top: 1px; margin-right: 5px; font-size: 10px; }

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

    #widgets .tags.widget li { display: inline-block; margin: 0 3px 7px 0; font-size: 0.95em; border-radius: 3px; }
    #widgets .tags.widget a { display: block; padding: 6px 8px 6px 8px; font-size: .9em; text-decoration: none; border-radius: 5px;
        -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }
    #widgets .tags.widget a { padding-top: 5px; }

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

    #widgets .images.widget .widget-content { position: relative; }
    #widgets .images.widget.loading .widget-content { min-height: 50px; }
    #widgets .images.widget.loading .loading-anim { display: block; left: 0; top: 20px; }
    #widgets .images.widget.loading .feed { display: none; }
    #widgets .widget.images .image-list { border: 7px solid transparent; }
    #widgets .widget .image-list li { float: left; width: 25%; -webkit-transform: translate3d(0,0,0); }
    #widgets .widget .image-list li a { display: block; position: relative; overflow: hidden; padding-bottom: 100%; width: 100%; height: 0; background-position: center; background-repeat: no-repeat; background-size: cover;
        -webkit-transform: translate3d(0,0,0);
        -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; }
    #widgets .widget .image-list li a:hover { opacity: .8; }
    #widgets .widget .image-list li img { position: absolute; display: block; top: 100%; left: 100%; }
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        #widgets .widget .image-list li a.landscape { background-size: auto 100%; }
        #widgets .widget .image-list li a.portrait { background-size: 100% auto; }
    }


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

    10.) FOOTER

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

footer { border-style: solid; border-width: 1px 0 0 0; }
.footer-inner { padding: 15px 0 15px 0; border-style: solid; border-width: 1px 0 0 0; }

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

    footer .copyright p { margin: 0; padding-left: 30px; height: 30px; line-height: 30px; font-size: 0.85em; }

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

    footer .social-links ul { float: right; padding-right: 30px; text-align: right; }
    footer .social-links li { display: block; margin-left: 5px; float: left; }
    footer .social-links li a { display: block; width: 30px; height: 30px; border-radius: 50%;
        -webkit-transition: background-color 300ms ease-in-out; -moz-transition: background-color 300ms ease-in-out; -ms-transition: background-color 300ms ease-in-out; -o-transition: background-color 300ms ease-in-out; transition: background-color 300ms ease-in-out; }
    footer .social-links li i { display: block; width: 30px; height: 30px; }
    footer .social-links li.facebook i { background-position: -30px 0; }
    footer .social-links li.behance i { background-position: -60px 0; }
    footer .social-links li.linkedin i { background-position: -90px 0; }
    footer .social-links li.dribbble i { background-position: -120px 0; }
    footer .social-links li.devintart i { background-position: -150px 0; }
    footer .social-links li.googleplus i { background-position: -180px 0; }
    footer .social-links li.pinterest i { background-position: -210px 0; }
    footer .social-links li.vimeo i { background-position: -240px 0; }
    footer .social-links li.youtube i { background-position: -270px 0; }
    footer .social-links li.flickr i { background-position: -300px 0; }


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

    11.) BACK TO TOP

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

#back-to-top { display: none; position: fixed; bottom: 30px; right: 20px; width: 50px; height: 50px; z-index: 100; }
#back-to-top a { display: block; width: 50px; height: 50px; border-radius: 50%; text-align: center;
    -webkit-transition: background-color 300ms ease-in-out; -moz-transition: background-color 300ms ease-in-out; -ms-transition: background-color 300ms ease-in-out; -o-transition: background-color 300ms ease-in-out; transition: background-color 300ms ease-in-out; }
#back-to-top a i { position: relative; top: 8px; font-size: 24px;
    -webkit-transition: top 300ms ease-in-out; -moz-transition: top 300ms ease-in-out; -ms-transition: top 300ms ease-in-out; -o-transition: top 300ms ease-in-out; transition: top 300ms ease-in-out; }
#back-to-top a:active i { top: 5px; }


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

    12.) VARIOUS

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

.lightbox { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }
ul.glyphicons li { float: left; width: 25%; }
ul.glyphicons li i { position: relative; top: 4px; margin-right: 4px; }
ul.glyphicons li .info { display: inline-block; padding: 10px 0; font-size: 0.8em; }


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

    13.) RESPONSIVE

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

#screen-width,
#screen-width span:before { content: "1200"; }

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

    @media (max-width: 1300px) {

    /* SECTIONS */

    /* slider */
    section.slider .nav { top: auto; bottom: 20px; width: 50px; height: 50px; z-index: 40; }
    section.slider .nav.prev { left: auto; right: 80px; }
    section.slider .nav.next { right: 20px; }
    section.slider .nav button { top: 0; width: 50px; height: 50px; border-radius: 7px;
        -webkit-transition: background-color 300ms ease-in-out; -moz-transition: background-color 300ms ease-in-out; -ms-transition: background-color 300ms ease-in-out; -o-transition: background-color 300ms ease-in-out; transition: background-color 300ms ease-in-out; }
    section.slider .nav.prev button { text-align: center; }
    section.slider .nav.prev button:hover { left: 0; }
    section.slider .nav.prev button:active { left: 0; }
    section.slider .nav.next button:hover { right: 0; }
    section.slider .nav.next button:active { right: 0; }
    section.slider .nav button i { position: relative; display: inline-block; top: auto; left: auto;
        -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }
    section.slider .nav.prev button i { left: 0; }
    section.slider .nav.prev button:active i { left: -2px; }
    section.slider .nav.next button i { right: 0; }
    section.slider .nav.next button:active i { right: -2px; }

    }

    @media (max-width: 1199px) {

    /* SECTIONS */

    /*  featured project */
    section.featured-project-inner { padding: 30px 30px; }
    section.featured-project .project-images .image { padding-bottom: 40px; }
    section.featured-project .project-images .image h3 { display: block; left: 0; top: auto; bottom: 0; width: 100%; height: auto; text-align: center; border-radius: 0; }
    section.featured-project .project-images .image h3 > span { display: block; padding: 0; }
    /* features */
    section.features .features-inner { padding: 10px 30px; }
    /*  services */
    section.services .service-inner { padding: 40px 30px; }

    /* VARIOUS */

    ul.glyphicons li { float: left; width: 33%; }

    /* SCREEN WIDTH */

    #screen-width,
    #screen-width span:before { content: "1199"; }

    }

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

    @media (max-width: 979px) {

    /* COMPONENTS */

    /* page title */
    .page-title { padding-left: 30px; padding-right: 30px; }
    /* tabs */
    .tabs .tab { padding: 8px 20px 6px 20px; }
    .tabs .tab span { display: none; }
    .tabs .tab i { position: relative; top: auto; left: auto; }
    /* thumbnail grid */
    .thumbnail-grid li { width: 50%; }

    /* HEADER */

    .navbar-inner { height: auto; }
    nav.main { padding: 20px; text-align: center; }
    nav.main > button { display: inline-block; }
    nav.main > button i { font-size: 20px; }
    nav.main > ul { display: none; margin-top: 20px; text-align: left; }
    nav.main > ul > li { display: block; float: none; }
    nav.main > ul > li > a { padding: 0 15px 0 15px; height: 50px; line-height: 50px; border-bottom: 0; border-top-style: solid; border-top-width: 1px; }
    nav.main > ul > li > a .ico { top: 3px; }
    nav.main > ul > li:first-child > a { border: 0; }
    nav.main .arrow { display: block; width: 50px; height: 50px; line-height: normal; top: 0; left: auto; right: 0; cursor: pointer;
        transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0);
        -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; }
    nav.main .arrow i { width: 50px; height: 50px; line-height: 52px; font-size: 24px; text-indent: 0; border: 0; }
    nav.main .arrow.active { transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); }
    nav.main > ul > li > ul { position: relative; top: auto; left: auto; padding: 0 0 10px 0; }
    nav.main > ul > li > ul > li > i { display: none;  }
    nav.main > ul > li > ul li { padding: 0 0 0 40px; }
    nav.main > ul > li > ul li a { padding: 15px 0 15px 0; border-bottom: 0; }

    /* SECTIONS */

    /* featured project */
    section.featured-project .featured-project-inner { padding: 40px 30px; }
    section.featured-project .row-fluid { margin: 0; }
    section.featured-project .row-fluid > div { float: none; margin: 0; width: auto; }
    section.featured-project .project-images { position: relative; padding-bottom: 60px; }
    section.featured-project .slider-nav { width: 100%; left: 0; right: auto; bottom: 0; text-align: center; }
    section.featured-project .slider-nav li { margin: 0 2px; }
    section.featured-project .slider-nav li button { width: 30px; height: 30px; }
    /*  services */
    section.services .service-inner { padding: 40px 20px; }
    /* slider */
    section.slider .slide-image h2 { position: relative; top: auto; right: auto; margin: 0 auto 10px auto; }

    /* WIDGETS */

    #widgets .widgets-inner .row-fluid > div { float: none; margin: 0; width: auto; }
    #widgets .images.widget.loading .widget-content { min-height: 80px; }

    /* VARIOUS */

    ul.glyphicons li { float: left; width: 50%; }

    /* SCREEN WIDTH */

    #screen-width,
    #screen-width span:before { content: "979"; }

    }

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

    @media (max-width: 767px) {

    /* GENERAL */

    body { padding-left: 0; padding-right: 0; }

    /* COMPONENTS */

    /* thumbnail grid */
    .thumbnail-grid.big-thumbs li .overlay span { bottom: 0; font-size: 1em; }

    /* PAGE */

    article { padding-left: 30px; padding-right: 30px; }
    article .row-fluid > * { margin-top: 30px; }
    article .row-fluid > *:first-child { margin-top: 0; }
    .article-footer { padding-left: 30px; padding-right: 30px; }

    /* SECTIONS */

    /* contact form */
    section.contact-form { padding-left: 30px; padding-right: 30px; }
    section.contact-form .row-fluid > * { margin-top: 30px; }
    section.contact-form .row-fluid > *:first-child { margin-top: 0; }
    /* slider */
    section.slider .slides { height: 460px; }
    section.slider .slide .row > div { position: static; height: auto; }

    /* WIDGETS */

    #widgets .text.widget.with-portrait { padding: 0; }
    #widgets .text.widget .portrait { display: block; position: static; top: auto; left: auto; margin: 0 auto 30px auto; }

    /* FOOTER */

    footer .copyright p { padding: 0 30px 0 30px; text-align: center; }
    footer .social-links ul { float: none; padding: 10px 30px 0 30px; text-align: center; }
    footer .social-links ul li { display: inline-block; float: none; margin: 0 1px 0 1px; }

    /* VARIOUS */

    ul.glyphicons li { float: left; width: 50%; }

    /* SCREEN WIDTH */

    #screen-width,
    #screen-width span:before { content: "767"; }

    }

    /* -------------------------------------------------------------------------
        PHONE
    ------------------------------------------------------------------------- */

    @media (max-width: 480px) {

    /* SECTIONS */

    /* featured-project */
    section.featured-project .project-images .image { padding-bottom: 60px; }
    section.featured-project .project-images .image .img { width: 200px; height: 200px; }
    /* slider */
    section.slider .carousel-inner .item { height: 700px; }
    section.slider .carousel-inner .item-content { padding: 20px; }

    /* PAGINATION */

    .pagination li a { width: 30px; height: 30px; line-height: 30px; font-size: 0.95em; }

    /* VARIOUS */

    ul.glyphicons li { float: left; width: 100%; }

    /* SCREEN WIDTH */

    #screen-width,
    #screen-width span:before { content: "480"; }

    }