/*

Theme Name: Zen Themes
Theme URI: zen-themes.com
Author: Jen Yuan
Author URI: thejenyuan.com

Description: A custom WordPress theme for Zen Themes

Version: 1.0
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html

*/

/*

1.0 Settings
    1.1 Width Controlling
    1.2 Typography Styling
    1.3 Forms Styling
    1.4 Slick Slider
2.0 Header
3.0 Container
    3.1 Homepage
    3.2 Theme Index
    3.3 Theme Single
        3.3.1 Theme Header
        3.3.2 Theme Content
    3.4 Theme Preview
    3.5 Theme Install
    3.6 Support Page
        3.6.1 FAQ List
        3.6.2 Contact Form
    3.7 Premium Services
    3.8 About Page
4.0 Blog
    4.1 Blog Index
    4.2 Blog Single
5.0 Miscellaneous
    5.1 Newsletter
    5.2 404 Error
6.0 Footer
7.0 Animation
8.0 Responsive
9.0 Advertisement

*/

/*  1.0 Settings  */

*,*:before,*:after{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
    }

html{
    width:100%;
    height:100%;
    overflow-x:hidden
    }

body{
    position:relative;
    width:100%;
    height:100%;
    margin:0;
    padding:.1px 0
    }

a{
    position:relative;
    word-wrap:break-word;
    text-decoration:none;
    border:none;
    outline:none;
    cursor:pointer
    }

a:hover,
a:visited{
    color:auto
    }

#theme-menu #theme_menu_slide_button i,
#post-content a,
#section-indicator hr{
    -webkit-transition:.15s;
    transition:.15s
    }

a,
#header,
#top-banner,
#bottom-banner,
.banner .close_banner,
#share li .share-button,
#navigation #link_slide_button .line,
#cover #cover-content img,
#cover #cover-content #cover-content-banner,
#share li i,
#share li span,
#themes li,
#themes li .theme-text,
#themes li .theme-text .theme-sd,
#theme-header #theme-slider,
.slick-slider .slick-prev,
.slick-slider .slick-next,
#theme-slider-loader-wrap,
#more-themes li img,
#frame #frame-bar button,
#faq-list h2,
#faq-list .faq_close span,
#service-selection #service-list li,
#center input,
#footer,
#footer #newsletter-link i{
    -webkit-transition:.3s;
    transition:.3s
    }

#frame #frame-loader,
#frame #frame-preview,
#contact,
#contact #contact-form form{
    -webkit-transition:.6s;
    transition:.6s
    }

    /*   1.1 Width Controlling  */

    .width{
        position:relative;
        width:90%;
        max-width:1240px;
        margin:auto
        }

    .width.tiny{
        max-width:600px
        }

    .width.small{
        max-width:1000px
        }

    .width.large{
        max-width:1400px
        }

    .width.full{
        max-width:100%
        }

    .clear:after{
        content:"";
        display:block;
        height:0;
        clear:both
        }

    .sub-section{
        padding:60px 0;
        // margin:60px auto 0;
        background:#f2f2f2;
        border-top:1px solid #eee;
        border-bottom:1px solid #eee
        }

    .sub-section.sp-section{
        padding:0;
        margin:60px auto 0;
        background:none;
        border-top:none;
        border-bottom:none
        }

    .homepage .sp-section,
    .theme-single .sp-section{
        margin:0 auto 60px
        }

    .col-3{
        display:inline-block;
        vertical-align:top;
        width:calc(33% - 40px);
        margin:0 60px 0 0;
        text-align:center
        }

    .col-3:nth-of-type(3n){
        margin:auto
        }

    .col-4{
        display:inline-block;
        vertical-align:top;
        width:calc(25% - 45px);
        margin:0 60px 0 0;
        text-align:center;
        }

    .col-4:nth-of-type(4n){
        margin:0
        }

    .cta{
        display:inline-block;
        heigh:45px;
        padding:0 30px;
        text-transform:uppercase;
        letter-spacing:2px;
        font:14px/47px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        box-shadow:0 0 0 1px #1085e9
        }

    .cta:hover{
        color:#fff;
        background:#1085e9
        }

    .cta-full{
        display:block;
        height:60px;
        text-align:center;
        text-transform:uppercase;
        letter-spacing:2px;
        padding:2px 0 0;
        font:14px/58px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#fff;
        background:#1085e9;
        box-shadow:0 0 0 1px #1085e9
        }

    .cta-full:hover{
        background:#32a7fb
        }

    .block{
        margin:30px 0;
        background:#f2f2f2
        }

    /*  1.1 Width Controlling - END  */

    /*  1.2 Typography Styling  */

    body{
        font:14px/1.8em "Helvetica Neue",Helvetica,sans-serif;
        -webkit-font-smoothing:subpixel-antialiased;
        /*-moz-osx-font-smoothing:grayscale;*/
        color:#555
        }

    a{
        color:#1085e9
        }

    img{
        display:block;
        max-width:100%;
        height:auto !important;
        border:none;
        outline:none
        }

    h1,h2,h3,h4,h5,h6,p,ol,ul,li{
        margin:0;
        padding:0
        }

    h1,h2,h3,h4,h5,h6{
        font:22px/1.5em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#111
        }

    h2.title{
        margin:0 0 25px;/*  30 - 5px (line-height adjustment)  */
        }

    h2.title span{
        margin:0 0 0 15px;
        font-size:14px;
        color:#999
        }

    .large-title{
        text-align:center;
        font:200 38px/1.5em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif
        }

    .highlight{
        padding:6px 9px;
        background:#cfe7fb;
        border-radius:2px
        }

    button,
    input,
    textarea{
        -webkit-appearance:none;
        -moz-appearance:none;
        -o-appearance:none;
        appearance:none;
        border-radius:0
        }

    a.highlight{
        display:inline-block;
        padding:3px 9px;
        border-radius:2px
        }

    a.highlight:hover{
        background:#c7dff3
        }

    .action-bt a{
        display:inline-block;
        margin:0 15px 0 0;
        padding:2px 15px 0;
        text-transform:uppercase;
        font:12px/28px "Akkurat",Helvetica Neue,Helvetica,sans-serif;
        color:#1085e9;
        box-shadow:inset 0 0 0 1px #1085e9;
        border-radius:2px
        }

    .action-bt a:hover{
        color:#fff;
        background:#1085e9
        }

    .action-bt a:last-of-type{
        margin:0
        }

    .action-bt .gray{
        color:#999;
        background:transparent !important;
        box-shadow:inset 0 0 0 1px #bbb
        }

    .action-bt .gray:hover{
        color:#1085e9;
        box-shadow:inset 0 0 0 1px #1085e9
        }

    .action-bt .gold:hover{
        color:#b59e1f;
        box-shadow:inset 0 0 0 1px #b59e1f
        }

    /*  1.2 Typography Styling - END  */

    /*  1.3 Forms  */

    input,textarea{
        background:transparent;
        border:0;
        outline:none
        }

    /*  1.3 Forms - END  */

    /*  1.4 Slick Slider  */

    .slick-slider{
        display:block;
        position:relative;
        overflow:hidden;
        padding:0 !important;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
        -webkit-touch-callout:none;
        -khtml-user-select:none;
        -ms-touch-action:pan-y;
        touch-action:pan-y;
        -webkit-tap-highlight-color:transparent;
        opacity:0
        }

    .slick-slider.loaded{
        -webkit-animation:fadein .45s both;
        animation:fadein .45s both
        }

    .slick-slider .slick-list{
        display:block;
        position:relative;
        overflow:hidden;
        margin:0;
        padding:0
        }

    .slick-slider .slick-list:focus{
        outline:none
        }

    .slick-slider .slick-list.dragging{
        cursor:pointer;
        cursor:hand
        }

    .slick-slider .slick-list,
    .slick-slider .slick-list .slick-track{
        -webkit-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
        -o-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);
        }

    .slick-slider .slick-list .slick-track{
        position:relative;
        display:block;
        top:0;
        left:0
        }

    .slick-slider .slick-list .slick-track:after{
        clear:both
        }

    .slick-slide{
        float:left;
        height:100%;
        min-height:1px;
        list-style:none
        }

    .slick-slide img{
        display:block;
        width:100%;
        vertical-align:bottom
        }

    .slick-slide.slick-loading img{
        display:none
        }

    .slick-slide.dragging img{
        pointer-events:none
        }

    .slick-vertical .slick-slide{
        display:block;
        height:auto;
        border:1px solid transparent
        }

    /* Arrows */

    .slick-slider .slick-prev,
    .slick-slider .slick-next{
        position:absolute;
        display:block;
        width:45px;
        height:45px;
        margin:0;
        padding:0;
        text-align:center;
        font:13px/1em "zenicon";
        color:#fff;
        background:transparent;
        border:none;
        outline:none;
        cursor:pointer;
        z-index:10;
        opacity:.6
        }

    .slick-slider button.slick-prev{
        left:0
        }

    .slick-slider button.slick-next{
        right:0
        }

    /*  1.4 Slick Slider - END  */

