/**
 * Theme Name: motion
 
 * Version: 1.03

 */


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

    TABLE OF CONTENT

    1.) General
    2.) Typography
    3.) Components
    4.) Header
    5.) St Slider
    6.) Homepage
    7.) Page Types
    8.) Sidebar
    9.) Twitter Feed
    10.) Bottom
    11.) Footer
    12.) Responsive
    13.) Style Switcher

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

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

    1.) GENERAL
    Some general definitions and resets.

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

body { margin: 0; font: 14px Arial, sans-serif; font-weight: 300;}
    /* -------------------------------------------------------------------------
        RESET
    ------------------------------------------------------------------------- */

    ::-moz-focus-inner { border: 0; padding: 0; }
    a { text-decoration: none;
        -webkit-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -moz-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -ms-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -o-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; transition: color 300ms ease-in-out, background-color 300ms ease-in-out; }
    a img { border: 0; }
    button { padding: 0; border: 0; font-family: Arial, sans-serif; background: transparent; cursor: pointer;
        -webkit-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -moz-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -ms-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -o-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; transition: color 300ms ease-in-out, background-color 300ms ease-in-out; }
    h1,h2,h3,h4,h5,h6 { margin: 0; }
    iframe { border: 0; }
    .thumb img, .article-image img, .project-images img { max-width: 100%; }   
    input, textarea { font-family: Tahoma, sans-serif; outline: 0; }
    ol, ul, li { margin: 0; padding: 0; list-style-type: none; }
    p { margin: 30px 0 0 0; line-height: 1.5em; }
    var { display: none; }

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

    .float-right { float: right; }
    .alignleft { text-align: left; }
    .alignright { text-align: right; }
    .aligncenter { text-align: center; }
    .rounded { border-radius: 50%;}
    .rounded-10 { border-radius: 10px;}
    .wp-caption { text-align: center; }
    .wp-caption-text { text-align: center; }
    .gallery-caption { text-align: center; }

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

    2.) TYPOGRAPHY

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

.various-content > * { margin-top: 30px; }
.various-content > no-top-margin,
.various-content > *:first-child { margin-top: 0; }
.various-content .row > * > *,
.various-content .row-fluid > div > * { margin-top: 30px; }
.various-content .row > * > .no-top-margin,
.various-content .row-fluid > div > .no-top-margin,
.various-content .row > * > *:first-child,
.various-content .row-fluid > * > *:first-child { margin-top: 0; }
section > * { margin-top: 30px; }
section > no-top-margin,
section > *:first-child { margin-top: 0; }

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

    .various-content h1 { margin: 40px 0 0 0; font-size: 2.28em; font-weight: normal; }
    .various-content h2 { margin: 40px 0 0 0; font-size: 1.78em; font-weight: normal; }
    .various-content h3 { margin: 30px 0 0 0; font-size: 1.07em; font-weight: bold; }
    .various-content h4 { margin: 30px 0 0 0; font-size: 1.07em; font-weight: normal; }
    .various-content h5 { margin: 30px 0 0 0; font-size: 1em; font-weight: bold; }
    .various-content h6 { margin: 30px 0 0 0; font-size: 1em; font-weight: normal; }

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

    .various-content p { margin: 30px 0 0 0; line-height: 1.8em; }
    .various-content p.lead { font-size: 1.35em; line-height: 1.6em; }
    .various-content section { margin: 80px 0 0 0; }
    .various-content section.minor { margin: 60px 0 0 0; }

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

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

    .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; }

    .various-content ol ol,
    .various-content ol ul,
    .various-content ul.default-list ul,
    .various-content ul.default-list ol { margin-bottom: 30px; padding-left: 30px; }

    /* -------------------------------------------------------------------------
        DEFAULT FORM
    ------------------------------------------------------------------------- */

    .default-form #submit { display: inline-block; padding: 14px 22px 13px 22px; width: auto; cursor: pointer; font-weight: bold; text-transform: uppercase; font-size: 15px; border-radius: 4px;
        -webkit-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -moz-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -ms-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -o-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; transition: color 300ms ease-in-out, background-color 300ms ease-in-out; }

    /* -------------------------------------------------------------------------
        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: 1px solid transparent; }


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

    3.) COMPONENTS

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

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

    .accordion { margin-top: 30px; }
    .accordion .accordion-item { margin-top: 10px; border: 1px solid transparent;
        -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; }
    .accordion .accordion-toggle { position: relative; margin: 0; padding: 14px 20px 14px 55px; font-size: 1.07em; cursor: pointer; }
    .accordion .accordion-toggle i { position: absolute; top: 16px; left: 22px; margin-right: 15px; font-size: 15px; }
    .accordion .accordion-content { display: none; padding: 0 20px 14px 55px; }
    .accordion .active .accordion-content { display: block; }
    .accordion .accordion-item.opened,
    .accordion .accordion-item.active { background: none; }

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

    p.alert { position: relative; margin: 30px 0 0 0; padding: 16px 20px 15px 55px; border: 1px solid transparent; }
    p.alert .ico { position: absolute; top: 14px; left: 22px; font-size: 24px; }

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

    .button-pagination { position: relative; margin-top: 60px; min-height: 40px; text-align: center; }
    .button-pagination p.status { position: absolute; left: 0; top: 7px; margin: 0; font-size: 1.1em; }
    .button-pagination a { display: inline-block; position: relative; padding: 10px 20px 9px 40px; border-radius: 4px;
        -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; }
    .button-pagination a .loading-anim { display: none; left: 6px; top: 3px; width: 30px; height: 30px; }
    .button-pagination a .loading-anim span { background: none; }
    .button-pagination a .ico { position: absolute; top: 12px; left: 15px; font-size: 15px; }

    /* LOADING */

    .button-pagination a.loading .loading-anim { display: block; }
    .button-pagination a.loading .ico { display: none; }

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

    .button { display: inline-block; padding: 14px 22px 13px 22px; text-decoration: none; font-size: 1.1em; font-weight: bold; border-radius: 4px; }
    .button i { position: relative; margin-right: 12px; }
    .button.wide { padding: 14px 45px 13px 45px; }

    /* -------------------------------------------------------------------------
        CTA MESSAGE
    ------------------------------------------------------------------------- */

    .cta-message { margin-top: 30px; padding: 30px; border-radius: 4px; }
    .cta-message h2 { margin: 0; font-weight: normal; font-size: 1.6em; }
    .cta-message p { margin: 5px 0 0 0; font-size: 1.1em; }
    .cta-message .button { float: right; text-align: center; }

    /* -------------------------------------------------------------------------
        DIVIDER
    ------------------------------------------------------------------------- */

    hr.divider { margin-bottom: 0; padding: 0; border: 0; border-top: 1px solid transparent }

    /* -------------------------------------------------------------------------
        DEFINITION LIST
    ------------------------------------------------------------------------- */

    dl.custom { margin: 25px 0 0 0; font-size: 1.05em; }
    dl.custom dt { display: block; position: absolute; padding-top: 5px; width: 120px; }
    dl.custom dt .ico { top: 7px; margin-right: 15px; font-size: 18px; }
    dl.custom dd { position: relative; margin: 0; padding: 5px 0 5px 135px; line-height: 1.8em; }

    /* -------------------------------------------------------------------------
        FEATURE
    ------------------------------------------------------------------------- */

    .feature { position: relative; padding: 10px 0 0 60px; }
    .feature .ico { display: block; position: absolute; top: 0; left: 0; width: 46px; height: 46px; text-align: center; border-radius: 5px; }
    .feature .ico i { position: relative; top: 13px; font-size: 19px;  }
    .feature h3 { margin: 0 0 10px; font-weight: normal; font-size: 1.4em; }

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

    .list-slider { position: relative; }
    .list-slider-items { height: auto;
        -webkit-transition: height 300ms ease-in-out; -moz-transition: height 300ms ease-in-out; -ms-transition: height 300ms ease-in-out; -o-transition: height 300ms ease-in-out; transition: height 300ms ease-in-out; }
    .list-slider-items > ul { position: relative; top: 0; left: 0;
        -webkit-transition: left 300ms ease-in-out; -moz-transition: left 300ms ease-in-out; -ms-transition: left 300ms ease-in-out; -o-transition: left 300ms ease-in-out; transition: left 300ms ease-in-out; }
    .list-slider-items > ul > li { display: block; float: left; }
    .list-slider-items > ul > li > * { float: none; }

    /* NAV */

    .list-slider-nav { position: absolute; right: 0; top: -100px; }
    .list-slider-nav button { display: block; position: relative; float: left; width: 28px; height: 28px; text-align: center; }
    .list-slider-nav button.prev { margin-right: 5px; }
    .list-slider-nav button i { position: relative; left: 0; font-size: 22px;
        -webkit-transition: left 300ms ease-in-out; -moz-transition: left 300ms ease-in-out; -ms-transition: left 300ms ease-in-out; -o-transition: left 300ms ease-in-out; transition: left 300ms ease-in-out; }
    .list-slider-nav button.prev:active i { left: -5px; }
    .list-slider-nav button.next:active i { left: 3px; }
    .list-slider-nav button.disabled { cursor: default; }
    .list-slider-nav button.disabled:active i { left: -1px; }
    .list-slider.all-visible .list-slider-nav { display: none; }

    /* -------------------------------------------------------------------------
        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; line-height: 30px; font-size: 30px; text-align: center;
        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;
    }

    /* SMALL */

    .loading-anim.small span { width: 30px; height: 30px; }
    .loading-anim.small span i { left: 0; top: 0; font-size: 22px; }

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

    .embed-map iframe { display: block; margin: 0; width: 100%; border: 0; }

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

    .pagination { margin-top: 90px; text-align: right; }
    .pagination li { display: inline-block; margin: 10px 5px 0 0; font-size: 1.07em; }
    .pagination li a,
    .pagination li span { display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-weight: bold; border-radius: 4px; }
    .pagination li i { position: relative; top: 1px; font-size: 18px; }

    /* -------------------------------------------------------------------------
        PROGRESS BARS
    ------------------------------------------------------------------------- */

    .progressbar { font-weight: bold; }
    .progressbar .inner { position: relative; padding: 18px 20px 17px 20px; width: 10px; white-space: nowrap;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
        -webkit-transition: width 600ms ease-in-out; -moz-transition: width 600ms ease-in-out; -ms-transition: width 600ms ease-in-out; -o-transition: width 600ms ease-in-out; transition: width 600ms ease-in-out; }
    .progressbar .inner .percentage { position: absolute; top: 18px; right: 20px; }

    /* -------------------------------------------------------------------------
        PROJECT PREVIEW
    ------------------------------------------------------------------------- */

    .project-preview { border-bottom: 1px solid transparent; }
    .project-preview .thumb { position: relative; width: 100%; }
    .project-preview .thumb.cropped { padding-bottom: 65%; height: 0; overflow: hidden; }
    .project-preview .thumb .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: #000; background: rgba(0,0,0,.8);
        -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; }
    .project-preview .thumb .overlay-inner { position: absolute; width: 100%; height: 40px; top: 50%; text-align: center; }
    .project-preview .thumb .overlay a { position: relative; top: 200px; display: inline-block; margin: 0 2px 0 2px; width: 40px; height: 40px; text-align: center; border-radius: 4px; 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; }
    .project-preview .thumb .overlay a i { position: relative; top: 11px; font-size: 18px; }
    .project-preview .thumb .overlay i { position: relative; top: -16px; font-size: 40px; }

    .project-preview .thumb.hover .overlay { opacity: 1; }
    .project-preview .thumb.hover .overlay a { top: -20px; opacity: 1; }
    .project-preview .thumb.hover .overlay a:hover { top: -16px; }
    .project-preview .thumb.hover .overlay a:active { top: -13px; }
    .project-preview .thumb.hover .overlay a.link { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; }
    .project-preview .thumb img { display: block; }
    .project-preview .title { height:46px;position: relative; padding: 24px 0 20px 0; }
    .project-preview h3 { margin: 0; font-size: 1.2em; text-transform: uppercase; }
    .project-preview .date { position: absolute; top: 28px; right: 0; margin: 0; font-size: 0.8em; }

    /* -------------------------------------------------------------------------
        RECENT PROJECTS
    ------------------------------------------------------------------------- */

    .recent-projects.no-title { padding-top: 40px; }
    .recent-projects.no-nav { padding-top: 0; }
    .recent-projects .projects { margin-top: 60px; }
    .recent-projects.no-nav.no-title .projects { margin-top: 0; }
    .recent-projects .section-title { padding-right: 150px; }

    /* -------------------------------------------------------------------------
        SEARCH FORM
    ------------------------------------------------------------------------- */

    .search-form form { max-width: 540px; margin: auto; }
    .search-form form > div { position: relative; height: 48px; border-radius: 4px; border: 1px solid transparent; }
    .search-form form label { display: none; }
    .search-form form input#s { margin: 0; padding: 15px 50px 0 20px; width: 100%; font-size: 16px; background: transparent; border: 0;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    .search-form form button { display: block; position: absolute; top: 0; right: 0; width: 48px; height: 48px; border-radius: 4px; }
    .search-form form button i { font-size: 18px; opacity: 1;
        -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; }
    .search-form form button:active i { opacity: .8; }

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

    .section-title,
    .various-content .section-title { margin-bottom: 60px; font-weight: normal; font-size: 2.4em; }
    .various-content .section-title strong,
    .section-title strong { display: block; font-weight: bold; font-size: 0.45em; }

    /* -------------------------------------------------------------------------
        SERVICE
    ------------------------------------------------------------------------- */

    .service { padding: 40px 30px; border-radius: 4px; border: 1px solid transparent; }
    .service .ico { display: inline-block; margin-bottom: 40px; width: 60px; height: 60px; text-align: center; border-radius: 4px; }
    .service .ico i { position: relative; top: 16px; font-size: 25px; }
    .service h2 { margin: 0; font-weight: normal; font-size: 1.4em; }
    .service .various-content { margin-top: 16px; }
    .service .various-content p { line-height: 1.8em; }
    .service .btn { margin: 0; }

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

    .tabs { position: relative; margin-top: 30px; z-index: 30; }
    .tabs .tab { display: block; position: relative; float: left; padding: 22px 25px 22px 55px; font-size: 1.07em; font-weight: bold; border: 1px solid transparent; border-left-width: 0; cursor: pointer; }
    .tabs .tab.active { background: none; }
    .tabs .tab:first-child { border-left-width: 1px; }
    .tabs .tab i { position: absolute; top: 24px; left: 25px; font-size: 15px; }
    .tab-content { position: relative; top: -1px; z-index: 20; }
    .tab-content .item { display: none; padding: 20px; border: 1px solid transparent; }
    .tab-content .item.active { display: block; }

    /* -------------------------------------------------------------------------
        VIDEO PLAYER
    ------------------------------------------------------------------------- */

    .mejs-video { margin: auto; }
    .mejs-controls .mejs-button button:focus { outline: 0; }

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

    4.) HEADER

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