/*  1.0 Settings - END  */

/*  2.0 Header  */

#tumblr-follow{
    position:fixed;
    top:1px;
    right:1px;
    width:270px;
    height:24px;
    border:none;
    outline:none;
    opacity:0;
    z-index:70
    }

#navigation{
    position:relative;
    width:100%;
    padding:20px 0;
    background:#fff;
    border-bottom:1px solid #eee;
    z-index:60
    }

#navigation .width{
    line-height:0
    }

#navigation #logo{
    posiiton:relative;
    display:inline-block;
    max-width:240px;
    height:40px
    }

#navigation #logo:after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0
    }

#navigation #logo object{
    display:inline-block;
    width:40px;
    height:40px;
    margin:0 15px 0 0;
    pointer-events:none
    }

#navigation #logo span{
    display:inline-block;
    height:40px;
    vertical-align:top;
    letter-spacing:-1px;
    font:33px/42px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
    color:#111
    }

#navigation #links{
    display:inline-block;
    float:right;
    vertical-align:middle;
    z-index:200
    }

#navigation #links a{
    margin:0 30px 0 0;
    font:700 14px/40px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
    color:#555
    }

#navigation #links a:last-of-type{
    margin:0
    }


#navigation #links a.active,
#navigation #links a:hover{
    color:#1085e9
    }

    #navigation #link_slide_button{
        display:none
        }

    #navigation #link_slide_button{
        position:absolute;
        width:20px;
        height:16px;
        top:12px;
        right:0;
        padding:0;
        border:none;
        background:transparent;
        outline:none
        }

    #navigation #link_slide_button .line{
        position:absolute;
        height:2px;
        width:20px;
        top:50%;
        margin:-1px auto 0;
        background:#383838
        }

    #navigation #link_slide_button .line:first-of-type{
        top:0;
        margin:0
        }

    #navigation #link_slide_button .line:last-of-type{
        top:auto;
        bottom:0
        }

        .links_slide #header #link_slide_button .line:first-of-type{
            -webkit-transform:rotate(-45deg) translate(-4px,6px);
            transform:rotate(-45deg) translate(-4px,6px)
            }

        .links_slide #header #link_slide_button .line:nth-of-type(2){
            opacity:0
            }

        .links_slide #header #link_slide_button .line:last-of-type{
            -webkit-transform:rotate(45deg) translate(-4px,-6px);
            transform:rotate(45deg) translate(-4px,-6px)
            }

#header .sub-section{
    padding:15px 0
    }

/*  2.0 Header - END  */

/*  3.0 Container  */

#cover{
    position:relative;
    width:100%;
    min-height:560px;
    overflow:hidden;
    background:url(./inc-img/cover-bg.jpg) center/cover no-repeat #111;
    border-bottom:1px solid #eee
    }

#cover #cover-overlay{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    background:#051a2a;
    pointer-events:none;
    opacity:.75;
    z-index:25
    }

#cover #cover-text{
    position:absolute;
    width:420px;
    left:0;
    top:50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    z-index:30
    }

#cover #cover-text h1{
    font:200 38px/1.5em "Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#fff
    }

#cover #cover-text h2{
    margin:20px 0 0;/*  10 (line-height adjustment) + 20 = 30  */
    }

#cover #cover-text h2 a{
    padding:0 0 6px;
    color:#fff;
    font:200 14px/1em "Helvetica Neue",Helvetica,Arial,sans-serif;
    border-bottom:2px solid rgba(255,255,255,0)
    }

#cover #cover-text h2 i{
    display:inline-block;
    margin:0 0 0 5px;
    vertical-align:.5px;
    font-size:12px;
    -webkit-transform:scale(.8,1);
    transform:scale(.8,1)
    }

#cover #cover-text h2 a:hover{
    border-bottom:2px solid #1085e9
    }

#cover #cover-item{
    position:relative;
    float:right;
    width:calc(100% - 480px);
    margin:60px 0 0;
    box-shadow:0 0 9px 6px rgba(0,0,0,.1);
    -webkit-animation:moveup .6s both;
    animation:moveup .6s both;
    z-index:30
    }

#window-bar{
    padding:0 15px;
    background:#d2d3d6;
    border-top-left-radius:7.5px;
    border-top-right-radius:7.5px
    }

#window-bar .dot{
    display:inline-block;
    width:10px;
    height:10px;
    margin:2px 5px 0 0;
    background:#8e9092;
    border-radius:100%
    }

#cover #cover-content{
    overflow:hidden;
    background:#111
    }

#cover #cover-content img{
    width:100%;
    opacity:0;
    -webkit-animation-duration:1.2s;
    animation-duraction:1.2s
    }

#cover #cover-content:hover img{
    -webkit-transform:translateY(-45px);
    transform:translateY(-45px)
    }

#cover #cover-content #cover-content-overlay{
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    top:0;
    z-index:35
    }

#cover #cover-content #cover-content-banner{
    position:absolute;
    display:block;
    width:100%;
    bottom:-60px;
    left:0;
    padding:0 10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:2px;
    font:14px/60px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
    color:#fff;
    background:#1085e9;
    opacity:0
    }

#cover #cover-content:hover #cover-content-banner{
    bottom:0
    }

#cover #cover-line-1{
    position:absolute;
    width:2px;
    height:100%;
    bottom:0;
    -webkit-transform:translate(40px,110%);
    transform:translate(40px,110%);
    border-left:2px dashed rgba(255,255,255,.3)
    }

#cover-line-2{
    position:absolute;
    width:2px;
    height:210px;
    -webkit-transform:translate(40px,-110%);
    transform:translate(40px,-110%);
    border-left:2px dashed rgba(0,0,0,.3)
    }

#container{
    margin:60px auto;
    padding:.1px 0
    }  

#container:after{
    content:"";
    display:block;
    height:0;
    clear:both
    }

#content{
    float:left;
    width:calc(100% - 360px)
    }

#content.full{
    float:none;
    width:100%;
    }

#sidebar{
    position:absolute;
    right:0;
    height:100%;
    width:300px;
    }

.stick.sticked{
    position:fixed
    }

.stick.sticked_bottom{
    position:absolute !important;
    top:auto !important;
    bottom:0 !important
    }

    /*  3.1 Homepage  */

    #container.homepage{
        margin:60px auto 0
        }

    .homepage #themes li{
        width:calc(50% - 15px)
        }

    .homepage #themes li:nth-of-type(even){
        margin:0 0 30px
        }

    #homepage-features{
        margin:60px 0;
        font-size:0
        }

    #homepage-features img{
        max-width:80px;
        margin:0 auto 15px
        }

    #homepage-features p{
        margin:10px 0 0;
        font:14px/1.8em "Helvetica Neue",Helvetica,Arial,sans-serif
        }

    #homepage-showcase .width{
        margin:60px auto
        }

    #homepage-showcase h2{
        margin:-10px auto
        }

    #homepage-showcase p{
        width:100%;
        max-width:600px;
        margin:26.5px auto;/*  line-height adjustment  */
        text-align:center;
        font:14px/1.5em "Helvetica Neue",Helvetica,Arial,sans-serif;
        color:#999
        }

    #homepage-showcase #homepage-showcase-list{
        overflow:hidden;
        margin:60px auto 0;
        font-size:0;
        pointer-events:none
        }

    #homepage-showcase #homepage-showcase-list li{
        display:inline-block;
        float:left;
        width:10%;
        padding:10%;
        background:#e2c086;
        box-shadow:0 0 0 1px #d0b074;
        opacity:0;
        -webkit-transform:translateX(60px);
        transform:translateX(60px)
        }

    /*  3.1 Homepage - END  */

    /*  3.2 Theme Index  */

    #themes-index-header{
        margin:0 auto 60px;
        text-align:center
        }

    #themes-index-header h1{
        margin:0 0 -10px;
        text-align:center
        }

    #themes-index-header p{
        width:100%;
        max-width:600px;
        margin:22.5px auto -3.5px;/*  line-height adjustment  */
        text-align:center;
        color:#999
        }

    #share{
        margin:30px 0 -15px;
        font-size:0;
        line-height:0;
        white-space:nowrap;
        list-style:none
        }

    #share li{
        display:inline-block;
        min-width:120px;
        text-align:center
        }

    #share li .share-button{
        position:relative;
        overflow:hidden;
        height:35px;
        font:14px/35px "Helvetica",Helvetica,Arial,sans-serif;
        color:#1085e9;
        border:1px solid #b7daf8
        }

    #share li:first-of-type .share-button{
        border-top-left-radius:2px;
        border-bottom-left-radius:2px
        }

    #share li:nth-of-type(2) .share-button{
        border-left:none !important;
        border-right:none !important
        }

    #share li:last-of-type .share-button{
        border-top-right-radius:2px;
        border-bottom-right-radius:2px
        }

    #share li a{
        position:absolute;
        display:block;
        width:100%;     
        top:0;
        left:0;
        font-size:18px
        }

    #share li a .icon-google{
        font-size:16px
        }

    #share li:hover a{
        top:-40px;
        opacity:0
        }

    #share li span{
        position:absolute;
        display:block;
        width:100%;
        bottom:-40px;
        opacity:0;
        text-align:center;
        text-transform:uppercase;
        letter-spacing:2px;
        font-size:9px;
        color:#fff
        }

    #share li:hover span{
        bottom:-2px;
        opacity:1
        }

    #share li span .fb-like{
        width:100%
        }

    #share li span .fb-like span{
        width:100% !important
        }

    #share li span .fb-like iframe{
        position:relative;
        margin:5px auto
        }

    #share li span .tw-share{
        margin:0 0 -7px
        }

    #share li span .gg-plus iframe{
        margin:0 0 -11px !important
        }

    #themes{
        margin:0 0 -30px;
        list-style:none;
        font-size:0
        }

    #themes li{
        position:relative;
        display:inline-block;
        vertical-align:top;
        width:calc(33.33% - 20px);
        margin:0 30px 30px 0;
        padding:15px;
        background:#f3f5f7;
        box-shadow:0 0 0 1px rgba(0,0,0,.1)
        }

    #themes li img{
        box-shadow:0 0 0 1px #eee
        }

    .theme-index #themes li:nth-of-type(3n){
        margin:0 0 30px
        }

    #themes li .theme-overlay{
        position:absolute;
        top:15px;
        width:calc(100% - 30px);
        height:calc(100% - 30px);
        background:#10121b;
        opacity:0;
        z-index:20
        }

    #themes li .theme-text{
        position:absolute;
        width:calc(100% - 30px);
        top:50%;
        text-align:center;
        color:#fff;
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
        opacity:0;
        pointer-events:none;
        z-index:25
        }

    #themes li .theme-text span{
        display:block;
        color:#fff
        }

    #themes li .theme-text .theme-name{
        text-transform:uppercase;
        letter-spacing:3px;
        font:18px/1em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif
        }

    #themes li .theme-text .theme-sd{
        text-transform:lowercase;
        margin:22px 0 -3.5px;
        font:14px/1.5em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#ddd;
        -webkit-transform:translateY(15px);
        transform:translateY(15px);
        }

    #themes li .theme-text .theme-sd.premium{
        text-transform:none;
        color:#b59e1f
        }

    #themes li:hover .theme-overlay{
        opacity:.95
        }

    #themes li:hover .theme-text{
        opacity:1
        }

    #themes li:hover .theme-text .theme-sd{
        -webkit-transform:translateY(0);
        transform:translateY(0);
        }

    #themes li img{
        width:100%
        }

    /*  3.2 Theme Index - END  */

    /*  3.3 Theme Single  */

    .theme-single #sidebar .promotion.half-page{
        margin:0 0 30px
        }

    #sidebar .text{
        margin:0 0 15px;
        text-transform:uppercase;
        font:12px/1em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#999
        }

    #sidebar #share{
        margin:0 0 30px
        }

    #sidebar #share li{
        min-width:100px
        }

        /*  3.3.1 Theme Header  */

        #theme-menu-margin{
            background:#111
            }

        #theme-menu{
            width:100%;
            padding:2.5px 0;
            background:rgba(0,0,0,.95);
            border-bottom:1px solid rgba(255,255,255,.15)
            }

        #theme-menu h1{
            display:inline-block;
            font:22px/50px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
            color:#fff
            }

        #theme-menu h1 span{
            margin:0 0 0 15px;
            font:14px/50px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
            color:#888
            }

        #theme-menu #theme_menu_slide_button{
            display:none;
            position:relative;
            float:right;
            width:18px;
            height:20px;
            margin:17px 0;
            padding:0;
            font-size:18px;
            line-height:20px;
            text-align:right;
            border:none;
            color:#fff;
            background:transparent;
            outline:none
            }

        #theme-menu #theme_menu_slide_button i{
            position:absolute;
            top:0;
            left:0
            }

            .theme_menu_slide #theme_menu_slide_button i{
                position:absolute;
                -webkit-transform:rotate(180deg);
                transform:rotate(180deg)
                }

        #theme-menu ul{
            float:right;
            list-style:none
            }

        #theme-menu li{
            display:inline-block;
            margin:0 0 0 30px
            }

        #theme-menu li:first-of-type{
            margin:0
            }

        #theme-menu li a{
            display:block;
            font:14px/50px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
            color:#bbb
            }

        #theme-menu li a:hover{
            color:#fff
            }

        #theme-menu li #install-theme-button{
            margin:10px 0;
            padding:2px 15px 0;
            line-height:28px;
            box-shadow:0 0 0 1px rgba(255,255,255,.3);
            border-radius:2px
            }

        #theme-menu li #install-theme-button:hover{
            color:#9fcef6;
            box-shadow:0 0 0 1px #1085e9
            }

            #theme-menu{
                z-index:50
                }

            #theme-menu.sticked{
                position:fixed;
                width:100%;
                top:-90px;
                left:0;
                -webkit-transition:.3s top cubic-bezier(.3,.73,.3,.74);
                transition:.3s top cubic-bezier(.3,.73,.3,.74)
                }

            #theme-menu.sticked.slidedown{
                top:0
                }

        #theme-header{
            position:relative;
            padding:1px 0 0;
            background:url(./inc-img/dot-repeat-light.png) center repeat #111;
            border-bottom:1px solid #eee
            }

        #theme-slider{
            height:375px;
            margin:30px 0 0;
            opacity:0
            }

            #theme-slider.loaded{
                height:auto;
                opacity:1
                }

        #theme-slider li{
            padding:0 0 0 30px
            }

        #theme-slider li img{
            width:100%;
            max-width:600px;
            border:1px solid rgba(255,255,255,.1);
            border-bottom:none !important
            }

            #theme-slider-loader-wrap{
                position:absolute;
                height:100%;
                width:100%;
                top:0;
                left:0;
                pointer-events:none
                }

            #theme-slider-loader{
                position:absolute;
                width:calc(100% - 200px);
                top:50%;
                left:50%;
                text-align:center;
                color:#fff;
                transform:translate(-50%,-50%)
                }

            #theme-slider-loader label{
                display:inline-block;
                margin:0 5px;
                font-size:24px;
                opacity:0;
                -webkit-animation:css_loader 3s infinite ease-in-out;
                animation:css_loader 3s infinite ease-in-out
                }

            @keyframes css_loader{
                0%{
                    opacity:0;
                    transform:translateX(-240px)
                }
                33%,66%{
                    opacity:1;
                    transform:translateX(0)
                }
                100%{
                    opacity:0;
                    transform:translateX(240px)
                }
            }

            @-webkit-keyframes css_loader{
                0%{
                    opacity:0;
                    -webkit-transform:translateX(-240px)
                }
                33%,66%{
                    opacity:1;
                    -webkit-transform:translateX(0)
                }
                100%{
                    opacity:0;
                    -webkit-transform:translateX(240px)
                }
            }

            #theme-slider-loader label:nth-of-type(3){
                -webkit-animation-delay:.3s;
                animation-delay:.3s
                }

            #theme-slider-loader label:nth-of-type(2){
                -webkit-animation-delay:.6s;
                animation-delay:.6s
                }

            #theme-slider-loader label:first-of-type{
                -webkit-animation-delay:.9s;
                animation-delay:.9s
                }


        /*  3.3.1 Theme Header - END  */

        /*  3.3.2 Theme Content  */

        .theme-single #content h2{
            margin:0 0 30px;
            font:22px/1em "Akkurat",Helvetica Neue,Helvetica,sans-serif
            }

        .theme-single #content p,
        .theme-single #content li{
            font:14px/1.8em "Helvetica Neue",Helvetica,sans-serif
            }

        #theme-preview{
            margin:30px auto 60px;
            padding:30px 0;
            border-top:1px solid #eee;
            border-bottom:1px solid #eee
            }

        #theme-preview h2{
            display:inline-block;
            margin:0 15px 0 0 !important;
            font:700 14px/1.8em "Akkurat",Helvetica Neue,Helvetica,sans-serif !important
            }

        #theme-preview .action-bt{
            display:inline-block;
            list-style:none
            }

        #theme-preview .action-bt li{
            display:inline-block;
            margin:0 15px 0 0;
            text-align:center
            }

        #theme-preview .action-bt li:last-of-type{
            margin:0
            }

        #theme-preview .action-bt li a.active{
            opacity:.5;
            pointer-events:none
            }

        #theme-features{
            margin:0 0 60px;
            font-size:0
            }

        #theme-features .col{
            display:inline-block;
            vertical-align:top;
            width:calc(33% - 20px);
            margin:0 30px 27px 0;/*  lineheight adjustment  */
            font:14px/1.8em "Helvetica Neue",Helvetica,sans-serif
            }

        #theme-features .col:nth-of-type(3n){
            margin:0 0 27px;/*  lineheight adjustment  */
            }

        #theme-features h3{
            display:inline;
            font:700 14px/1.5em "Akkurat",Helvetica Neue,Helvetica,sans-serif
            }

        #theme-features h3:after{
            content:".";
            }

        #theme-features p{
            display:inline
            }

        #theme-customizations{
            margin:0 0 60px
            }

        #theme-customizations #table{
            margin:0 0 30px;
            font-size:0;
            border:1px solid #eee
            }

        #theme-customizations #table .row{
            list-style:none;
            border-bottom:1px solid #eee
            }

        #theme-customizations #table .row:last-of-type{
            border-bottom:none
            }

        #theme-customizations .row h3{
            display:inline-block;
            vertical-align:top;
            padding:27px 30px;
            margin:0;
            width:25%;
            font:700 14px/1.5em "Akkurat",Helvetica Neue,Helvetica,sans-serif
            }

        #theme-customizations .options{
            display:inline-block;
            width:75%;
            padding:25px 30px;
            border-left:1px solid #eee
            }

        #theme-customizations .options li{
            display:inline-block;
            list-style:none
            }

        #theme-customizations .options li:after{
            content:",";
            margin:0 5px 0 0
            }

        #theme-customizations .options li:last-of-type::after{
            content:""
            }

        #theme-customizations #further-customize{
            padding:15px 30px
            }

        #theme-customizations #further-customize p{
            margin:0
            }

        /*  3.3.2 Theme Content - END  */

    #more-themes{
        // overflow-x:hidden
        }

    #more-themes h2{
        text-align:center
        }

    #more-themes p{
        width:100%;
        max-width:600px;
        margin:22.5px auto 57px;/*  line-height adjustment  */
        text-align:center;
        font:14px/1.5em "Helvetica Neue",Helvetica,Arial,sans-serif;
        color:#999
        }

    #more-themes p i{
        margin:0 0 0 5px;
        vertical-align:1px;
        font-size:8px
        }

    #more-themes p a{
        color:#999
        }

    #more-themes p a:hover{
        color:#1085e9
        }

    #more-themes li{
        padding:0;
        background:transparent;
        box-shadow:none
        }

    #more-themes li:nth-of-type(3n){
        margin:0 0 30px
        }

    #more-themes li img{
        padding:15px;
        background:#fff;
        box-shadow:0 3px 6px 1px transparent
        }

    #more-themes li:hover img{
        box-shadow:0 6px 12px 1px rgba(0,0,0,.1);
        }

    #more-themes li .theme-overlay{
        top:0;
        width:100%;
        height:100%;
        opacity:0 !important
        }

    #more-themes li .theme-text{
        position:relative;
        width:100%;
        top:0;
        margin:15px 0 0;
        opacity:1;
        -webkit-transform:none;
        transform:none;
        }

    #more-themes li .theme-text span{
        display:inline
        }

    #more-themes li .theme-text .theme-name{
        letter-spacing:0;
        font:14px/1em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#111
        }

    #more-themes li .theme-text .theme-sd{
        display:inline;
        margin:3px 0 -3.5px;
        color:#999;
        -webkit-transform:none;
        transform:none;
        }

    #more-themes li .theme-text .theme-sd:before{
        content:"";
        margin:0 6px
        }

    #premium-services{
        overflow-x:hidden
        }

    #premium-services .width{
        margin:60px auto
        }

    #premium-services h2{
        margin:-10px auto
        }

    #premium-services p{
        width:100%;
        max-width:600px;
        margin:26.5px auto;/*  line-height adjustment  */
        text-align:center;
        font:14px/1.5em "Helvetica Neue",Helvetica,Arial,sans-serif;
        color:#999
        }


    /*  3.3 Theme Single - END  */

    /*  3.4 Theme Preview  */

    #container.theme-preview{
        margin:auto;
        padding:60px 0
        }

    .theme-preview .promotion{
        margin:60px auto 0
        }

    #preview-info{
        margin:0 auto 30px
        }

    #preview-info #theme-preview{
        display:inline-block;
        margin:0;
        padding:0;
        border-top:none;
        border-bottom:none
        }

    #preview-info #theme-preview .action-bt{
        float:none
        }

    #preview-info .action-bt{
        display:inline-block;
        float:right
        }

    #preview-info .cta-full{
        margin:30px auto
        }

    #preview-info .cta-full i{
        margin:0 0 0 3px;
        vertical-align:2.5px;
        font-size:8px
        }

    #frame{
        position:relative;
        overflow:hidden;
        background:#111;
        box-shadow:0 0 9px 6px rgba(0,0,0,.03);
        border-top-left-radius:7.5px;
        border-top-right-radius:7.5px
        }

    #frame #frame-loader{
        position:absolute;
        top:50%;
        left:50%;
        margin:-22.5px 0 0 -22.5px;
        font-size:10px;
        text-indent:-9999em;
        border-top:5px solid rgba(255,255,255,.3);
        border-right:5px solid rgba(255,255,255,.3);
        border-bottom:5px solid rgba(255,255,255,.3);
        border-left:5px solid rgba(255,255,255,.9);
        -webkit-transform:translateZ(0);
        -ms-transform:translateZ(0);
        transform:translateZ(0);
        -webkit-animation:rotate .45s infinite linear;
        animation:rotate .45s infinite linear
        }

    #frame-loader,
    #frame-loader:after{
        border-radius:50%;
        width:45px;
        height:45px
        }

    .frame_loaded #frame #frame-bar{
        pointer-events:auto
        }

    .frame_loaded #frame #frame-loader{
        opacity:0
        }

    .frame_loaded #frame #frame-preview{
        opacity:1
        }

        .preview_full #frame-bar{
            position:fixed;
            top:0;
            left:0;
            z-index:155
            }

        .preview_full #frame-responsive button{
            color:#555 !important;
            cursor:not-allowed
            }

        .preview_full #resize-full .icon-resize-full{
            display:none
            }

        .preview_full #resize-full .icon-resize-down{
            display:block !important
            }

        .preview_full #frame-preview{
            position:fixed;
            top:45px;
            left:0;
            width:100%;
            z-index:150
            }

    #frame #frame-preview{
        display:block;
        width:100%;
        height:660px;
        margin:auto;
        opacity:0;
        border:none;
        -webkit-transition:opacity .6s .6s,width .3s;
        transition:opacity .6s .6s,width .3s
        }

    #frame #mobile-frame-preview{
        display:none;
        padding:120px 5%;
        text-align:center
        }

    #frame #mobile-frame-preview h3{
        margin:0 0 24.5px;
        font:22px/1.5em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#fff
        }

    #frame #frame-bar{
        width:100%;
        font-size:0;
        padding:0 30px;
        background:rgba(0,0,0,.9);
        border-bottom:1px solid rgba(255,255,255,.15);
        pointer-events:none
        }

    #frame #frame-bar h1{
        display:inline-block;
        text-transform:uppercase;
        letter-spacing:2px;
        font:12px/45px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#999
        }

    #frame #frame-bar button{
        display:inline-block;
        width:45px;
        padding:0;
        text-align:center;
        font:16px/45px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#999;
        background:transparent;
        border:none;
        outline:none
        }

    #frame #frame-bar button.active,
    #frame #frame-bar button:hover{
        color:#fff
        }

    #frame #frame-responsive{
        display:inline-block;
        position:absolute;
        left:50%;
        -webkit-transform:translateX(-50%);
        transform:translateX(-50%)
        }

    #frame #frame-responsive .icon-desktop{
        font-size:14px
        }

    #frame #frame-responsive .icon-mobile{
        font-size:18px
        }

    #frame #resize-full{
        float:right;
        text-align:right !important
        }

    #frame #resize-full .icon-resize-down{
        display:none
        }

    /*  3.4 Theme Preview - END  */

    /*  3.5 Theme Install  */

    .theme-install #sidebar #fb-bt{
        height:70px;
        overflow:hidden;
        margin:0 0 25px
        }

    #install-info{
        margin:0 0 30px
        }

    #install-info p{
        display:inline-block;
        float:right;
        margin:2px 0 0
        }

    #install-info p a{
        text-decoration:underline;
        color:#999
        }

    #install-info .action-bt{
        display:inline-block
        }

    #install-info .cta-full{
        margin:30px auto
        }

    #install-info .cta-full i{
        margin:0 0 0 3px;
        vertical-align:2.5px;
        font-size:8px
        }

    #install-code{
        position:relative
        }

    #install-code:after{
        content:"";
        display:block;
        position:absolute;
        width:100%;
        height:90px;
        bottom:0;
        left:0;
        background:linear-gradient(to top,rgba(25,29,31,1) 0%,rgba(25,29,31,0) 100%);
        pointer-events:none
        }

    #install-bar{
        width:100%;
        font-size:0;
        padding:10px 30px;
        font:200 14px/1.8em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#fff;
        background:rgba(0,0,0,.9);
        border-bottom:1px solid rgba(255,255,255,.15);
        pointer-events:none
        }

    #install-bar h1{
        display:inline-block;
        text-transform:uppercase;
        letter-spacing:2px;
        font:12px/45px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#999
        }

    #install-code xmp{
        width:100%;
        max-height:660px;
        overflow:hidden;
        padding:30px;
        margin:0 0 -5px;
        white-space:pre-wrap;
        font:14px "Courier New",monotype;
        color:#9cadba;
        background:#191d1f;
        box-shadow:inset 0 0 12px 6px rgba(0,0,0,.3);
        resize:none
        }

    #install-code xmp::selection{background:#bbb}
    #install-code xmp::-webkit-selection{background:#bbb}
    #install-code xmp::-moz-selection{background:#bbb}

    .theme-install .block{
        margin:30px 0 0
        }

    /*  3.5 Theme Install - END  */

    /*  3.6 Support Page  */

    #support h1{
        margin:0 0 -10px;
        text-align:center
        }

    #support #support-info{
        width:100%;
        max-width:600px;
        margin:22.5px auto -3.5px;/*  line-height adjustment  */
        text-align:center;
        font:14px/1.5em "Helvetica Neue",Helvetica,Arial,sans-serif;
        color:#999
        }

    #support #support-info a{
        color:#999
        }

    #support #support-info a:hover{
        color:#1085e9
        }

        /*  3.6.1 FAQ List  */

        #faq-list{
            max-width:750px;
            margin:60px auto 0
            }

        #faq-list > li{
            position:relative;
            list-style:none;
            border-top:1px solid #eee
            }

        #faq-list > li:last-of-type{
            border-bottom:1px solid #eee
            }

        #faq-list .faq_close{
            position:absolute;
            top:15px;
            right:0;
            padding:0;
            background:transparent;
            border:none;
            outline:none;
            pointer-events:none
            }

        #faq-list .faq_close span{
            display:block;
            width:22px;
            height:22px;
            font:200 22px/1em "Helvetica Neue",Helvetica,sans-serif;
            color:#999;
            -webkit-transform-origin:11px 13px;
            transform-origin:11px 13px
            }

            #faq-list li.faq_slide .faq_close span{
                -ms-transform:rotate(-135deg); /* IE 9 */
                -webkit-transform:rotate(-135deg);
                transform:rotate(-135deg)
                }

        #faq-list h2{
            padding:15px 30px 15px 0;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            font:22px/1em "Akkurat",Helvetica Neue,Helvetica,sans-serif;
            cursor:pointer
            }

        #faq-list h2:hover,
        #faq-list li.faq_slide h2{
            color:#1085e9
            }

        #faq-list .faq-content{
            display:none;
            max-width:600px;
            padding:0 0 15px
            }

        #faq-list .faq-content ol,
        #faq-list .faq-content ul{
            margin:15px 0 0 16px
            }

        #faq-list .faq-content img{
            margin:15px 0
            }

        /*  3.6.1 FAQ List - END  */

        /*  3.6.2 Contact Form  */

        #contact_slide{
            display:block;
            max-width:300px;
            margin:60px auto 0;
            padding:15px;
            text-align:center;
            font:22px/1em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
            color:#555;
            box-shadow:inset 0 0 0 1px #ddd;
            border-radius:2px
            }

        #contact_slide div{
            margin:0 0 10px;
            font:14px/1em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
            color:#999
            }

        #contact_slide:hover{
            box-shadow:0 0 0 1px #1085e9
            }

        #contact{
            position:fixed;
            width:100%;
            height:100%;
            top:0;
            left:0;
            opacity:0;
            pointer-events:none;
            z-index:150
            }

        #contact.fadein{
            opacity:1;
            pointer-events:auto
            }

        #contact #contact_close{
            position:absolute;
            top:15px;
            right:15px;
            width:25px;
            height:20px;
            padding:0;
            background:transparent;
            border:none;
            outline:none;
            z-index:160
            }

        #contact #contact_close hr{
            position:absolute;
            height:2px;
            width:20px;
            background:#fff;
            border:none
            }

        #contact #contact_close hr:first-of-type{
            -webkit-transform:rotate(-45deg);
            transform:rotate(-45deg)
            }

        #contact #contact_close hr:nth-of-type(2){
            -webkit-transform:rotate(45deg);
            transform:rotate(45deg)
            }

        #contact #contact-form.fadeup form{
            opacity:1;
            pointer-events:auto;
            -webkit-transform:translateY(0);
            transform:translateY(0)
            }

        #contact #contact-form{
            position:absolute;
            max-width:600px !important;
            left:50%;
            margin:60px auto;
            padding:20px 0 0 ;
            font-size:0;
            -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
            z-index:160
            }

        #contact #contact-form.center{
            top:50%;
            margin:0;
            -webkit-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%)
            }

        #contact #contact-form form{
            opacity:0;
            pointer-events:none;
            -webkit-transform:translateY(60px);
            transform:translateY(60px);
            }

        #contact #contact-form p{
            position:relative;
            margin:0 0 39px
            }

        #contact #contact-form .col-2{
            display:inline-block;
            width:calc(50% - 7.5px);
            margin:0 15px 39px 0
            }

        #contact #contact-form .col-2:nth-of-type(2n){
            margin:0 0 39px
            }

        #contact #contact-form label{
            position:absolute;
            top:-20px;
            left:0;
            text-transform:uppercase;
            font:12px/1em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
            color:#fff;
            pointer-events:none;
            }

        #contact #contact-form .required label:after{
            content:"*";
            position:absolute;
            top:-3px;
            margin:0 0 0 3px;
            font:14px/1em "Helvetica Neue",Helvetica,sans-serif;
            opacity:.6
            }

        #contact #contact-form input[type="text"],
        #contact #contact-form input[type="email"],
        #contact #contact-form input[type="url"],
        #contact #contact-form textarea{
            display:block;
            width:100%;
            padding:9px;
            font:14px/1em "Helvetica Neue",Helvetica,Arial,sans-serif;
            color:#fff;
            box-shadow:0 0 0 1px rgba(255,255,255,.1);
            background:rgba(255,255,255,.06);
            border-radius:1px
            }

        #contact #contact-form textarea{
            height:180px;
            line-height:1.8em;
            resize:vertical
            }

        #contact #contact-form input[type="submit"]{
            padding:0 15px;
            font:14px/40px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
            background:#fff;
            border-radius:2px
            }

        #contact #contact-form .ajax-loader{
            display:none !important
            }

        #contact #contact-form .wpcf7-not-valid-tip{
            text-transform:uppercase;
            font:10px/35px "Akkurat Mono",Helvetica Neue,Helvetica,Arial,sans-serif;
            color:#eb6363
            }

        #contact #contact-form .wpcf7-response-output{
            position:absolute;
            bottom:0;
            right:0;
            margin:0;
            padding:0;
            font:12px/40px "Akkurat Mono",Helvetica Neue,Helvetica,Arial,sans-serif;
            color:#bbb;
            border:none !important
            }

        #contact #contact-overlay{
            position:absolute;
            width:100%;
            height:100%;
            top:0;
            left:0;
            background:rgba(0,0,0,.96);
            z-index:155
            }

        /*  3.6.2 Contact Form - END  */

    /*  3.6 Support Page - END  */

    /*  3.7 Premium Services  */

    #service-selection{
        position:relative;
        padding:120px 0;
        background:#f9f3eb;
        border-bottom:1px solid #eee;
        opacity:0
        }

    #service-selection h1{
        position:relative;
        margin:0 0 50px;// 60 - 10 (line-height) = 50
        text-align:center;
        z-index:20
        }

    #service-selection #service-list{
        position:relative;
        font-size:0;
        z-index:20
        }

    #service-selection #service-list li{
        position:relative;
        display:inline-block;
        width:calc(33.3% - 20px);
        max-width:600px;
        margin:0 30px 0 0;
        padding:60px;
        text-align:center;
        list-style:none;
        background:#fff;
        box-shadow:0 0 0 1px #ddd;
        border-radius:1px;
        cursor:pointer
        }

    #service-selection #service-list li:hover{
        box-shadow:0 0 0 1px #1085e9    
        }

    #service-selection #service-list li:nth-of-type(3){
        margin:0
        }

    #service-selection #service-list li .price{
        font:14px/1em "Helvetica Neue",Helvetica,sans-serif;
        color:#999
        }

    #service-selection #service-list li h2{
        margin:30px 0 25px;
        font:22px/1em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif
        }

    #service-selection #service-list li p{
        font:14px/1.8em "Helvetica Neue",Helvetica,sans-serif
        }

    #service-selection #service-list li a{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        z-index:25
        }

    #service-selection #particles{
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        opacity:0;
        -webkit-animation-delay:.3s;
        animation-delay:.3s;
        z-index:10;
        pointer-events:none
        }

    #container.premium-services{
        margin:120px auto
        }

    #service-details .service-detail{
        padding:60px 0;
        border-bottom:1px solid #eee
        }

    #service-details .service-detail:first-of-type{
        padding:0 0 60px
        }

    #service-details .service-detail:last-of-type{
        padding:60px 0 0;
        border:none
        }

    #service-details .service-detail:after{
        content:"";
        display:block;
        height:0;
        clear:both
        }

    #service-details .title{
        float:left;
        width:calc(33.3% - 15px)
        }

    #service-details .title h2{
        font:26px/1em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif
        }

    #service-remove-install-buttons .title h2{color:#156299}
    #service-theme-customization .title h2{color:#318b99}
    #service-build-a-custom-theme .title h2{color:#39ae9d}

    #service-details .title .price{
        margin:15px 0 0;
        line-height:1em;
        color:#999
        }

    #service-details .content{
        float:right;
        width:calc(66.6% - 15px);
        margin:-5px 0
        }

    #service-details .content p,
    #service-details .content ol,
    #service-details .content ul{
        margin:0 0 25px
        }

    #service-details .content p:last-of-type{
        margin:0
        }

    #service-details .content ol,
    #service-details .content ul{
        list-style-position:inside
        }

    #service-details .image{
        margin:30px 0 0;
        padding:9px;
        background:#f2f2f2
        }

    /*  3.7 Premium Services - END  */

    /*  3.8 About Page  */

    .section{
        position:relative;
        z-index:20
        }

    .about .section .width{
        height:100%
        }

    #section-indicator{
        position:fixed;
        top:50%;
        right:30px;
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
        z-index:30
        }

    #section-indicator hr{
        width:20px;
        height:2px;
        margin:7.5px 0;
        background:rgba(255,255,255,.5);
        border:none;
        outline:none
        }

    #section-indicator hr.active{
        background:rgba(255,255,255,1)
        }

    .about .section .text-wrapper{
        position:absolute;
        top:50%;
        left:50%;
        width:100%;
        max-width:600px;
        text-align:center;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%)
        }

    .about #section-1 .text-wrapper{
        margin:-70px 0 0
        }

    .about .section h1,
    .about .section h2{
        margin:-9.2px 0 50.8px;
        font:200 46px/1.4em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#fff
        }

    .about .section .text-wrapper p{
        margin:-7px 0 30px;
        font:200 16px/1.8em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#fff
        }

    .about .section .text-wrapper p:last-of-type{
        margin:-7px 0 0
        }

    .about .section .text-wrapper p a{
        color:#fff;
        border-bottom:2px solid rgba(255,255,255,.3)
        }

    .about .section .text-wrapper p a:hover{
        color:#70b6f2;
        border-bottom:2px solid rgba(255,255,255,.3)
        }

    .about .section .text-wrapper h1,
    .about .section .text-wrapper h2,
    .about .section .text-wrapper p{
        -webkit-transform:translateY(60px);
        transform:translateY(60px);
        opacity:0
        }

    .about .section .text-wrapper h1.css_fadeup,
    .about .section .text-wrapper h2.css_fadeup,
    .about .section .text-wrapper p.css_fadeup{
        -webkit-animation:fadeup .6s both;
        animation:fadeup .6s both
        }

    #backgrounds{
        position:fixed;
        width:100%;
        height:100%;
        top:0;
        z-index:10
        }

    #backgrounds .bg{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:#112336 center/cover no-repeat;
        opacity:0
        }

    #backgrounds .bg img{
        position:absolute;
        min-width:100%;
        min-height:100%;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
        opacity:0
        }

    #backgrounds .overlay{
        background:rgba(5,23,40,.9);
        z-index:19
        }

    #backgrounds .bg-1{z-index:15}
    #backgrounds .bg-2{z-index:14}
    #backgrounds .bg-3{z-index:13}
    #backgrounds .bg-4{z-index:12}
    #backgrounds .bg-5{z-index:11}

    /*  3.8 About Page - END  */