header { position: relative; z-index: 50; }

    /* -------------------------------------------------------------------------
        LANGBAR
    ------------------------------------------------------------------------- */

    #langbar { padding: 8px 20px 6px 20px; }
    #langbar ul { float: right; }
    #langbar li { margin-left: 20px; float: left; line-height: 12px; font-size: 0.8em; text-transform: uppercase; }
    #langbar li:first-child { margin: 0; }
    #langbar li a:hover .lang-code { text-decoration: underline; }
    #langbar li span { display: inline-block; }
    #langbar li img { display: block; }
    #langbar li .lang-code { position: relative; top: -2px; padding-left: 2px; }

    /* -------------------------------------------------------------------------
        TOPBAR
    ------------------------------------------------------------------------- */

    #topbar { padding: 15px 0 15px 0; }
    .topbar-inner { position: relative; height: 42px; }

    /* SOCIAL ICONS */

    #topbar .social-icons ul { float: left; position: relative; z-index: 30; }
    #topbar .social-icons li { display: block; float: left; margin-right: 10px; }
    #topbar .social-icons li a { display: block; width: 42px; height: 42px; text-align: center; }
    #topbar .social-icons li a i { position: relative; top: 13px; opacity: 1; font-size: 14px;
        -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; }
    #topbar .social-icons li a:active i { opacity: .7; }

    /* SEARCH */

    #topbar .top-search-form { position: absolute; top: 0; right: 0; width: 100%; height: 42px; z-index: 20; }
    #topbar .top-search-form .input { display: none; position: absolute; left: 0; width: 100%; height: 42px; z-index: 20; }
    #topbar .top-search-form .input .close { display: block; position: absolute; top: 0; left: 0; width: 42px; height: 42px; line-height: 42px; font-size: 18px; z-index: 30; text-align: center; cursor: pointer; }
    #topbar .top-search-form .input input { position: absolute; padding: 9px 0 0 70px; width: 70%; font-size: 19px; background: none; border: 0; z-index: 20; }
    #topbar .top-search-form button.submit { position: absolute; top: 0; right: 0; width: 42px; height: 42px; font-size: 18px; z-index: 30; }
    #topbar .top-search-form button.submit .ico2 { display: none; }
    #topbar .top-search-form button i,
    #topbar .top-search-form .close i { opacity: 1;
        -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; }
    #topbar .top-search-form button:active i { opacity: .7; }
    #topbar .top-search-form.active { z-index: 30; }

    /* RESPONSIVE CONTROLS */

    .responsive-controls { display: none; }
    .responsive-controls button,
    .responsive-controls .close { display: block; position: relative; width: 60px; height: 60px; z-index: 40; }
    .responsive-controls button i,
    .responsive-controls .close i { font-size: 24px; }

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

    .navbar-inner { position: relative; min-height: 120px; }

    /* BRANDING */

    #branding { display: block; position: absolute; left: 0; }
    #branding img { display: block; max-width: 300px; }

    /* MAIN NAV */

    nav.main { position: relative; float: right; }
    nav.main > button { display: none; float: right; width: 60px; height: 60px; }
    nav.main > button i { font-size: 24px; }
    nav.main .indicator { display: none; position: absolute; left: 0; bottom: 0; width: 0; height: 6px; line-height: 0; font-size: 0; background: #ff004e; z-index: 20;
        -webkit-transition: left 300ms ease-in-out, width 300ms ease-in-out; -moz-transition: left 300ms ease-in-out, width 300ms ease-in-out; -ms-transition: left 300ms ease-in-out, width 300ms ease-in-out; -o-transition: left 300ms ease-in-out, width 300ms ease-in-out; transition: left 300ms ease-in-out, width 300ms ease-in-out; }
    nav.main .indicator.active { display: block; }
    /* lvl 1 */
    nav.main > ul { position: relative; z-index: 30; }
    nav.main > ul > li { float: left; position: relative; margin-top: 60px; }
    nav.main > ul > li > a { display: block; position: relative; padding: 0 27px 46px 27px; font-size: 1.2em; font-weight: 300; z-index: 30; }
    nav.main > ul > li.last > a { padding-right: 0; }
    nav.main > ul > li > a span { display: block; font-size: 0.85em; font-weight: 300; } /* description  */
    nav.main > ul > li > .arrow { display: block; position: absolute; left: -4px; top: 0; width: 14px; height: 14px; z-index: 20; }
    nav.main > ul > li > .arrow i { font-size: 20px; }
    /* lvl 2 */
    nav.main > ul > li > ul { display: none; position: absolute; left: 27px; }
    nav.main > ul > li > ul > li { position: relative; border-top: 1px solid transparent; }
    nav.main > ul > li > ul > li:first-child { border: 0; }
    nav.main > ul > li > ul a { display: block; padding: 15px 17px; width: 180px;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    @media (max-width: 1400px) {
        nav.main > ul > li.last > ul { left: auto; right: 0; }
    }
    /* lvl 3 */
    nav.main > ul ul ul { display: none; position: absolute; top: 0; left: 100%; }
    nav.main > ul ul ul > li { position: relative; border-top: 1px solid transparent; }
    nav.main > ul ul ul > li:first-child { border: 0; }
    @media (max-width: 1600px) {
        nav.main > ul > li.penultimate ul ul { display: none; position: absolute; top: 0; left: auto; right: 100%; }
    }
    @media (max-width: 1800px) {
        nav.main > ul > li.last ul ul { display: none; position: absolute; top: 0; left: auto; right: 100%; }
    }

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

    5.) ST SLIDER

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