/*  3.0 Container - END  */

/*  4.0 Blog  */

    /*  4.1 Blog Index  */

    #blog article{
        margin:0 auto 120px
        }

    #blog article:last-of-type{
        margin:auto
        }

    #blog article .title{
        margin:-10px auto;
        text-align:center;
        font:38px/1.5em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif
        }

    #blog article .title a{
        color:#111
        }

    #blog article time{
        display:block;
        margin:15px 0 30px;
        text-align:center;
        font:18px/1.5em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#999
        } 

    #blog article time a{
        color:#999
        }

    #blog article .featured-image{
        width:90%;
        max-width:1400px;
        margin:auto
        }

    #blog article .featured-image img{
        width:100%
        }

    #blog article .excerpt{
        max-width:600px;
        margin:54px auto 0;
        font:16px/1.8em "Helvetica Neue",Helvetica,sans-serif
        }

    #blog article .excerpt .read-more{
        display:inline-block;
        margin:24px auto 0;
        padding:2px 10px 0 15px;
        text-transform:uppercase;
        font:14px/33px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#999;
        box-shadow:inset 0 0 0 1px #ddd;
        border-radius:2px
        }

    #blog article .excerpt .read-more:hover{
        color:#1085e9;
        box-shadow:inset 0 0 0 1px #1085e9
        }

    /*  4.1 Blog Index - END  */

    /*  4.2 Blog Single  */

    #post-content{
        max-width:600px;
        margin:24px auto 0;
        font:16px/1.8em "Helvetica Neue",Helvetica,sans-serif        
        }

    #post-content code{
        padding:2px 4px 3px 6px;
        font:14px/1.8em "Monaco",Courier New,Courier,monospace;
        background:#f2f2f2;
        box-shadow:0 0 0 1px #ddd;
        border-radius:1px
        }

    #post-content pre{
        overflow:visible;
        }

    #post-content pre code{
        display:block;
        padding:30px
        }

    #post-content h2,
    #post-content h3,
    #post-content h4,
    #post-content h5,
    #post-content h6,
    #post-content p,
    #post-content img,
    #post-content ul,
    #post-content ol,
    #post-content pre,
    #post-content iframe{
        margin:0 0 30px
        }

    #post-content ul,
    #post-content ol{
        padding:0 0 0 18px
        }

    #post-content a{
        padding:0 0 1px;
        border-bottom:2px solid transparent
        }

    #post-content a:hover{
        border-bottom:2px solid #70b6f2
        }

    #post-footer{
        max-width:600px;
        margin:60px auto 0
        }

    #post-footer h3{
        margin:0 0 9px;
        text-transform:uppercase;
        font-size:12px;
        color:#999
        }

    #post-footer #share{
        margin:0 0 30px
        }

    #post-footer #read-more li{
        position:relative;
        list-style:none;
        border-top:1px solid #eee
        }

    #post-footer #read-more li:last-of-type{
        border-bottom:1px solid #eee
        }

    #post-footer #read-more li h4{
        font:18px/45px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif
        }

    #post-footer #read-more li h4 a{
        display:block;
        padding:0 75px 0 0;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        color:#555
        }

    #post-footer #read-more li:hover h4 a{
        color:#1085e9
        }

    #post-footer #read-more li:hover .read-more-date{
        color:#1085e9
        }

    #post-footer #read-more li .read-more-date{
        position:absolute;
        top:0;
        right:0;
        font:14px/45px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#999;
        pointer-events:none
        }

    /*  4.2 Blog Single - END  */

/*  4.0 Blog - END  */

/*  5.0 Miscellaneous  */

#container.center_element{
    margin:auto;
    background:url(./inc-img/dot-repeat-dark.png) center repeat
    }

#center{
    width:90%;
    max-width:360px;
    margin:60px auto;
    text-align:center;
    opacity:0;
    }

#center.center{
    position:absolute;
    top:50%;
    left:50%;
    margin:0;
    -webkit-transform:translate(-50%,-65%);
    transform:translate(-50%,-65%)
    }

#center #logomark{
    display:block;
    max-width:90px;
    margin:0 auto 30px
    }

#center #logomark object{
    max-width:90px;
    pointer-events:none
    }

#center h1{
    margin:-5px auto;
    font:22px/1.5em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
    }

    /*  5.1 Newsletter  */

    #center p{
        color:#999
        }

    #center form{
        position:relative;
        margin:30px 0 0
        }

    #center input{
        display:block;
        width:100%
        }

    #center #mce-success-response{
        position:absolute;
        bottom:-90px;
        /*letter-spacing:-.02em;*/
        font:14px/1.8em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#9b9
        }

    #center input[type="email"]{
        margin:0 0 9px;
        padding:7px 15px 8px;
        text-align:center;
        font:14px/30px "Helvetica Neue",Helvetica,sans-serif;
        background:#fff;
        box-shadow:inset 0 0 0 1px #eee
        }

    #center input[type="email"]:focus{
        box-shadow:inset 0 0 0 1px #70b6f2
        }

    #center input[type="email"].mce_inline_error{
        box-shadow:inset 0 0 0 1px #f77
        }

    #center input[type="submit"]{
        font:14px/38px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#fff;
        background:#1085e9;
        box-shadow:0 0 0 1px #1085e9
        }

    #center input[type="submit"]:hover{
        background:#32a7fb
        }

    .newsletter #center #browse-themes{
        display:inline-block;
        margin:30px 0 0;
        line-height:1em;
        color:#999
        }

    .newsletter #center #browse-themes i{
        margin:0 0 0 3px;
        vertical-align:1.5px;
        font-size:8px
        }

    .newsletter #center #browse-themes:hover{
        color:#1085e9
        }

    /*  5.1 Newsletter - END  */

    /*  5.2 404 Error  */

    .error404 #center .cta{
        margin:30px 0 0;
        letter-spacing:1px;
        font:12px/48px "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
        color:#fff;
        background:#1085e9;
        box-shadow:0 0 0 1px #1085e9
        }

    .error404 #center .cta:hover{
        background:#32a7fb !important
        }

    .error404 #center .cta i{
        margin:0 0 0 3px;
        vertical-align:2px;
        font-size:8px
        }


    /*  5.2 404 Error - END  */