.st-slider { position: relative; }
.st-slider .slider-inner { position: relative; }
.st-slider .carousel { margin: 0; }

    /* -------------------------------------------------------------------------
        ITEMS
    ------------------------------------------------------------------------- */

    .st-slider .carousel-inner .item { background-position: center; background-size: cover; background-repeat: no-repeat; }
    .st-slider .carousel-inner .item-inner { display: table; width: 100%; height: 100%; }
    .st-slider .carousel-inner .item-content { display: table-cell; }
    .st-slider .carousel-inner .h-centered .item-content { text-align: center; }
    .st-slider .carousel-inner .v-centered .item-content { vertical-align: middle; }
    .st-slider .carousel-inner .item h2 { margin: 40px 0; line-height: 1.5em; font-size: 3.2em; font-weight: normal; }
    .st-slider .carousel-inner .item p { margin: 40px 0 0 0; font-size: 1.4em; }
    .st-slider .carousel-inner .item p:first-child { margin-top: 0; }
    .st-slider .carousel-inner .item .button { margin: 10px 10px; line-height: normal; font-weight: normal; text-decoration: none; }
    .st-slider .carousel-inner .item p .button { font-size: 0.75em; }

    /* -------------------------------------------------------------------------
        CONTROLS
    ------------------------------------------------------------------------- */

    .st-slider .nav { position: absolute; top: 50%; }
    .st-slider .nav button { display: block; position: relative; top: -23px; width: 46px; height: 46px; border-radius: 4px; text-align: center; }
    .st-slider .nav button i { display: block; position: relative; left: 0; font-size: 24px;
        -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; }
    .st-slider .nav.prev { left: 20px; }
    .st-slider .nav.prev button:active i { left: -3px; }
    .st-slider .nav.next { right: 20px; }
    .st-slider .nav.next button:active i { left: 3px; }
    .st-slider button.pause { display: block; position: absolute; bottom: 25px; right: 20px; width: 46px; height: 46px; border-radius: 4px; }

    /* -------------------------------------------------------------------------
        INDICATOR
    ------------------------------------------------------------------------- */

    .st-slider .indicator { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; font-size: 0; line-height: 0; background: rgba(0,0,0,.3); }
    .st-slider .indicator .progressbar { height: 6px; width: 0; }

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

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


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

    6.) HOMEPAGE

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

    /* -------------------------------------------------------------------------
        HEADING SECTION
    ------------------------------------------------------------------------- */

    .heading-section .heading-section-inner { padding: 80px 20px; }
    .heading-section h1 { margin: 0; font-size: 1.85em; font-weight: normal; line-height: 1.5em; }
    .heading-section strong { font-weight: normal; }
    .heading-section a { text-decoration: underline; }

    /* -------------------------------------------------------------------------
        FULLSIZE SECTION
    ------------------------------------------------------------------------- */

    .fullsize-section-inner { padding: 80px 0; }
    .fullsize-section-inner > * { margin-top: 80px; }
    .fullsize-section-inner > *:first-child { margin-top: 0; }

    /* -------------------------------------------------------------------------
        HOME SERVICES SECTION
    ------------------------------------------------------------------------- */

    .home-services-section-inner { padding: 30px 0 40px 0; }
    .home-services-section .service { padding: 30px 20px 25px 20px; text-align: center; border-radius: 4px; border: 0;
        -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; }
    .home-services-section .ico { display: block; margin: 0 auto 20px auto; width: 62px; height: 62px; border-radius: 50%; }
    .home-services-section .ico i { position: relative; top: 17px; font-size: 28px; }
    .home-services-section h2 { margin: 24px 0 0 0; font-weight: normal; font-size: 1.5em; }
    .home-services-section .various-content { margin-top: 24px;  }
    .home-services-section p { margin: 24px 0 0 0; line-height: 1.6em; }
    .home-services-section a:hover { text-decoration: underline; }
    .home-services-section a.button:hover { text-decoration: none; }
    .home-services-section .service *:first-child { margin-top: 0; }

    /* -------------------------------------------------------------------------
        BOTTOM BANNERS
    ------------------------------------------------------------------------- */

    .home-page .bottom-banners { margin-top: 80px; padding-top: 55px; border-top: 1px solid transparent; }
    .home-page .bottom-banners a { opacity: .3;
        -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; }
    .home-page .bottom-banners a:hover { opacity: .5; }
    .home-page .bottom-banners a:active { opacity: .3; }

    /* -------------------------------------------------------------------------
        RECENT ARTICLES
    ------------------------------------------------------------------------- */

    section.recent-articles .section-title { padding-right: 150px; }
    section.recent-articles .articles { margin-top: 60px; }
    section.recent-articles article .ico { position: absolute; left: 0; bottom: 0; width: 45px; height: 45px; text-align: center; z-index: 40; }
    section.recent-articles article .ico i { position: relative; top: 13px; font-size: 18px; }
    section.recent-articles article .article-title { position: relative; margin-bottom: 25px; padding: 0 0 20px 0; border-bottom: 1px solid transparent; }
    section.recent-articles article h3 { margin: 0; font-size: 1.2em; text-transform: uppercase; }
    section.recent-articles article .article-date { margin: 0 0 5px 0; font-size: 0.8em; }
    section.recent-articles article .article-text p { line-height: 1.7em; font-size: 0.95em; }

    /* AUDIO ARTICLE */

    section.recent-articles article.audio .article-title { padding-bottom: 0; border: 0; }
    section.recent-articles article.audio .article-audio { margin-bottom: 24px; }

    /* IMAGE ARTICLE */

    section.recent-articles article.image .article-image { margin-bottom: 24px; }
    section.recent-articles article.image .article-thumb { position: relative; padding-bottom: 70%; width: 100%; height: 0; background-position: center; overflow: hidden; }

    /* LINK ARTICLE */

    section.recent-articles article.link .article-title { padding-bottom: 0; border: 0; }
    section.recent-articles article.link .article-link { margin-bottom: 24px; }

    /* QUOTE ARTICLE */

    section.recent-articles article.quote .article-quote { margin-bottom: 24px; }
    section.recent-articles article.quote .article-quote blockquote { margin: 0; padding-left: 60px; }
    section.recent-articles article.quote .article-quote p { font-size: 1.57em; font-style: normal; }
    section.recent-articles article.quote .article-quote .ico { display: block; position: absolute; top: 0; left: 0; width: 45px; height: 45px; text-align: center; }
    section.recent-articles article.quote .article-quote .ico i { position: relative; top: 13px; font-size: 18px; }
    section.recent-articles article.quote .article-quote .source { display: block; margin-top: 30px; font-size: 1em; }

    /* VIDEO ARTICLE */

    section.recent-articles article.video .article-video { margin-bottom: 24px; }


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

    7.) PAGE TYPES

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

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

    #page-title { padding: 20px 20px; background-position: center; background-repeat: no-repeat; background-size: cover; }
    #page-title h1,
    #page-title h2, 
    .page-title-inner h1 { color:white;  font-weight: normal; font-size: 2.5em; }
    #page-title h1 span,
    #page-title h2 span,
    .page-title-inner span { position: relative; left: 20px; top: -4px; font-size: 0.45em; }

    /* -------------------------------------------------------------------------
        404 PAGE
    ------------------------------------------------------------------------- */

    .error404-page h2 { display: inline-block; padding: 25px 30px; font-size: 4.71em; font-weight: bold; }
    .error404-page h3 { font-size: 1.78em; font-weight: normal; }
    .error404-page p { font-size: 1.21em; }
    .error404-page a { text-decoration: underline; }
    .error404-page a:hover { text-decoration: none; }

    /* -------------------------------------------------------------------------
        ABOUT PAGE
    ------------------------------------------------------------------------- */

    /* ABOUT TEAM */

    .team-member { border: 1px solid transparent; border-radius: 12px; }
    .team-member .thumb { position: relative; padding-bottom: 70%; width: 100%; height: 0; overflow: hidden; border-radius: 12px 12px 0 0; }
    .team-member .thumb .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: #000; background: rgba(0,0,0,.8); border-radius: 12px 12px 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; }

    .team-member .thumb a i { color: #FFF; }
    .team-member .thumb .twitter { background: #0084ff; }
    .team-member .thumb .facebook { background: #004ae0; }
    .team-member .thumb .gplus { background: #ff004e; }
    .team-member .thumb .linkedin { background: #5674b9; }

    .team-member .thumb .overlay-inner { position: absolute; width: 100%; height: 40px; top: 50%; text-align: center; }
    .team-member .thumb .overlay a { position: relative; top: 200px; display: inline-block; margin: 0 2px 0 2px; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 4px; opacity: 0; text-align: center;
        -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; }
    .team-member .thumb .overlay a i { position: relative; font-size: 14px; }
    .team-member .thumb.hover .overlay { opacity: 1; }
    .team-member .thumb.hover .overlay a { top: -20px; opacity: 1; }
    .team-member .thumb.hover .overlay a:hover { top: -16px; }
    .team-member .thumb.hover .overlay a:active { top: -13px; }
    .team-member .thumb.hover .overlay a.ico2 { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; }
    .team-member .thumb.hover .overlay a.ico3 { -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
    .team-member .thumb.hover .overlay a.ico4 { -webkit-transition: all 600ms ease-in-out; -moz-transition: all 600ms ease-in-out; -ms-transition: all 600ms ease-in-out; -o-transition: all 600ms ease-in-out; transition: all 600ms ease-in-out; }
    .team-member .thumb.hovered .overlay a.ico2,
    .team-member .thumb.hovered .overlay a.ico3,
    .team-member .thumb.hovered .overlay a.ico4 { -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; }
    .team-member .thumb img { display: block; }
    .team-member .description { padding: 35px 40px 40px 40px; }
    .team-member h3 { margin: 0 0 5px 0; font-size: 1.7em; font-weight: normal; }
    .team-member h4 { margin: 0; font-size: 1.15em; font-weight: normal; }
    .team-member .various-content { padding-top: 30px; }
    .team-member .various-content > * { margin: 0 0 30px 0; }
    .team-member .various-content > *:last-child { margin: 0; }
    .team-member .various-content p { line-height: 1.6em; }

    /* -------------------------------------------------------------------------
        BLOG PAGE
    ------------------------------------------------------------------------- */

    .sticky { padding: 30px; border: 1px solid transparent; }

    /* ARTICLE LIST */

    .blog-page .article-list article { margin-top: 130px; }
    .blog-page .article-list article:first-child { margin-top: 0; }

    /* ARTICLE IMAGE */

    .blog-page .article-image { position: relative; }
    .blog-page .article-image .ico { position: absolute; left: 0; bottom: 0; width: 45px; height: 45px; text-align: center; z-index: 30; }
    .blog-page .article-image .ico i { position: relative; top: 12px; font-size: 18px; }
    .blog-page .article-image .thumb { position: relative; padding-bottom: 40%; width: 100%; height: 0; overflow: hidden; }
    .blog-page .article-image .thumb img { position: absolute; top: -30%; z-index: 20; }

    /* ARTICLE TITLE */

    .blog-page .article-title { margin-top: 40px; padding-bottom: 18px; border-bottom: 1px solid transparent; }
    .blog-page .article-title:first-child { margin-top: 0; }
    .blog-page .article-title .date { margin: 0 0 5px 0; }
    .blog-page .article-title h1,
    .blog-page .article-title h2 { margin: 0; font-weight: normal; font-size: 2.4em; }

    /* ARTICLE AUDIO */

    .blog-page .article-audio { margin-top: 30px; }
    article.audio .article-audio .audio-player { position: relative; padding-left: 45px; }
    article.audio .article-audio .audio-player .ico { position: absolute; left: 0; bottom: 0; width: 45px; height: 45px; text-align: center; z-index: 40; }
    article.audio .article-audio .audio-player .ico i { position: relative; top: 13px; font-size: 18px; }
    article.audio .article-audio .audio-player .mejs-container { margin: auto; }
    article.audio .article-audio .audio-player .mejs-container .mejs-controls { bottom: 7px; background: none; }
    article.audio .article-audio .audio-player .mejs-controls .mejs-button button:focus { outline: 0; }

    /* ARTICLE LINK */

    .blog-page .article-link { margin-top: 30px; }
    article.link .article-link { position: relative; width: 100%; height: 45px; }
    article.link .article-link-inner { margin-right: 20px; overflow: hidden; }
    article.link .article-link .ico { display: block; position: absolute; top: 0; left: 0; width: 45px; height: 45px; text-align: center; }
    article.link .article-link .ico i { position: relative; top: 13px; font-size: 18px; }
    article.link .article-link a { display: block; padding: 14px 0 0 65px; white-space: nowrap; }
    article.link .article-link a:hover { text-decoration: underline; }

    /* ARTICLE QUOTE */

    article.quote .article-quote { position: relative; padding-bottom: 30px; border-bottom: 1px solid transparent; }
    .blog-page .article-quote { margin-top: 30px; }
    .blog-page .article-quote blockquote { margin: 0; padding-left: 100px; }
    .blog-page .article-quote p { font-size: 2.28em; font-style: normal; }
    .blog-page .article-quote .ico { display: block; position: absolute; top: 0; left: 0; width: 45px; height: 45px; text-align: center; }
    .blog-page .article-quote .ico i { position: relative; top: 13px; font-size: 18px; }
    .blog-page .article-quote .source { display: block; margin-top: 30px; font-size: 1em; }

    /* ARTICLE EXCERPT */

    .blog-page .article-excerpt { line-height: 1.8em; }

    /* ARTICLE CONTENT */

    .blog-page .article-content { margin-top: 40px; padding-bottom: 40px; border-bottom: 1px solid transparent; }
    .blog-page .article-detail .article-content { padding-bottom: 0; }

    /* ARTICLE FOOTER */

    .blog-page .article-footer { position: relative; margin-top: 20px; }
    .blog-page .article-info { display: block; line-height: 1.8em; }
    .blog-page .article-info li { float: left; padding-right: 20px; }
    .blog-page .article-info li i { margin-right: 5px; font-size: 14px; }
    .blog-page .article-detail .article-footer { margin-top: 60px; }

    /* ARTICLE MORE */

    .blog-page .article-more .button { display: inline-block; margin-top: 20px; text-transform: uppercase; }

    /* ARTICLE COMMENTS */

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

    /* AUDIO ARTICLE */

    .blog-page article.audio .article-title { padding: 0; border: 0; }

    /* IMAGE ARTICLE */

    .blog-page article.image .article-image img { display: block; }

    /* LINK ARTICLE */

    .blog-page article.link .article-title { padding: 0; border: 0; }

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

    .article-comments { margin-top: 60px; }
    .article-comments .comments-count { margin: 0 0 40px 0; font-size: 2em; font-weight: normal; }

    /* COMMENT LIST */

    .bypostauthor { padding: 30px; }
    .article-comments .comment-list { margin-bottom: 80px; }
    .article-comments li.depth-1 { margin-top: 60px; }
    .article-comments li.depth-1:first-child { margin-top: 0; }
    .article-comments .children { padding-left: 100px; }
    .article-comments .children li.comment { margin-top: 40px; }
    .article-comments .comment-author { display: inline-block; margin-right: 40px; vertical-align: top; }
    .article-comments .comment-author a:hover { text-decoration: underline; }
    .article-comments .author-portrait { display: inline-block; margin-right: 37px; vertical-align: top; }
    .article-comments .author-portrait img { display: block; }
    .article-comments .author-name { display: inline-block; line-height: 60px; font-size: 1.21em; vertical-align: top; }
    .article-comments .comment-meta { display: inline-block; margin-right: 40px; line-height: 60px; vertical-align: top; font-size: 0.92em; }
    .article-comments .comment-meta a:hover { text-decoration: underline; }
    .article-comments .comment-tools { display: inline-block; line-height: 60px; font-size: 1.07em; vertical-align: top; }
    .article-comments .comment-tools .reply { display: inline-block; margin-right: 10px; }
    .article-comments .comment-tools a:hover { text-decoration: underline; }
    .article-comments .comment-tools i { font-size: 16px; }
    .article-comments .comment-content.offset { padding-left: 100px; }
    .article-comments #respond { margin-top: 30px; }

    /* COMMENT FORM */

    #respond { position: relative; padding: 60px; border-radius: 4px; }
    #respond h3 { margin: 0; padding-bottom: 14px; font-weight: normal; font-size: 2.42em; }
    #respond h3 a:hover { text-decoration: underline; }
    #respond h3 small { position: absolute; top: 20px; right: 20px; font-size: 14px; }
    #respond h3 small i { font-size: 16px; }
    #respond p { position: relative; margin: 24px 0 0 0; }
    #respond p.comment-row { margin-top: 40px; }
    #respond p .error-ico { position: absolute; bottom: 12px; right: 20px; font-size: 24px; }
    #respond label { display: block; margin: 0 0 16px 0; font-size: 1.1em; }
    #respond input,
    #respond textarea { display: block; margin: 0; padding: 14px 20px; width: 100%; font-size: 16px; resize: none; border-radius: 4px; border: 0;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    #respond textarea { height: 160px; }
    #respond input#submit { display: inline-block; padding: 14px 22px 13px 22px; width: auto; cursor: pointer; font-weight: bold; text-transform: uppercase; font-size: 15px; border-radius: 4px;
        -webkit-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -moz-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -ms-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -o-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; transition: color 300ms ease-in-out, background-color 300ms ease-in-out; }

    /* -------------------------------------------------------------------------
        CONTACT PAGE
    ------------------------------------------------------------------------- */

    /* CONTACT FORM */

    .contact-form .section-title { margin-bottom: 60px; }
    .contact-form { border-top: 6px solid transparent; }
    .contact-form-inner { padding: 50px 0 80px 0; }
    .contact-form p { position: relative; margin: 0 0 25px 0; }
    .contact-form p .error-ico { position: absolute; bottom: 12px; right: 10px; font-size: 24px; }
    .contact-form p:last-child { margin: 0; }
    .contact-form p.alert { margin: 30px 0; }
    .contact-form label { display: block; margin: 0 0 16px 0; font-size: 1.1em; }
    .contact-form input,
    .contact-form textarea { display: block; margin: 0; padding: 14px 20px; width: 100%; font-size: 16px; resize: none; border-radius: 4px; border: 0;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    .contact-form textarea { height: 160px; }
    .contact-form .button { display: inline-block; width: auto; cursor: pointer; }

    /* Contact Form 7 fixes */

    .wpcf7-form div.wpcf7-response-output { margin: 0; padding: 0; border: 0; }
    .wpcf7-form p.alert { margin-top: 0; }
    .wpcf7-form span.wpcf7-form-control-wrap { display: block; }
    .wpcf7-form .wpcf7-not-valid-tip { display: block; position: absolute; left: auto; top: auto; bottom: -24px; margin-top: 5px; padding: 0; width: 100%; height: 20px; text-align: right; font-size: 0.8em; background: none; border: 0; }
    .wpcf7-form .wpcf7-not-valid-tip .error-ico { bottom: 35px; }
    div.wpcf7 img.ajax-loader { display: inline-block; margin-left: 20px; }

 /* -------------------------------------------------------------------------
        PORTFOLIO PAGE
    ------------------------------------------------------------------------- */

    .portfolio-page .projects-inner { margin-top: -60px; }
    .portfolio-page .projects .row > li > .project-preview { margin-top: 60px; }
    .portfolio-page .projects .row > li.in-row-1 > .project-preview { margin-top: 0; }
    .portfolio-page .projects .row > li.first-in-row { clear: left;  }

    /* PORTFOLIO CATEGORIES */

    .portfolio-page .portfolio-categories { padding: 20px 0 20px 0; }
    .portfolio-page .portfolio-categories li { display: inline-block; margin: 0 20px 20px 0 ; }
    .portfolio-page .portfolio-categories a { display: block; padding: 14px 16px; font-size: 1.07em; font-weight: bold; text-transform: uppercase; border-radius: 4px; }

    /* PROJECT MEDIA */

    .portfolio-page .project-media > * { margin-top: 30px; }
    .portfolio-page .project-media > *:first-child { margin-top: 0; }
    .portfolio-page .project-media.media-top { margin-bottom: 60px; }
    .portfolio-page .project-media.media-bottom { margin-top: 60px; }
    .portfolio-page .project-images p { margin: 30px 0 0 0; }
    .portfolio-page .project-images p:first-child { margin-top: 0; }

    /* PROJECT AUDIO */

    .portfolio-page .project-audio { margin-top: 35px; }
    .portfolio-page .project-audio .audio-player { position: relative; }
    .portfolio-page .project-audio .audio-player .mejs-container { margin: auto; }
    .portfolio-page .project-audio .audio-player .mejs-container .mejs-controls { bottom: 7px; background: none; }
    .portfolio-page .project-audio .audio-player .mejs-controls .mejs-button button:focus { outline: 0; }
    .portfolio-page .project-preview .project-audio { margin-top: 0; }

    /* PROJECT DESCRIPTION */

    .portfolio-page .project-description .info { margin-top: 35px; padding: 12px 0 12px; border: 1px solid transparent; border-left: 0; border-right: 0; }
    .portfolio-page .project-description .info li { position: relative; padding: 2px 0 2px 70px; line-height: 1.8em; }
    .portfolio-page .project-description .info h3 { position: absolute; top: 2px; left: 0; margin: 0; width: 60px; font-size: 1em; }
    .portfolio-page .project-description .info span { margin-right: 10px; text-transform: uppercase; }
    .portfolio-page .project-description .info span:last-child {margin: 0; }
    .portfolio-page .project-description .project-text { margin-top: 35px; }
    .portfolio-page .project-description .project-text p { line-height: 1.8em; }
    .portfolio-page .project-description .project-tags { margin-top: 30px; }
    .portfolio-page .project-description .project-tags i { margin-right: 5px; font-size: 14px; }
    .portfolio-page .project-nav { margin: 50px 0 0 0; }
    .portfolio-page .project-nav a,
    .portfolio-page .project-nav span { display: inline-block; position: relative; width: 28px; height: 28px; text-align: center; }
    .portfolio-page .project-nav i { position: relative; top: 1px; left: 0; font-size: 24px;
        -webkit-transition: left 300ms ease-in-out; -moz-transition: left 300ms ease-in-out; -ms-transition: left 300ms ease-in-out; -o-transition: left 300ms ease-in-out; transition: left 300ms ease-in-out; }
    .portfolio-page .project-nav .prev:active i { left: -5px; }
    .portfolio-page .project-nav .next:active i { left: 3px; }
    .portfolio-page .project-nav span.prev:active i,
    .portfolio-page .project-nav span.next:active i { left: -1px; }

    /* RECENT PROJECT */

    .portfolio-page .recent-projects { margin-top: 80px; }
    .portfolio-page .recent-projects .projects .row > li > .project-preview { margin-top: 0; }

    /* -------------------------------------------------------------------------
        SEARCH RESULTS PAGE
    ------------------------------------------------------------------------- */

    .search-results-page .search-results > * { margin-top: 50px; border-bottom: 1px solid transparent; }
    .search-results-page .search-results > *:first-child { margin-top: 0; }
    .search-results-page h2 { margin: 0; font-weight: normal; font-size: 1.5em; }
    .search-results-page .link { margin: 18px 0 0 0; width: 100%; overflow-x: hidden; }
    .search-results-page .link a { text-decoration: underline; }
    .search-results-page .various-content { margin-top: 18px; }
    .search-results-page .various-content .string { padding: 0 2px; }


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

    8.) SIDEBAR

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

    /* -------------------------------------------------------------------------
        WIDGETS
    ------------------------------------------------------------------------- */

    #sidebar .widget { margin-top: 50px; }
    #sidebar .widget:first-child { margin-top: 0; }
    #sidebar .widget h3 { margin: 0 0 22px 0; font-size: 1.05em;}
    #sidebar .widget-content:first-child { margin-top: 0; }
    #sidebar .widget .widget-content > ul > li,
    #sidebar .widget .widget-content > div > ul > li { border-bottom: 1px solid transparent; }
    #sidebar .widget .widget-content > .selectbox > ul > li { border-bottom: 0; }

    /* ARCHIVE WIDGET */

    /* as list */

    #sidebar .widget.widget_archive .widget-content > ul > li { padding: 13px 14px; }
    #sidebar .widget.widget_archive .widget-content > ul > li:first-child { padding-top: 0; }

    /* as dropdown */

    #sidebar .widget.widget_archive select { display: none; }
    #sidebar .widget.widget_archive .selectbox { border-radius: 4px; }
    #sidebar .widget.widget_archive button { display: block; position: relative; padding: 15px 20px; width: 100%; text-align: left; font-size: 1em;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    #sidebar .widget.widget_archive button i { position: absolute; top: 15px; right: 20px; font-size: 18px;
        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; }
    #sidebar .widget.widget_archive button.active i { transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); }
    #sidebar .widget.widget_archive .selectbox ul { display: none; padding-bottom: 12px; }
    #sidebar .widget.widget_archive .selectbox li { cursor: pointer; padding: 12px 20px; }

    /* CALENDAR WIDGET */

    #sidebar .widget.widget_calendar table { width: 100%; }
    #sidebar .widget.widget_calendar caption { padding-bottom: 14px; text-align: left; }
    #sidebar .widget.widget_calendar td,
    #sidebar .widget.widget_calendar th { padding: 3px 0; }
    #sidebar .widget.widget_calendar tfoot td { padding-top: 10px; }
    #sidebar .widget.widget_calendar tfoot #next { text-align: right; }

    /* CATEGORIES WIDGET */

    /* as list */

    #sidebar .widget.widget_categories .widget-content > ul li a { display: inline-block; padding: 13px 0 13px 14px; }
    #sidebar .widget.widget_categories .widget-content > ul:first-child > li:first-child > a { padding-top: 0; }
    #sidebar .widget.widget_categories .widget-content > ul ul.children { padding: 0 0 8px 14px; }
    #sidebar .widget.widget_categories .widget-content > ul ul.children a { padding: 8px 0 8px 12px; font-size: 0.9em; }

    /* as dropdown */

    #sidebar .widget.widget_categories select { display: none; }
    #sidebar .widget.widget_categories .selectbox { border-radius: 4px; }
    #sidebar .widget.widget_categories button { display: block; position: relative; padding: 15px 20px; width: 100%; text-align: left; font-size: 1em;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    #sidebar .widget.widget_categories button i { position: absolute; top: 15px; right: 20px; font-size: 18px;
        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; }
    #sidebar .widget.widget_categories button.active i { transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); }
    #sidebar .widget.widget_categories .selectbox ul { display: none; padding-bottom: 12px; }
    #sidebar .widget.widget_categories .selectbox li { cursor: pointer; padding: 12px 20px; }

    /* CUSTOM MENU WIDGET */

    #sidebar .widget.widget_nav_menu li a { display: block; padding: 13px 14px; }
    #sidebar .widget.widget_nav_menu ul.menu > li:first-child > a { padding-top: 0; }
    #sidebar .widget.widget_nav_menu ul.sub-menu { padding: 0 0 14px 14px; }
    #sidebar .widget.widget_nav_menu ul.sub-menu a { padding: 8px 12px; font-size: 0.9em; }

    /* IMAGES WIDGET */

    #sidebar .widget.images .widget-content { position: relative; min-height: 50px; }
    #sidebar .widget.images.loading .loading-anim { display: block; }
    #sidebar .widget.images .feed { display: none; }
    #sidebar .widget.images li { float: left; margin: 0 15px 15px 0; width: 78px; }
    #sidebar .widget.images li.third { margin-right: 0; }
    #sidebar .widget.images li a { display: block; padding-bottom: 100%; width: 100%; height: 0; background-position: center; background-size: cover; opacity: 1;
        -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; }
    #sidebar .widget.images li a:hover { opacity: .7; }
    #sidebar .widget.images li a:active { opacity: .5; }
    #sidebar .widget.images li img { display: none; }

    /* LINKS WIDGET */

    #sidebar .widget.widget_links li { padding: 13px 14px; }
    #sidebar .widget.widget_links li:first-child { padding-top: 0; }

    /* META WIDGET */

    #sidebar .widget.widget_meta a { display: block; padding: 13px 14px; font-size: 1.15em; }

    /* PAGES WIDGET */

    #sidebar .widget.widget_pages li a { display: block; padding: 13px 14px; }
    #sidebar .widget.widget_pages .widget-content > ul:first-child > li:first-child > a { padding-top: 0; }
    #sidebar .widget.widget_pages ul.children { padding: 0 0 14px 14px; }
    #sidebar .widget.widget_pages ul.children a { padding: 8px 12px; font-size: 0.9em; }

    /* RECENT COMMENTS WIDGET */

    #sidebar .widget.widget_recent_comments li { padding: 13px 0; }
    #sidebar .widget.widget_recent_comments li:first-child { padding-top: 0; }

    /* RECENT POSTS WIDGET */

    #sidebar .widget.widget_recent_entries li { padding: 13px 0; }
    #sidebar .widget.widget_recent_entries li:first-child { padding-top: 0; }

    /* RSS WIDGET */

    #sidebar .widget.widget_rss li { padding: 20px 0; }
    #sidebar .widget.widget_rss li:first-child { padding-top: 0; }
    #sidebar .widget.widget_rss .rssSummary { margin-top: 10px; }
    #sidebar .widget.widget_rss cite { display: block; margin-top: 10px; font-size: 0.8em; }

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

    9.) TWITTER FEED

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

.twitter-feed-inner { position: relative; padding: 50px 0 50px 0; }
#twitter-feed .ico { position: absolute; top: 50px; left: 0; font-size: 28px; }
#twitter-feed h3 { margin: 0 0 20px 0; padding-left: 45px; font-size: 1.6em; font-weight: normal; }
#twitter-feed .tweets li { display: none; }
#twitter-feed .tweets li.active { display: block; }
#twitter-feed p.tweet { margin: 0; font-size: 1.2em; }
#twitter-feed p.date { margin: 10px 0 0 0; font-size: 0.95em; }
#twitter-feed a { text-decoration: underline; }
#twitter-feed a:hover { text-decoration: none; }
#twitter-feed h3 a { text-decoration: none; }
#twitter-feed h3 a:hover { text-decoration: underline; }
#twitter-feed .nav { position: absolute; right: 0; bottom: 20px;  }
#twitter-feed .nav button { display: inline-block; position: relative; width: 30px; height: 30px; text-align: center; }
#twitter-feed .nav button i { position: relative; left: 0; font-size: 32px;
    -webkit-transition: left 300ms ease-in-out; -moz-transition: left 300ms ease-in-out; -ms-transition: left 300ms ease-in-out; -o-transition: left 300ms ease-in-out; transition: left 300ms ease-in-out; }