/*  5.0 Miscellaneous - END  */

/*  6.0 Footer  */

.banner{
    position:fixed;
    width:100%;
    padding:20px 0;
    background:#fff;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
    color:#555;
    z-index:100
    }

.banner .banner_link{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:110
    }

.banner .close_banner{
    position:absolute;
    right:0;
    padding:0;
    font-size:14px;
    color:#999;
    background:transparent;
    border:none;
    outline:none;
    z-index:120
    }

.banner .close_banner:hover{
    color:#111
    }

    .banner.has_link{
        color:#fff;
        background:#1085e9;
        border-top:none;
        border-bottom:none
        }

    .banner.has_link:hover{
        background:#32a7fb
        }

    .banner.has_link .close_banner{
        color:#fff
        }

#top-banner{
    top:-80px
    }

    .top_banner #top-banner{
        top:0
        }

    .top_banner #header{
        margin:65px 0 0
        }

#bottom-banner{
    bottom:-80px
    }

#bottom-banner a:hover{
    text-decoration:underline
    }

    .bottom_banner #footer{
        margin:0 0 65px
        }

    .bottom_banner #bottom-banner{
        bottom:0
        }

#footer{
    position:relative;
    padding:30px 0;
    background:#eee;
    z-index:50
    }

#footer .width{
    line-height:0
    }

#footer hr{
    height:1px;
    margin:30px 0;
    background:#e3e3e3;
    border:none
    }

#footer #newsletter-link{
    color:#bbb
    }

#footer #newsletter-link:hover{
    color:#1085e9
    }

#footer #newsletter-link i{
    font-size:12px
    }

#footer #newsletter-link:hover i{
    margin:0 0 0 15px;
    color:#bbb;
    opacity:.45
    }

#footer .action-bt{
    position:absolute;
    top:-9px;
    right:0
    }

#footer h4{
    font:14px/1em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif
    }

#footer #footer-navigation{
    display:inline-block;
    line-height:0
    }

#footer #footer-navigation li{
    display:inline-block;
    margin:0 30px 0 0
    }

#footer #footer-navigation li:last-of-type{
    margin:0
    }

#footer #footer-navigation a{
    font:14px/1em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
    color:#999
    }

#footer ul a:hover{
    color:#555
    }

#footer #credit{
    float:right;
    vertical-align:middle
    }

#footer #credit h4{
    display:inline-block;
    font:200 14px/1em "Akkurat",Helvetica Neue,Helvetica,Arial,sans-serif;
    color:#555
    }

#footer #credit a{
    color:#555
    }

#footer #credit a:hover{
    color:#409ded
    }

#footer #credit #footer-logo{
    display:inline-block;
    vertical-align:top
    }