#twitter-feed .nav button.prev:active i { left: -3px; }
#twitter-feed .nav button.next:active i { left: 3px; }

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

    10.) BOTTOM

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

.bottom-inner { padding: 60px 0; }

    /* -------------------------------------------------------------------------
        WIDGETS
    ------------------------------------------------------------------------- */

    #bottom .widget h3 { position: relative; margin: 0 0 30px 0; padding-bottom: 20px; font-size: 1.25em; border-bottom: 1px solid transparent; }
    #bottom .widget h3 span.decor { display: block; position: absolute; left: 0; bottom: -1px; width: 22px; height: 1px; line-height: 1px; font-size: 0; }
    #bottom .widget-content { position: relative; }
    #bottom .widget .widget-content > ul > li,
    #bottom .widget .widget-content > div > ul > li { border-bottom: 1px solid transparent; }
    #bottom .widget .widget-content > .selectbox > ul > li { border-bottom: 0; }

    /* ARCHIVE WIDGET */

    /* as list */

    #bottom .widget.widget_archive .widget-content > ul > li { padding: 13px 14px; }
    #bottom .widget.widget_archive .widget-content > ul > li:first-child { padding-top: 0; }

    /* as dropdown */

    #bottom .widget.widget_archive select { display: none; }
    #bottom .widget.widget_archive .selectbox { border-radius: 4px; }
    #bottom .widget.widget_archive button { display: block; position: relative; padding: 15px 20px; width: 100%; text-align: left; font-size: 1em;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    #bottom .widget.widget_archive button i { position: absolute; top: 15px; right: 20px; font-size: 18px;
        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; }
    #bottom .widget.widget_archive button.active i { transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); }
    #bottom .widget.widget_archive .selectbox ul { display: none; padding-bottom: 12px; }
    #bottom .widget.widget_archive .selectbox li { cursor: pointer; padding: 12px 20px; }

    /* CALENDAR WIDGET */

    #bottom .widget.widget_calendar table { width: 100%; }
    #bottom .widget.widget_calendar caption { padding-bottom: 14px; text-align: left; }
    #bottom .widget.widget_calendar td,
    #bottom .widget.widget_calendar th { padding: 3px 0; }
    #bottom .widget.widget_calendar tfoot td { padding-top: 10px; }
    #bottom .widget.widget_calendar tfoot #next { text-align: right; }

    /* CATEGORIES WIDGET */

    /* as list */

    #bottom .widget.widget_categories .widget-content > ul li a { display: inline-block; padding: 13px 0 13px 14px; }
    #bottom .widget.widget_categories .widget-content > ul:first-child > li:first-child > a { padding-top: 0; }
    #bottom .widget.widget_categories .widget-content > ul ul.children { padding: 0 0 8px 14px; }
    #bottom .widget.widget_categories .widget-content > ul ul.children a { padding: 8px 0 8px 12px; font-size: 0.9em; }

    /* as dropdown */

    #bottom .widget.widget_categories select { display: none; }
    #bottom .widget.widget_categories .selectbox { border-radius: 4px; }
    #bottom .widget.widget_categories button { display: block; position: relative; padding: 15px 20px; width: 100%; text-align: left; font-size: 1em;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    #bottom .widget.widget_categories button i { position: absolute; top: 15px; right: 20px; font-size: 18px;
        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; }
    #bottom .widget.widget_categories button.active i { transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); }
    #bottom .widget.widget_categories .selectbox ul { display: none; padding-bottom: 12px; }
    #bottom .widget.widget_categories .selectbox li { cursor: pointer; padding: 12px 20px; }

    /* CUSTOM MENU WIDGET */

    #bottom .widget.widget_nav_menu li a { display: block; padding: 13px 14px; }
    #bottom .widget.widget_nav_menu ul.menu > li:first-child > a { padding-top: 0; }
    #bottom .widget.widget_nav_menu ul.sub-menu { padding: 0 0 14px 14px; }
    #bottom .widget.widget_nav_menu ul.sub-menu a { padding: 8px 12px; font-size: 0.9em; }

    /* IMAGES WIDGET */

    #bottom .widget.images .widget-content { min-height: 50px; }
    #bottom .widget.images .loading-anim { display: block; }
    #bottom .widget.images .feed { display: none; }
    #bottom .widget.images li { float: left; margin: 0 8px 8px 0; width: 60px; }
    #bottom .span3 .widget.images li.fourth { margin-right: 0; }
    #bottom .widget.images li a { display: block; padding-bottom: 100%; width: 100%; height: 0; background-position: center; background-size: cover; opacity: 1;
        -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;}
    #bottom .widget.images li a:hover { opacity: .7; }
    #bottom .widget.images li a:active { opacity: .5; }
    #bottom .widget.images li img { display: none; }

    /* LINKS WIDGET */

    #bottom .widget.widget_links li { padding: 13px 14px; }
    #bottom .widget.widget_links li:first-child { padding-top: 0; }

    /* META WIDGET */

    #bottom .widget.widget_meta a { display: block; padding: 13px 14px; font-size: 1.15em; }

    /* PAGES WIDGET */

    #bottom .widget.widget_pages li a { display: block; padding: 13px 14px; }
    #bottom .widget.widget_pages .widget-content > ul:first-child > li:first-child > a { padding-top: 0; }
    #bottom .widget.widget_pages ul.children { padding: 0 0 14px 14px; }
    #bottom .widget.widget_pages ul.children a { padding: 8px 12px; font-size: 0.9em; }

    /* RECENT COMMENTS WIDGET */

    #bottom .widget.widget_recent_comments li { padding: 13px 0; }
    #bottom .widget.widget_recent_comments li:first-child { padding-top: 0; }

    /* RECENT POSTS WIDGET */

    #bottom .widget.widget_recent_entries li { padding: 20px 0; }
    #bottom .widget.widget_recent_entries li:first-child { padding-top: 0; }
    #bottom .widget.widget_recent_entries a { display: block; line-height: 1.6em; font-weight: normal; font-size: 1.05em; }
    #bottom .widget.widget_recent_entries .post-date { display: block; margin: 10px 0 0 0; font-size: 0.9em; }

    /* RSS WIDGET */

    #bottom .widget.widget_rss li { padding: 20px 0; }
    #bottom .widget.widget_rss li:first-child { padding-top: 0; }
    #bottom .widget.widget_rss .rssSummary { margin-top: 10px; }
    #bottom .widget.widget_rss cite { display: block; margin-top: 10px; font-size: 0.8em; }

    /* SEARCH WIDGET */

    #bottom .widget.widget_search form > div { border: 0;  }

    /* TAGS WIDGET */

    #bottom .widget.widget_tag_cloud li { display: inline-block; margin: 0 3px 7px 0;  }
    #bottom .widget.widget_tag_cloud a { display: block; padding: 12px 20px; font-size: 0.8em; text-transform: uppercase; border: 1px solid transparent;
        -webkit-transition: border-color 300ms ease-in-out; -moz-transition: border-color 300ms ease-in-out; -ms-transition: border-color 300ms ease-in-out; -o-transition: border-color 300ms ease-in-out; transition: border-color 300ms ease-in-out; }


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

    11.) FOOTER

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

footer { font-size: 0.95em; }
.footer-inner { padding: 50px 0; }

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

    footer .copyright { float: left; margin: 0; }

    /* -------------------------------------------------------------------------
        FOOTER NAV
    ------------------------------------------------------------------------- */

    nav.footer { float: right; }
    nav.footer li { display: inline-block; }


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

    12.) RESPONSIVE

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

    /* -------------------------------------------------------------------------
        LARGE DESKTOP (default)
    ------------------------------------------------------------------------- */

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

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

    @media (max-width: 1199px) {

    /* SIDEBAR */

    #sidebar .widget.images li { float: left; margin: 0 14px 14px 0; width: 61px; }

    /* BOTTOM */

    #bottom .span3 .widget.images li.fourth { margin-right: 8px; }

    /* FOOTER */

    footer .copyright { float: none; text-align: center; }
    nav.footer { float: none; text-align: center; }
    .footer-inner > * { margin-top: 30px; }
    .footer-inner > *:first-child { margin-top: 0; }

    /* SCREEN WIDTH */

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

    }

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

    @media (max-width: 979px) {

    /* COMPONENTS */

    /* buttons */
    .button.wide { padding-left: 20px; padding-right: 20px; }

    /* list slider */
    .list-slider-nav { top: -110px; }
    .list-slider-nav button { width: 40px; height: 40px; }
    .list-slider-nav button i { font-size: 32px; }
    .list-slider-nav button.prev:active i { left: 2px; }
    .list-slider-nav button.next:active i { left: 8px; }
    /* tabs */
    .tabs .tab { padding: 14px 20px 12px 20px; }
    .tabs .tab span { display: none; }
    .tabs .tab i { position: relative; top: auto; left: auto; }

    /* HEADER */

    /* topbar*/
    #topbar { padding: 15px 20px 5px 20px; }
    .topbar-inner { height: auto; }
    #topbar .responsive-controls { display: block; padding-bottom: 10px;}
    #topbar .responsive-controls .social { float: left; }
    #topbar .responsive-controls .search { float: right; }
    #topbar .social-icons { display: none; margin-top: 10px; }
    #topbar .social-icons li a { margin-bottom: 10px; width: 60px; height: 60px; text-align: center; }
    #topbar .social-icons li a i { font-size: 24px; top: 15px; }
    #topbar .top-search-form { display: none; position: relative; margin: 10px 0 10px 0; width: auto; height: 60px; }
    #topbar .top-search-form .input { display: block; position: relative; height: 60px; }
    #topbar .top-search-form .input input { padding-top: 22px; width: 80%; padding-left: 20px; font-size: 14px; }
    #topbar .top-search-form button.submit { width: 60px; height: 60px; }
    #topbar .top-search-form button.submit i { font-size: 24px; }
    #topbar .top-search-form button.submit .ico1 { display: none; }
    #topbar .top-search-form button.submit .ico2 { display: inline; }
    #topbar .top-search-form .input .close { display: none; }
    /* navbar */
    .navbar-inner { min-height: 140px; }
    #branding { max-width: 70%; }
    nav.main { float: none; padding-top: 42px; }
    nav.main > button { display: block; }
    nav.main .indicator,
    nav.main .indicator.active { display: none; }
    nav.main > ul { display: none; clear: both; padding: 20px 0 10px 0; }
    nav.main > ul > li { position: relative; float: none; margin: 0; padding-bottom: 10px; border-top: 1px solid transparent; }
    nav.main > ul > li:first-child { border: 0; }
    nav.main > ul > li > a { position: relative; padding: 20px 60px 10px 0; z-index: 20; font-size: 1.2em; }
    nav.main > ul > li > a > span { display: none; }
    nav.main > ul > li.last > a { padding-right: 60px; }
    nav.main > ul > li .arrow { display: block; position: absolute; top: 14px; left: auto; right: 9px; width: 42px; height: 42px; cursor: pointer; z-index: 30; text-align: center; }
    nav.main > ul > li .arrow i { position: relative; top: 6px; line-height: 30px; text-align: center; font-size: 30px;
        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 > ul > li .arrow.active i { transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); }
    nav.main > ul > li > ul { position: relative; left: auto; top: auto; padding-bottom: 5px; }
    nav.main > ul > li > ul > li { border: 0; }
    nav.main > ul > li > ul li a { padding: 5px 0; font-size: 1.2em; line-height: 1.5em; white-space: normal; }
    nav.main > ul > li ul ul,
    nav.main > ul > li.last ul ul,
    nav.main > ul > li.penultimate ul ul { position: relative; left: auto; right: auto; top: auto; padding-left: 30px; padding-bottom: 5px; font-size: 0.9em; }
    nav.main > ul > li > ul li,
    nav.main > ul ul ul li { border: 0; }

    /* PAGE TYPES */

    /* page title */
    #page-title h1 span,
    #page-title h2 span { display: block; left: auto; top: auto; margin-top: 5px; }
    
    /* blog page */
    .blog-page .article-list .article-info { padding-left: 0; }
    /* contact page */
    .contact-page .contact-info li,
    .contact-page .contact-info.hours li { padding-left: 0;  }
    .contact-page .contact-info li h3 { display: block; position: relative; top: auto; left: auto; width: auto; padding-left: 32px; }
    /* portfolio page */
    .portfolio-page .project-nav a,
    .portfolio-page .project-nav span { width: 40px; height: 40px; }
    .portfolio-page .project-nav i { top: 5px; left: 0; font-size: 28px; }
    .portfolio-page .project-nav .prev:active i { left: -3px; }
    .portfolio-page .project-nav .next:active i { left: 3px; }

    /* SIDEBAR */

    #sidebar .widget.images li { float: left; margin: 0 14px 14px 0; width: 76px; }
    #sidebar .widget.images li.third { margin-right: 14px; }
    #sidebar .widget.images li.second { margin-right: 0; }

    /* TWITTER FEED */

    #twitter-feed { padding: 0 20px; }
    #twitter-feed .title { margin-bottom: 20px; text-align: left; }

    /* BOTTOM */

    #bottom .widget.images li,
    #bottom .widget.images li.third,
    #bottom .widget.images li.fourth { margin: 0 10px 10px 0; width: 78px; }
    #bottom .widget.images li.second { margin-right: 0; }
    #bottom .span3 .widget.images li.fourth { margin-right: 0; }

    /* SCREEN WIDTH */

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

    }

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

    @media (max-width: 767px) {

    /* GENERAL */

    body { padding: 0; }

    /* TYPOGRAPHY */

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

    .various-content .row > * > .section-title:first-child,
    .various-content .row-fluid > * > .section-title:first-child { margin-top: 80px; }

    .various-content .row > *:first-child > *:first-child,
    .various-content .row-fluid > *:first-child > *:first-child { margin-top: 0; }

    /* COMPONENTS */

    /* cta message */
    .cta-message .button { display: inline-block; float: none; margin-top: 20px; }
    /* button pagination */
    .button-pagination p.status { position: static; left: auto; top: auto; margin-bottom: 30px; }
    /* list slider */
    .list-slider-nav { position: relative; top: auto; right: auto; margin: 0 auto 30px auto; width: 85px; height: 40px; }
    .list-slider.all-visible .list-slider-nav { display: block; }
    .list-slider.one-item .list-slider-nav { display: none; }
    .list-slider-items { margin: auto; width: 430px; }
    .list-slider-items > ul > li { width: 430px; }
    /* pagination */
    .pagination { text-align: center; }

    /* HEADER */

    #navbar { padding: 0 20px; }
    #branding { max-width: 60%; }

    /* ST SLIDER */

    .st-slider .carousel-inner .item-content { padding: 0 30px; }
    .st-slider .carousel-inner .item h2 { font-size: 2.8em; }

    /* HOMEPAGE */

    .home-services-section-inner { padding-left: 20px; padding-right: 20px; }
    section.recent-projects .section-title,
    section.recent-articles .section-title { padding-right: 0; }
    .home-page .bottom-banners { text-align: center; }

    /* CORE */

    .fullsize-section { padding-left: 20px; padding-right: 20px; }

    /* PAGE TYPES */

    /* page core */
    #page-core { padding-left: 20px; padding-right: 20px; }
    /* about page */
    .team-member { margin-left: auto; margin-right: auto; width: 430px; }
    /* blog page */
    .blog-page .article-footer > * { margin-top: 30px; }
    .blog-page .article-footer > *:first-child { margin-top: 0; }
    .blog-page .article-footer .button { top: 0; }
    .blog-page .article-quote blockquote { padding-left: 0; padding-top: 50px; }
    .blog-page .article-quote .ico { display: block; position: absolute; top: 0; left: 0; width: 45px; height: 45px; text-align: center; }
    .article-comments .comment-form { padding: 30px; }
    /* contact page */
    .contact-form { padding: 0 20px 0 20px; }
    .contact-form p:last-child { margin-bottom: 25px; }
    .contact-form-inner { padding-bottom: 50px; }
    .contact-page .contact-info { margin-bottom: 60px; }
    /* portfolio page */
    .portfolio-page .portfolio-categories { padding-left: 20px; padding-right: 20px; }
    .portfolio-page .projects ul.row { margin-left: auto; margin-right: auto; width: 430px; }
    .portfolio-page .projects ul.row > li { margin-top: 60px; width: 430px; }
    .portfolio-page .projects ul.row > li:first-child { margin-top: 0; }
    .portfolio-page .recent-projects .projects ul.row > li { margin-top: 0; }
    .portfolio-page .project-description { margin-top: 60px; }

    /* SIDEBAR */

    #sidebar { margin-top: 100px; }
    #sidebar .widget.images li,
    #sidebar .widget.images li.third,
    #sidebar .widget.images li.second { margin-right: 14px; }

    /* BOTTOM */

    #bottom { padding: 0 20px; }
    .bottom-inner { padding-bottom: 0; }
    #bottom .widget { margin-bottom: 60px; }
    #bottom .widget.images li,
    #bottom .widget.images li.second,
    #bottom .widget.images li.third,
    #bottom .widget.images li.fourth,
    #bottom .span3 .widget.images li.fourth { margin: 0 10px 10px 0; width: 70px; }
    

    /* FOOTER */

    footer { padding: 0 20px; }

    /* SCREEN WIDTH */

    #screen-width,
    #screen-width span:before { content: "767"; }
    
    
    
    
    
    .project-preview {width:200px;}

    }

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

    @media (max-width: 480px) {

    /* COMPONENTS */

    /* list slider */
    .list-slider-items { width: 250px; }
    .list-slider-items > ul > li { width: 250px; }

    /* PAGE TYPES */

    /* about page */
    .team-member { width: 250px; }
    /* blog page */
    article.audio .article-audio .audio-player { padding-left: 0; }
    article.audio .article-audio .audio-player .ico { display: none; }
    /* portfolio page */
    .portfolio-page .projects ul.row { width: 250px; }
    .portfolio-page .projects ul.row > li { width: 250px; }

    /* SCREEN WIDTH */

    #screen-width,
    #screen-width span:before { content: "480"; }
    
    #branding img { max-width: 200px; }

    }


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

    13.) STYLE SWITCHER

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