#footer #credit #footer-logo object{
    margin:0 0 0 10px;
    height:14px
    }

#counter{
    position:fixed;
    bottom:0;
    left:0;
    opacity:0;
    z-index:60
    }

/*  6.0 Footer - END  */

/*  7.0 Animation  */

@-webkit-keyframes fadein{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}

@keyframes fadein{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}

.css_fadein{
    opacity:1;
    pointer-events:auto;
    -webkit-animation:fadein .3s both;
    animation:fadein .3s both
    }

@-webkit-keyframes fadeup{
    0%{
        opacity:0;
        -webkit-transform:translateY(60px)
    }
    100%{
        opacity:1;
        -webkit-transform:translateY(0)
    }
}

@keyframes fadeup{
    0%{
        opacity:0;
        transform:translateY(60px)
    }
    100%{
        opacity:1;
        transform:translateY(0)
    }
}

.css_fadeup{
    -webkit-animation:fadeup .6s both;
    animation:fadeup .6s both
    }


@-webkit-keyframes moveup{
    0%{
        -webkit-transform:translateY(60px)
    }
    100%{
        -webkit-transform:translateY(0)
    }
}

@keyframes moveup{
    0%{
        transform:translateY(60px)
    }
    100%{
        transform:translateY(0)
    }
}

@-webkit-keyframes fadedown{
    0%{
        opacity:1;
        -webkit-transform:translateY(0)
    }
    100%{
        opacity:0;
        -webkit-transform:translateY(60px)
    }
}

@keyframes fadedown{
    0%{
        opacity:1;
        transform:translateY(0)
    }
    100%{
        opacity:0;
        transform:translateY(60px)
    }
}

.css_fadedown{
    -webkit-animation:fadedown 1.2s both;
    animation:fadedown 1.2s both
    }

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

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

/*  7.0 Animation - END  */

/*  8.0 Responsive  */

    /*  in /inc-css/responsive.css  */

/*  8.0 Responsive - END  */

/*  9.0 Advertisement  */

    /*  in /inc-css/advertisement.css  */

/*  9.0 Advertisement  */

/*  10.0 A/B Testings  */

    /*  A/B testing for social icons  */


    @media screen and (min-width:600px){
        #share li a{
            opacity:0;
            pointer-events:none
            }

        #share li span{
            bottom:-2px;
            opacity:1
            }
        }

/*  10.0 A/B Testings