#style-switcher { position: fixed; top: 30%; left: -200px; width: 250px; z-index: 100;
    -webkit-transition: left 300ms ease-in-out; -moz-transition: left 300ms ease-in-out; -ms-transition: left 300ms ease-in-out; -o-transition: left 300ms ease-in-out; transition: left 300ms ease-in-out; }
#style-switcher.opened { left: 0; }
.style-switcher-title { position: relative; padding-left: 18px; height: 50px; line-height: 50px; border-radius: 0 7px 7px 0; color: #afbbc1; background: #252525; }
.style-switcher-title h3 { margin: 0; line-height: 55px; font-size: 1.07em; font-weight: normal; }
.style-switcher-title button { display: block; position: absolute; top: 0; right: 0; width: 50px; height: 50px; text-align: center; font-size: 23px; color: #FFF; }
.style-switcher-title button i { position: relative; top: 0; }
.style-switcher-title button:hover {
    animation-name: loading; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite;
    -moz-animation-name: loading; -moz-animation-duration: 2s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite;
    -webkit-animation-name: loading; -webkit-animation-duration: 2s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite;
    -o-animation-name: loading; -o-animation-duration: 2s; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; }
.style-switcher-content { width: 200px; border-radius: 0 0 7px 0; color: #667279; background: #111111; }
.style-switcher-content-inner { padding: 18px; }
.style-switcher-content-inner > * { margin-top: 20px; }
.style-switcher-content-inner > *:first-child { margin-top: 0; }
.style-switcher-content h4 { font-size: 1em; font-weight: normal; }

/* colors */

.style-switcher-colors ul { margin-top: 0; }
.style-switcher-colors ul li { display: inline-block; margin-left: 2px; }
.style-switcher-colors ul li:first-child { margin-left: 0; }
.style-switcher-colors button { display: block; width: 27px; height: 27px; }
.style-switcher-colors button.cs-default { background: #9db1ba; }
.style-switcher-colors button.cs-strongorange { background: #c25a2a; }
.style-switcher-colors button.cs-softred { background: #f45f51; }
.style-switcher-colors button.cs-darkcyan { background: #01a690; }
.style-switcher-colors button.cs-fadedred { background: #cc9896; }






/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/*********************************************
 * ROLLING LINKS
 *********************************************/

/* ROLL LINKS */
.roll-link {
display: inline-block;
overflow: hidden;

vertical-align: top;

-webkit-perspective: 600px;
-moz-perspective: 600px;

-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
border-radius: 4px;

}

.roll-link:hover {text-decoration:none;}

.roll-link span {
display: block;
position: relative;
padding: 0 2px;

-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;

-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
border-radius: 4px;
}
.roll-link:hover span {
background: #DD4D42;


-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
border-radius: 4px;
}

.roll-link span:after {
content: attr(data-title);

display: block;
position: absolute;
left: 0;
top: 0;
padding: 0 2px;

color: #fff;
background: #DD4D42;

-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;

-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
border-radius: 4px;
}