/*

Theme Name: Surface
Theme URI: http://phasethemes.com/themes/surface
Author: Phase Themes
Author URI: http://phasethemes.com/

Description: A fully responsive magazine and blogging WordPress theme, built in a timeless and dynamic style.

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

Tags: black, dark, white, light, responsive-layout, two-columns, three-columns, left-sidebar, right-sidebar, custom-colors, custom-header, custom-menu, post-formats, sticky-post, theme-options, threaded-comments

*/

/*

1.0 Settings
    1.1 Width Controlling
    1.2 Widget Styling
2.0 Header
    2.1 Dropdown
    2.2 Slideout Search box
    2.3 Submenu
    2.4 To Top Button
3.0 Container
    3.1 Featured Heading
    3.2 Featured Slider
        3.2.1 Arrow Control
        3.2.2 Dot Control
    3.3 Posts Container
        3.3.1 Index Article Styling
        3.3.2 Index Article Styling (no cover)
        3.3.3 No Articles
    3.5 Explore Section
    3.6 Single Article Styling
        3.6.1 Media Styling
        3.6.2 Typography Styling
        3.6.3 Meta Share
        3.6.4 Comment Section
        3.6.5 Article Pagination
    3.7 Templates
        3.7.1 Contact Template
    3.8 Sidebar
        3.8.1 Sidebar Widget Specification
    3.9 Pagination
        3.9.1 Infinite Scrolling
        3.9.2 Page Number Navigating
4.0 Footer 
    4.1 Footer Widgets
        4.1.1 Footer Widget Specification
    4.2 Social Icons
    4.3 Credit
5.0 Animation
6.0 Responsive
7.0 Advertisements

*/

/*  1.0 Settings  */

*,*:before,*:after{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
    }
    
::selection {
	background: #fee8c8;
	color: #b15546;
}

::-moz-selection {
	background: #fee8c8;
	color: #b15546;
}

html{
    width:100%;
    height:100%;
    overflow-x:hidden;
    background: url(/wordpress/wp-content/themes/phase_surface_1.0/images/02.png) repeat;
    }

body{
    position:relative;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    font:14px/1.8em "Helvetica Neue",Helvetica,sans-serif !important;
    -webkit-font-smoothing:subpixel-antialiased;
    -moz-osx-font-smoothing:grayscale;
    color:#333;
    background: url(/wordpress/wp-content/themes/phase_surface_1.0/images/02.png) repeat;
    }

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

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

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

h1,h2,h3,h4,h5,h6{
    font:500 80px/1.5em "Helvetica Neue",Helvetica,sans-serif
    }

h1{font-size:26px}
h2{font-size:20px}
h3,h4,h5{font-size:16px}
h6{
	font-size: 14px;
    line-height: 38px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-weight: 500;
    }

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

a,
button,
input,
textarea,
form,
#header nav,
body.single #submenu.original,
#featured .slick-slider .slick-list li.slick-slide,
#featured .slick-prev:before,
#featured .slick-next:before,
#featured .slick-dots li button:before,
#featured.single .featured-caption,
.grid article .block .info,
.grid article .block .info small,
.grid article .block.text .content a.more i,
article.loaded,
#category .entry.vertical .cover:before,
.explore section,
.explore:after,
.explore:before,
#pagination span.page-numbers.current,
.single #slider .slick-prev,
.single #slider .slick-next,
.single #slider .slick-dots,
.single #slider .slick-dots li button:before,
#article-pagination li{
    -webkit-transition:.3s;
    transition:.3s
    }

.sticky{}

.gallery-caption{}

.bypostauthor{}

#phase_color_combo{
    background-color:#e54b4b; /*  Red  */
    background-color:#e8846b; /*  Orange  */
    background-color:#16528e; /*  Blue  */
    background-color:#0082c8; /*  Light Blue  */
    background-color:#a2c5bf; /*  Teel  */
    background-color:#167c80; /*  Turqoise  */

    background-color:#D5263F; /*  Red  */
    background-color:#63C2C7; /*  Turqoise  */
    background-color:#373034; /*  Coffee  */
    }

#wpadminbar{
    position:fixed;
    top:0 !important
    }

    /*   1.1 Width Controlling  */

    section{
        width:960px;
        max-width:100%;
        margin:auto
        }

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

    /*  1.1 Width Controlling - END  */

    /*  1.2 Widget Styling  */

    .widget ul.menu li ul.sub-menu{
        display:none
        }

    .widget form.search-form{
        position:relative;
        padding:20px
        }

    .widget form.search-form label{
        position:relative
        }

    .widget form.search-form input{
        position:relative;
        width:calc(100% - 40px);
        padding:10px 20px;
        border:0
        }

    .widget form.search-form label input{
        border-radius:2px
        }

    .widget form.search-form input.search-submit{
        position:absolute;
        top:20px;
        right:20px;
        padding:0;
        width:45px;
        height:36px;
        text-align:center;
        font:15px/20px "phase";
        background:transparent !important;
        opacity:.6
        }

    .widget form.search-form input.search-submit:hover{
        opacity:1
        }

    .widget form.search-form input:focus{
        outline:none
        }

    .widget .tagcloud{
        padding:20px
        }

    .widget .tagcloud a{
        display:inline-block;
        margin:0 2px 5px 0;
        padding:0 15px;
        font:14px/28px "Helvetica Neue",Helvetica,sans-serif !important;
        opacity:.8;
        border-radius:2px
        }

    .widget #calendar_wrap table#wp-calendar{
        position:relative;
        width:100%
        }

    .widget #calendar_wrap table#wp-calendar thead{
        width:calc(100% - 40px);
        padding:20px
        }

    .widget #calendar_wrap table#wp-calendar caption{
        padding:15px 20px;
        font:700 14px/1.5em "Helvetica Neue",Helvetica,sans-serif
        }

    .widget #calendar_wrap table#wp-calendar tfoot{
        position:absolute;
        width:100%;
        top:0
        }

        .widget #calendar_wrap table#wp-calendar td#prev a,
        .widget #calendar_wrap table#wp-calendar td#next a{
            display:block;
            width:50px;
            height:50px;
            overflow:hidden;
            opacity:.4
            }

        .widget #calendar_wrap table#wp-calendar td#next{
            position:absolute;
            right:0
            }

        .widget #calendar_wrap table#wp-calendar td#prev a:hover,
        .widget #calendar_wrap table#wp-calendar td#next a:hover{
            opacity:.8
            }

        .widget #calendar_wrap table#wp-calendar td#prev a:before{
            content:"\E811";
            padding:20px;
            font:16px/50px "phase"
            }

        .widget #calendar_wrap table#wp-calendar td#next a:before{
            content:"\E812";
            padding:20px;
            font:16px/50px "phase"
            }

    .widget #calendar_wrap table#wp-calendar thead th{
        font-weight:700;
        opacity:1 !important;
        }

    .widget #calendar_wrap table#wp-calendar tbody td,
    .widget #calendar_wrap table#wp-calendar thead th{
        padding:6px;
        text-align:center;
        opacity:.8
        }

    .widget #calendar_wrap table#wp-calendar tbody td a{
        display:block;
        border-radius:2px;        
        text-decoration:underline
        }

    .widget #calendar_wrap table#wp-calendar tbody td a:hover{
        opacity:.6
        }

    .widget #phase-recent-posts-widget ul li a{
        opacity:1
        }

    .widget #phase-recent-posts-widget ul li a:hover{
        opacity:.8
        }

    .widget #phase-recent-posts-widget ul li a h3{
        font:700 14px/27px "Helvetica Neue",Helvetica,sans-serif
        }

    /*  1.2 Widget Styling - END  */

/*  1.0 Settings - END  */

/*  2.0 Header  */

#header{
    position:relative;
    width:100%;
    height:60px;
    z-index:50
    }

#header h1{
    display:inline-block;
    font:700 30px/60px "Helvetica Neue",Helvetica,sans-serif
    }

#header #logo{
    display:inline-block;
    height:100%;
    padding:17px 0 15px
    }

#header #logo img{
    height:25px !important
    }

#header #logo:hover{
    opacity:.6
    }

#header nav{
    float:right
    }

#header nav li{
    display:inline-block;
    list-style:none;
    }

#header #navigation{
    display:inline-block;
    vertical-align:top;
    text-align:right
    }

#header #navigation li{
    position:relative;
    margin:0 0 0 -4px
    }

#header #navigation li a{
    display: block;
    padding: 0 20px;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font: 200 14px/60px "Helvetica Neue",Helvetica,sans-serif;
    }

    /*  2.1 Dropdown  */

    #header #navigation li > ul{
        position:absolute;
        width:180px;
        top:61px;
        right:0;
        padding:10px 0;
        opacity:0;
        pointer-events:none;
        transition:.15s
        }

    #header #navigation li.menu-item-has-children:hover > ul,
    #header #navigation li.flexMenu-viewMore.active > ul{
        opacity:1;
        pointer-events:auto
        }

    #header #navigation li > ul li.menu-item-has-children > a:before{
        content:"◄";
        float:left;
        margin:0 10px 0 0;
        font-size:8px;
        vertical-align:2px;
        opacity:.4
        }

    #header #navigation #menu > li.menu-item-has-children:hover > a::before{
        content:"";
        position:absolute;
        display:block;
        width:100%;
        height:1px;
        bottom:-1px;
        right:-1px
        }

    #header #navigation li > ul li{
        display:block;
        margin:0
        }

    #header #navigation li > ul li > ul{
        top:-11px;
        right:180px
        }

    #header #navigation li > ul li a{
        display:block;
        max-width:100%;
        padding:0 20px;
        line-height:35px;
        white-space:nowrap;
        overflow:hidden;
        o-text-overflow:ellipsis;
        text-overflow:ellipsis;
        opacity:.6
        }

    #header #navigation li > ul li a:hover{
    	opacity:1
	    }

    #header #navigation li > ul.sub-menu li a{
        box-shadow: 1px 0 transparent,
                    inset 1px 0 transparent
        }

    /*  2.1 Dropdown - END  */

    #header #social{
        position:relative;
        display:inline-block;
        vertical-align:top;
        width:auto;
        padding:0 15px
        }

    #header #social li{
        width:30px;
        text-align:center
        }

    #header #social li a{
        font:18px/60px "phase";
        }

    /*  2.2 Slideout Search Box  */

    #header #social li.click-search,
    #submenu li.click-search{
        position:relative;
        z-index:65
        }

    #header #social form,
    #submenu form{
        position:absolute;
        width:50px;
        height:calc(100% - 1px);
        overflow:hidden;
        top:0;
        right:0;
        opacity:0;
        pointer-events:none;
        background:transparent;
        z-index:60
        }

    #header #social form input,
    #submenu form input{
        height:30px;
        margin:15px 0;
        padding:0 25px;
        font:14px/30px "Helvetica Neue",Helvetica,sans-serif;
        background:transparent;
        border:0;
        outline:none
        }

    #header #social form .search-submit,
    #submenu form .search-submit{
        display:none
        }

    li a i.icon-search,
    body.search li a i.icon-cancel{
        display:block
        }

    li a i.icon-cancel,
    body.search li a i.icon-search{
        display:none
        }

    body.search #header form.search-form,
    body.search #submenu form.search-form{
        width:220px !important;
        opacity:1 !important;
        pointer-events:auto !important;
        opacity:.95 !important
        }

    #header a#click-menu{
        position:absolute;
        top:0;
        right:5%;
        font:20px/60px "phase"
        }

    #header a#click-menu,
    #header a#click-menu .icon-cancel,
    #header.responsive-slide a#click-menu .icon-menu{
        display:none
        }

    #header.responsive-slide a#click-menu .icon-cancel{
        display:block
        }

    /*  2.2 Slideout Search Box - END  */

    /*  2.3 Submenu  */

    #submenu{
        top:0;
        width:100%;
        height:50px;
        overflow:hidden;
        text-align:center;
        -webkit-box-shadow:0 1px 3px rgba(0,0,0,.1);
        box-shadow:0 1px 3px rgba(0,0,0,.1);
        z-index:49
        }

    #submenu section{
        position:relative
        }

    #submenu section:after{
        content:"";
        position:absolute;
        display:block;
        top:0;
        right:0;
        width:100px;
        height:40px;
        pointer-events:none
        }

    #submenu nav.menu{
        margin:auto
        }

    #submenu ul#menu-sub-menu{
        width:100%;
        max-height:68px;
        padding:0 0 18px;
        overflow-x:scroll;
        overflow-y:hidden;
        white-space:nowrap
        }

    body.single #submenu.original{
        height:0;
        overflow:hidden
        }

    body.single #submenu.original.slide{
        height:50px
        }

    #submenu h1,
    #submenu #logo{
        position:absolute;
        top:0;
        left:0
        }

    #submenu h1 a{
        font:700 22px/50px "Helvetica Neue",Helvetica,sans-serif
        }

    #submenu #logo{
        height:50px;
        padding:15px 0
        }

    #submenu #logo:hover{
        opacity:.6
        }

    #submenu #logo img{
        height:100% !important
        }

    #submenu li{
        position:relative;
        display:inline-block;
        list-style:none
        }

    #submenu li.current-menu-item:after{
        content:"";
        position:absolute;
        height:3px;
        width:60%;
        max-width:100px;
        bottom:0;
        left:50%;
        -webkit-transform:translate(-50%,0);
        transform:translate(-50%,0)
        }

    #submenu li a{
        display:block;
        margin:0 20px;
        text-transform:uppercase;
        font:700 14px/50px "Helvetica Neue",Helvetica,sans-serif
        }

    #submenu form input{
        margin:10px 0
        }

    #submenu li.click-search{
        position:absolute;
        top:0;
        right:0
        }

    #submenu h1,
    #submenu #logo,
    #submenu li.click-search,
    #submenu.original form{
        display:none
        }

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

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

    #header.clone,
    #submenu.clone{
        position:fixed;
        top:-80px;
        left:0;
        right:0;
        z-index:50;
        transition:.25s top cubic-bezier(.3,.73,.3,.74)
        }

    body.down #header.clone,
    body.down #submenu.clone{
        top:0
        }

    body.admin-bar.down #header.clone,
    body.admin-bar.down #submenu.clone{
        top:32px
        }

    #submenu.clone li.click-search,
    #submenu.clone h1,
    #submenu.clone #logo{
        display:block;
        }

    /*  2.3 Submenu - END */

    /*  2.4 To Top Button  */

    a#scroll-top{
        position:fixed;
        display:block;
        bottom:-60px;
        right:40px;
        width:40px;
        height:40px;
        text-align:center;
        border-radius:100%;
        opacity:0;
        box-shadow:0 0 0 4px rgba(127,127,127,.5);
        font:14px/38px "phase";
        opacity:.8;
        z-index:50
        }

    a#scroll-top.show{
        bottom:40px;
        opacity:1
        }

    a#scroll-top:hover{
        box-shadow:0 0 0 8px rgba(127,127,127,.5)
        }

    a#scroll-top:active{
        box-shadow:0 0 0 0 rgba(127,127,127,.5)
        }

    /*  2.4 To Top Button - END  */

/*  2.0 Header - END  */

/*  3.0 Container  */

    /*  3.1 Featured Heading  */

    #featured{
        position:relative;
        padding:2.5% 0;
        list-style:none;
        text-align:center;
        background:center no-repeat;
        background-size:cover
        }

    #featured.not-found{
        background:url(./inc/404-cover.png) center repeat;
        background-size:cover
        }

    #featured.heading,
    #featured.single{
        padding:80px 0
        }

    #featured.heading .avatar{
        width:80px;
        height:80px;
        margin:0 auto 20px;
        border-radius:100%
        }

    #featured h1{
        position:relative;
        width:90%;
        max-width:700px;
        margin:20px auto;
        font:700 35px/45px "Helvetica Neue",Helvetica,sans-serif;
        text-shadow:0 1px 3px rgba(0,0,0,.3);
        z-index:15
        }

    #featured p{
        position:relative;
        width:90%;
        max-width:700px;
        margin:20px auto;
        font:18px/1.8em "Helvetica Neue",Helvetica,sans-serif;
        opacity:.8;
        z-index:15
        }

    #featured a{
        text-decoration:none
        }

    #featured a:hover{
        text-decoration:underline
        }

    #featured.heading #author-social a{
        display:inline-block;
        width:30px;
        height:30px;
        text-align:center;
        font:18px/30px "phase"
        }

    #featured.heading #author-social a:hover{
        opacity:.6
        }

    #featured.heading.cover{
        padding:120px 0
        }

    #featured.heading.cover #overlay{
        display:block
        }

    #featured.heading.no-cover #overlay{
        display:none
        }

    #featured.single{
        width:100%;
        height:60%
        }

    #featured.single .post-info{
        position:absolute;
        bottom:60px;
        left:50%;
        width:90%;
        max-width:700px;
        margin:auto;
        text-align:center;
        -webkit-transform:translate(-50%,0);
        transform:translate(-50%,0);
        z-index:15
        }

    #featured.single .post-info,
    #featured.single .post-info a,
    #featured.heading.cover h1,
    #featured.heading.cover p{
        color:#fff;/* Match #overlay color when active (.cover) */
        }

    #featured.single .featured-caption{
        position:absolute;
        bottom:0;
        right:0;
        max-width:300px;
        padding:0 10px;
        white-space:nowrap;
        overflow:hidden;
        o-text-overflow:ellipsis;
        text-overflow:ellipsis;
        font:13px/30px "Helvetica Neue",Helvetica,sans-serif;
        color:#fff;
        background:rgba(0,0,0,.6);
        opacity:.8;
        z-index:15
        }

    #featured.single .featured-caption:hover{
        opacity:1
        }

    #featured.single .featured-caption a{
        color:#fff
        }

    #featured #gradient{
        background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1)100%);
        }

    #featured.single a:hover{
        text-decoration:underline
        }

    #featured.single.vertical{
        height:80%
        }

    #featured.single.text{
        height:auto;
        background-image:none !important
        }

    #featured.single #overlay,
    #featured.single.text #gradient{
        display:none
        }

    #featured.single.text .post-info{
        position:relative;
        left:auto;
        bottom:auto;
        -webkit-transform:translate(0,0);
        transform:translate(0,0)
        }

    #featured #overlay,
    #featured #gradient{
        position:absolute;
        width:100%;
        height:50%;
        bottom:0;
        left:0;
        opacity:.6;
        z-index:10
        }

    #featured #overlay{
        height:100%;
        background:#000;
        opacity:.4
        }

    /*  3.1 Featured Heading - END  */

    /*  3.2 Featured Slider  */

    #featured #featured-slides{
        opacity:0
        }

    .slick-slider{
        position:relative;
        display:block;
        width:90%;
        max-width:1580px;
        margin:0 auto 40px;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        -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
        }

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

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

    .slick-slider .slick-list .slick-track,
    .slick-slider .slick-list .slick-list{
        -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:before,
    .slick-slider .slick-list .slick-track:after{
        content:'';
        display:table
        }

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

    .slick-loading .slick-track{
        visibility:hidden
        }

    .slick-slider .slick-list li.slick-slide{
        position:relative;
        height:300px;
        float:left;
        margin:0 10px;
        min-height:1px;
        border-radius:2px;
        overflow:hidden;
        pointer-events:none
        }

    .slick-slider .slick-list li.slick-slide.slick-active,
    .slick-slider .slick-list li.slick-slide.slick-center{
        pointer-events:auto
        }

    .slick-slider .slick-list li.slick-slide .image{
        display:block;
        height:100%;
        background:#111 center no-repeat;
        background-size:cover
        }

    .slick-slider .slick-list li.slick-slide a.overlay{
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        background:rgba(0,0,0,.3);
        z-index:5
        }

    .slick-slider .slick-list li.slick-slide:hover a.overlay{
        background:rgba(0,0,0,.45)
        }

    .slick-slider .slick-list li.slick-slide h2{
        position:absolute;
        top:50%;
        left:50%;
        width:90%;
        text-align:center;
        font:700 25px/1.5em "Helvetica Neue",Helvetica,sans-serif;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
        text-shadow:0 1px 3px rgba(0,0,0,.3);
        color:#fff;
        pointer-events:none;
        z-index:10
        }

    .slick-initialized li.slick-slide{
        display:block
        }

    .slick-loading li.slick-slide{
        visibility:hidden
        }

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

        /*  3.2.1 Arrow Control  */

        .slick-prev,
        .slick-next{
            display:block;
            position:absolute;
            top:0;
            width:7.5%;
            height:100%;
            padding:0;
            font:0 sans-serif;
            color:transparent;
            border:none !important;
            outline:none !important;
            cursor:pointer;
            pointer-events:none
            }

        @-moz-document url-prefix(){

            .slick-next{
                pointer-events:auto
                }

        }

        .slick-prev{
            left:-2px
            }

        .slick-next{
            right:-2px
            }

        .slick-prev:before,
        .slick-next:before{
            padding:20px;
            font:30px/40px "phase";
            color:#fff;
            pointer-events:auto;
            opacity:.3
            }

        .slick-prev:before{
            content:"\E811";
            float:left
            }

        .slick-next:before{
            content:"\E812";
            float:right
            }

        #featured:hover .slick-prev:before,
        #featured:hover .slick-next:before{
            opacity:.6
            }

        /*  3.2.1 Arrow Control - END  */

        /*  3.2.2 Dot Control  */

        .slick-dots{
            position:absolute;
            bottom:-50px;
            display:block;
            width:100%;
            padding:0;
            list-style:none;
            text-align:center
            }

        .slick-dots li{
            position:relative;
            display:inline-block;
            width:20px;
            height:20px;
            margin:0 5px;
            padding:0;
            cursor:pointer
            }

        .slick-dots li button{
            font-size:0;
            line-height:0;
            display:block;
            width:20px;
            height:20px;
            padding:5px;
            cursor:pointer;
            color:transparent;
            border:0;
            outline:none;
            background:transparent
            }

        .slick-dots li button:hover:before{
            opacity:1
            }

        .slick-dots li button:before{
            content:"";
            position:absolute;
            top:0;
            left:0;
            width:10px;
            height:10px;
            opacity:.25;
            background:#fff;
            border-radius:100%
            }

        .slick-dots li.slick-active button:before{
            opacity:.75;
            box-shadow:0 0 0 1px #fff
            }

        /*  3.2.2 Dot Control - END  */

    /*  3.2 Featured Slider - END  */

    /*  3.3 Posts Container  */

    #posts-container{
        position:relative;
        padding:40px 0
        }

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

    #posts-container.sidebar #posts{
        width:640px
        }

    #posts-container.sidebar-r #sidebar,
    #posts-container.sidebar-l #posts,
    #container.single #posts-container.sidebar-r #posts article,
    #container.single #posts-container.sidebar-l #meta.sidebar{
        float:right
        }

    #posts-container.sidebar-l #sidebar,
    #posts-container.sidebar-r #posts,
    #container.single #posts-container.sidebar-l #posts article,
    #container.single #posts-container.sidebar-r #meta.sidebar{
        float:left
        }

    #container.single #posts-container.sidebar-r #posts{
        margin:0 30px 0 0
        }

    #container.single #posts-container.sidebar-l #posts{
        margin:0 0 0 30px
        }

        /*  3.3.1 Index Article Styling  */

        #grid.grid{
            transition:.6s;
            -webkit-transition:.6s
            }

        .grid article{
            width:auto;
            margin:0 10px 20px
            }

        .grid article .block{
            position:relative;
            width:300px;
            overflow:hidden;
            background:#111 center no-repeat;
            background-size:cover;
            border-radius:2px
            }

        .grid article .block.horizontal{
            height:220px
            }

        .grid article .block.vertical{
            height:460px
            }

        .grid article .block.enlarge{
            width:620px;
            height:460px
            }

        .grid article .block a.overlay{
            position:absolute;
            width:100%;
            height:100%;
            opacity:.3;
            z-index:5;
            border-radius:2px;
            }

        .grid article .block:hover a.overlay{
            opacity:.45
            }

        .grid article .block a.category{
            position:absolute;
            display:block;
            max-width:90%;
            top:20px;
            left:20px;
            padding:0 7px;
            font:12px/30px "Helvetica Neue",Helvetica,sans-serif;
            opacity:.6;
            border-radius:2px;
            z-index:10
            }

        .grid article .block:hover a.category{
            opacity:.8
            }

        .grid article .block .info{
            position:absolute;
            bottom:-10px;
            left:20px;
            width:90%;
            text-shadow:0 1px 3px rgba(0,0,0,.3);
            pointer-events:none;
            opacity:.6;
            z-index:10
            }

        .grid article .block h2{
            margin:0 0 10px;
            font:700 18px/1.5em "Helvetica Neue",Helvetica,sans-serif
            }

        .grid article .block .info small{
            font:12px/1.5em "Helvetica Neue",Helvetica,sans-serif;
            opacity:0
            }

        .grid article .block:hover .info{
            bottom:20px;
            opacity:1
            }

        .grid article .block:hover .info small{
            opacity:.6
            }

        .grid article .block.text .info,
        .grid article .block.text a.overlay{
            display:none
            }

        .grid article .block a.overlay,
        .grid article .block a.category{
            background:#000
            }

        .grid article .block,
        .grid article .block a{
            color:#fff
            }

        /*  3.3.1 Index Article Styling - END  */

        /*  3.3.2 Index Article Styling (no cover)  */

        .grid article .block.text .content{
            padding:20px
            }

        .grid article .block.text .content h2 a{
            margin:0 0 20px;
            font-size:24px;
            line-height:1.6em
            }

        .grid article .block.text .content small{
            display:block;
            margin:0 0 10px;
            font:12px/1.5em "Helvetica Neue",Helvetica,sans-serif;
            opacity:.4
            }

        .grid article .block.text .content small a:hover{
            text-decoration:underline
            }

        .grid article .block.text .content p{
            font:14px/1.8em "Helvetica Neue",Helvetica,sans-serif;
            opacity:.8
            }

        .grid article .block.text .content a.more{
            position:absolute;
            bottom:20px;
            left:20px;
            display:inline-block;
            margin:10px 0 0;
            font:700 14px/1.8em "Helvetica Neue",Helvetica,sans-serif
            }

        .grid article .block.text .content a.more i{
            margin:0 0 0 5px;
            font:13px/1.8em "phase";
            opacity:.4
            }

        .grid article .block.text .content a.more:hover i{
            margin:0 0 0 15px;
            opacity:1
            }

        /*  3.3.2 Index Article Styling (no cover) - END  */

        /*  3.3.3 No Articles  */

        #no-articles{
            text-align:center
            }

        #no-articles h2{
            font:700 30px/1.2em "Helvetica Neue",Helvetica,sans-serif;
            margin:0 0 20px
            }

        #no-articles p a:hover{
            text-decoration:underline
            }

        /*  3.3.3 No Articles - END  */

    /*  3.3 Posts Container - END  */

    /*  3.4 Category Section  */

    #category section{
        max-height:417px;
        overflow:hidden
        }

    #category h2.title{
        margin:20px 10px;
        font:700 25px/1.5em "Helvetica Neue",Helvetica,sans-serif
        }

    #category h2.title:after{
        content:"";
        display:block;
        height:0;
        clear:both
        }

    #category h2.title small{
        float:right;
        margin:0 10px;
        font:15px/30px "Helvetica Neue",Helvetica,sans-serif
        }

    #category h2.title small a i{
        margin:0 0 0 2px;
        font-size:11px;
        line-height:32px;
        opacity:.8
        }

    #category h2.title small a:hover{
        text-decoration:underline
        }

    #category .entry{
        position:relative;
        display:inline-block;
        width:300px;
        height:320px;
        overflow:hidden;
        vertical-align:top;
        margin:0 10px 20px
        }

    #category .entry > a{
        display:block;
        width:100%;
        height:100%;
        overflow:hidden;
        border-radius:2px
        }

    #category .entry .cover{
        display:block;
        width:100%;
        height:200px;
        overflow:hidden;
        background:#111 center no-repeat;
        background-size:cover;
        border-radius:2px
        }

    #category .entry .content{
        text-align:left
        }

    #category .entry .content small{
        display:block;
        margin:10px 0;
        font:14px/1.5em "Helvetica Neue",Helvetica,sans-serif
        }

    #category .entry .content small a:hover{
        text-decoration:underline
        }

    #category .entry .content h2{
        margin:10px 0;
        font:700 18px/1.5em "Helvetica Neue",Helvetica,sans-serif;
        }

    #category .entry .content p{
        display:none;
        margin:10px 0 0;
        font:14px/1.8em "Helvetica Neue",Helvetica,sans-serif
        }

    #category .entry.vertical .cover{
        height:100%
        }

    #category .entry.vertical .cover:before{
        content:"";
        position:absolute;
        width:100%;
        height:100%;
        opacity:.3;
        top:0;
        left:0;
        pointer-events:none;
        background:#000
        }

    #category .entry.vertical:hover .cover:before{
        opacity:.45
        }

    #category .entry.vertical .content{
        position:absolute;
        width:100%;
        padding:20px;
        bottom:0;
        color:#fff;
        text-shadow:0 1px 3px rgba(0,0,0,.3);
        pointer-events:none;
        z-index:10
        }

    #category .entry.vertical .content h2 a,
    #category .entry.vertical .content small a,
    #category .entry.vertical .content p{
        color:#fff
        }

    #category .entry.vertical .content small{
        opacity:.8
        }

    #category .entry.vertical.text .content p{
        display:block;
        opacity:.6
        }

    #category .entry.vertical.text .content{
        top:-10px
        }

    #category .entry.horizontal:hover .content h2{
        text-decoration:underline
        }

    /*  3.4 Category Section - END  */

    /*  3.5 Explore Section  */

    .explore{
        position:relative;
        overflow:hidden;
        padding:40px 0;
        text-align:center
        }

    .explore.exceed section{
        max-height:480px;
        overflow:hidden;
        -webkit-transition:.6s;
        transition:.6s
        }

    .explore.limit section{
        max-height:439px;
        overflow:hidden
        }

    .explore.exceed:after,
    .explore.exceed:before{
        content:"";
        position:absolute;
        width:100%;
        height:100px;
        bottom:0;
        left:0;
        z-index:20
        }

    .explore.exceed:after{
        bottom:100px
        }

    .explore.exceed.show section{
        max-height:2700px
        }

    .explore.exceed.show:after,
    .explore.exceed.show:before{
        opacity:0;
        pointer-events:none
        }

    .explore.show a#explore-more{
        opacity:0;
        pointer-events:none
        }

    .explore h2.title{
        margin:0 0 40px;
        font:100 25px/1.5em "Helvetica Neue",Helvetica,sans-serif
        }

    .explore .entry{
        position:relative;
        display:inline-block;
        width:300px;
        height:420px;
        overflow:hidden;
        vertical-align:top;
        margin:1px 10px 20px;
        border-radius:1px
        }

    .explore .entry:after{
        content:"";
        position:absolute;
        width:100%;
        height:50px;
        bottom:0;
        left:0;
        pointer-events:none;
        z-index:20
        }

    .explore .entry .cover{
        display:block;
        width:100%;
        height:200px;
        background:#111 center no-repeat;
        background-size:cover
        }

    .explore .entry .cover:hover{
        opacity:.6
        }

    .explore .entry.vertical .cover{
        height:100%
        }

    .explore .entry.vertical .cover:before{
        content:"";
        position:absolute;
        width:100%;
        height:100%;
        opacity:.4;
        top:0;
        left:0;
        pointer-events:none
        }

    .explore .entry.vertical .content{
        position:absolute;
        max-height:220px;
        bottom:0;
        text-shadow:0 1px 3px rgba(0,0,0,.3);
        pointer-events:none;
        z-index:10
        }

    .explore .entry.vertical.text .content{
        height:auto;
        top:0
        }

    .explore .entry .content{
        padding:20px;
        text-align:left
        }

    .explore .entry .content h2{
        display:block;
        margin:0 0 10px;
        font:100 19px/1.6em "Helvetica Neue",Helvetica,sans-serif
        }

    .explore .entry .content p{
        font:14px/1.8em "Helvetica Neue",Helvetica,sans-serif;
        opacity:.6
        }

    a#explore-more{
        display:block;
        position:absolute;
        width:90%;
        max-width:300px;
        overflow:hidden;
        margin:0 0 0 -150px;
        bottom:40px;
        left:50%;
        text-transform:uppercase;
        letter-spacing:1px;
        text-align:center;
        font:700 14px/45px "Helvetica Neue",Helvetica,sans-serif;
        border-radius:45px;
        z-index:30
        }

    /*  3.5 Explore Section - END  */

    /*  3.6 Single Article Styling  */

    #progressbar{
        position:fixed;
        top:0;
        left:0;
        width:0;
        height:4px;
        z-index:100;
        -webkit-box-shadow:0 1px 3px rgba(0,0,0,.1);
        box-shadow:0 1px 3px rgba(0,0,0,.1)
        }

    #container.single #posts{
        width:calc(100% - 350px) !important;
        margin:0 30px
        }

    #container.single article.entry{
        width:100%;
        max-width:690px;
        margin:auto
        }

        /*  3.6.1 Media Styling - END  */

        .single .media{
            margin:0 0 40px
            }

        .single .media.video{
            opacity:0
            }

        .single .media img{
            margin:auto
            }

        .single #slider{
            position:absolute;
            width:100% !important;
            overflow:hidden;
            list-style:none;
            opacity:0
            }

        .single #slider .slick-prev,
        .single #slider .slick-next{
            height:35px;
            width:35px;
            top:auto !important;
            bottom:20px;
            background:transparent !important;
            opacity:.6;
            z-index:25
            }

        .single #slider .slick-prev{
            left:auto;
            right:52px
            }

        .single #slider .slick-next{
            right:20px
            }

        .single #slider .slick-prev:before,
        .single #slider .slick-next:before{
            width:30px;
            height:30px;
            padding:0 !important;
            text-align:center;
            font:12px/30px "phase";
            opacity:1 !important;
            color:#fff;
            background:rgba(0,0,0,.6);
            border-radius:2px
            }

        .single #slider .slick-prev:hover,
        .single #slider .slick-next:hover{
            opacity:1
            }

        .single #slider .slick-list,
        .single #slider .slick-list .slick-track,
        .single #slider .slick-list .slick-track li.slick-slide{
            width:100%;
            height:auto;
            padding:0;
            margin:0
            }

        .single #slider .slick-dots{
            bottom:-5px;
            opacity:0;
            z-index:20
            }

        .single #slider:hover .slick-dots{
            bottom:10px;
            opacity:1
            }

        .single #slider .slick-dots li button:before{
            opacity:.4
            }

        .single #slider .slick-dots li button:hover:before,
        .single #slider .slick-dots li.slick-active button:before{
            opacity:1
            }

        /*  3.6.1 Media Styling - END  */

        /*  3.6.2 Typography Styling  */

        article.entry{
            font:18px/1.85em "Helvetica Neue",Helvetica,sans-serif
            }

        article.entry header{
            margin:0 0 20px
            }

        article.entry header h1{
            margin: -6px 0 10px;
			font: 700 35px/50px "Helvetica Neue",Helvetica,sans-serif;
            }

        article.entry header span{
            font:14px/1.6em "Helvetica Neue",Helvetica,sans-serif;
            opacity:.8
            }

        article.entry header span a:hover{
            opacity:.6
            }

        article.entry h1,
        article.entry h3,
        article.entry h4,
        article.entry h5,
        article.entry p,
        article.entry iframe,
        article.entry img,
        article.entry hr,
        article.entry blockquote,
        article.entry ul,
        article.entry ol,
        article.entry table,
        article.entry code,
        article.entry pre,
        article.entry .gallery,
        article.entry .wp-video,
        article.entry .media,
        article.entry div{
            display:block;
            max-width:100%;
            margin:0 0 20px
            }

        article.entry h1{
            font-size:30px
            }

        article.entry h2{
            font-size:30px;
            display:block;
            max-width:100%;
            margin:44px 0 15px 0;
            }

        article.entry h3{
            font-size:20px
            }

        article.entry h4,
        article.entry h5{
            font-size:18px
            }

        article.entry a{
            text-decoration:none;
            }
            
            article.entry a:hover{
            text-decoration:underline;
            }

        article.entry hr{
            border:0;
            height:1px
            }

        article.entry blockquote{
            position:relative;
            padding:0 0 0 20px;
            font:italic 20px/1.8em "Helvetica Neue",Helvetica,sans-serif
            }

        article.entry ul{
            margin:0 0 20px 20px;
            list-style-type:disc
            }

        article.entry ol{
            margin:20px 30px;
            list-style-type:decimal
            }

        article.entry ul li ol,
        article.entry ul li ul,
        article.entry ol li ul, 
        article.entry ol li ol{
            margin:5px 0 5px 20px
            }

        article.entry table{
            border-collapse:collapse
            }

        article.entry table tr:nth-of-type(odd){
            background:rgba(127,127,127,.05)
            }

        article.entry table th{
            font-weight:700
            }

        article.entry table td,
        article.entry table th{
            padding:5px 10px
            }

        article.entry code,
        article.entry pre{
            margin:20px 0;
            padding:20px;
            font:400 14px/1.6em "Courier";
            background:rgba(127,127,127,.05);
            border-radius:2px
            }

        article.entry .gallery{
            margin:0 0 20px !important
            }

        article.entry .gallery-item{
            float:left;
            margin:0 !important;
            padding:20px;
            text-align:center
            }

        article.entry .gallery-item img{
            margin:auto;
            border:none !important
            }

        article.entry .gallery-item .gallery-caption{ 
            margin:10px 0 0;
            padding:0
            }

        article.entry p.wp-caption-text,
        article.entry .gallery-item .gallery-caption{
            text-align:center;
            font:13px/1.8em "Helvetica Neue",Helvetica,sans-serif;
            opacity:.6
            }

        .alignleft{float:left;margin:20px 20px 20px 0 !important}
        .alignright{float:right;margin:20px 0 20px 20px !important}
        .aligncenter{display:block;margin:0 auto 20px !important}

        .alignleft p.wp-caption-text{
            text-align:left !important
            }

        .alignright p.wp-caption-text{
            text-align:right !important
            }

        .single article.entry.style_paragraph > p:first-child,
        .single article.entry .intro{
            font:20px/1.85em "Helvetica Neue",Helvetica,sans-serif
            }

        .single article.entry.style_letter > p:first-child::first-letter{
            float:left;
            padding:0 10px 0 0;
            font:60px/0.8em "Helvetica Neue",Helvetica,sans-serif;
            }

        #post-info:before{
            content:"";
            display:block;
            height:0;
            clear:both
            }

        #post-info{
            font:14px/30px "Helvetica Neue",Helvetica,sans-serif
            }

        #post-info hr{
            margin:20px 0
            }

        #post-info b,
        #post-info span{
            opacity:.6
            }

        #post-info a{
            text-decoration:none;
            opacity:.6
            }

        #post-info a:hover{
            opacity:1
            }

        hr.divider{
            width:100%;
            height:1px;
            margin:0;
            border:0
            }

        /*  3.6.2 Typography Styling - END  */

        /*  3.6.3 Meta Share  */

        #meta{
            display:none
            }

        #meta #share{
            width:100%;
            max-width:690px
            }

        #meta #share li{
            display:inline-block;
            width:33.3%;
            list-style:none
            }

        #meta #share li a{
            display:block;
            text-decoration:none;
            text-align:center;
            opacity:.4
            }

        #meta #share li a:hover{
            opacity:1
            }

        #meta #share li a i{
            display:inline-block;
            font:18px/50px "phase";
            }

        #meta #share li.comment{
            width:100%;
            vertical-align:1px
            }

        #meta #share li.comment a i{
            display:inline-block;
            font:18px/49px "phase";
            }

        #meta #share li.comment a b{
            margin:0 0 0 10px;
            font:14px/49px "Helvetica Neue",Helvetica,sans-serif;
            }

        #meta.sidebar{
            position:absolute;
            width:200px;
            height:100%
            }

        #meta.sidebar #share{
            position:absolute;
            width:200px
            }

        #container.single #posts-container.sidebar-l #meta.sidebar{
            left:auto;
            right:0
            }

        #meta.article{
            margin:20px 0
            }

        #meta.article #share li{
            display:inline-block;
            width:16.66%;
            text-align:center
            }

        #meta.article #share li.comment{
            display:none
            }

        /*  3.6.3 Meta Share - END  */

        /*  3.6.4 Comment Section  */

        a#click-comment{
            display:block;
            text-decoration:none;
            text-align:center;
            font:700 16px/55px "Helvetica Neue",Helvetica,sans-serif;
            color:#fff;
            border-radius:1px
            }

        #comments{
            position:absolute;
            visibility:hidden;
            margin:auto
            }

        #comments ol.comment-list{
            margin:0;
            list-style:none
            }

        #comments ol.comment-list li.comment{
            margin:20px 0;
            list-style:none
            }

        #comments ol.comment-list li.comment ol.children{
            margin:0 0 0 80px
            }

        #comments ol.comment-list li.comment:before,
        #comments ol.comment-list li.comment:after,
        #comments ol.comment-list li.comment ol.children:before{
            content:"";
            display:block;
            height:0;
            clear:both;
            }

        #comments ol.comment-list li.comment img.avatar{
            display:inline-block;
            float:left;
            width:60px;
            height:60px;
            margin:10px 20px 0 0;
            border-radius:2px
            }

        #comments ol.comment-list li.comment .comment-context{
            display:inline-block;
            float:right;
            width:calc(100% - 80px);
            }

        #comments ol.comment-list li.comment .comment-context .comment-info a{
            text-decoration:none
            }

        #comments ol.comment-list li.comment .comment-context .comment-info .author-name,
        #comments ol.comment-list li.comment .comment-context .comment-info .author-name a{
            font-weight:700
            }

        #comments ol.comment-list li.comment .comment-context .comment-time,
        #comments ol.comment-list li.comment .comment-context a.comment-reply-link{
            opacity:.4
            }

        #comments ol.comment-list li.comment .comment-context a.comment-reply-link:hover{
            opacity:1
            }

        #comments ol.comment-list li.comment .comment-context .comment-info{
            margin:0
            }

        #comments ol.comment-list li.comment .comment-context > p{
            margin:0 0 20px
            }

        #comments ol.comment-list li.comment .comment-context > p:last-child{
            margin:0
            }

        #comments #comment-nav-below{
            margin:20px 0
            }

        #comments #comment-nav-below > div{
            display:inline-block;
            width:50%;
            white-space:nowrap;
            overflow:hidden;
            o-text-overflow:ellipsis;
            text-overflow:ellipsis
            }

        #comments #comment-nav-below .nav-next{
            text-align:right
            }

        #comments #comment-nav-below > div a{
            display:inline-block;
            text-decoration:none;
            font:14px/30px "Helvetica Neue",Helvetica,sans-serif
            }

        #comments #comment-nav-below > div a:hover{
            text-decoration:underline
            }

        #comments #respond h3#reply-title{
            margin:0
            }

        #comments > h3,
        #comments #respond h3#reply-title,
        #comments #respond h3#reply-title a,
        #comments #respond h3#reply-title small a{
            text-decoration:none;
            font:700 18px/1em "Helvetica Neue",Helvetica,sans-serif
            }

        #comments #respond h3#reply-title a:hover,
        #comments #respond h3#reply-title small a:hover{
            text-decoration:underline
            }

        #comments #respond h3#reply-title small a#cancel-comment-reply-link{
            float:right
            }

        #comments #respond{
            margin:0
            }

        #comments .comment-list #respond{
            padding:40px 0 0
            }

        #comments #respond form{
            margin:20px 0 0
            }

        #comments #respond form label{
            display:none
            }

        #comments #respond p.must-log-in,
        #comments #respond p.logged-in-as{
            margin:-20px 0 20px !important;
            font:14px/40px "Helvetica Neue",Helvetica,sans-serif
            }

        #comments #respond p.must-log-in a,
        #comments #respond p.logged-in-as a{
            text-decoration:none
            }

        #comments #respond p.must-log-in a:hover,
        #comments #respond p.logged-in-as a:hover{
            text-decoration:underline
            }

        #comments #respond p.comment-form-author,
        #comments #respond p.comment-form-email{
            display:inline-block;
            width:calc(50% - 7.5px)
            }

        #comments #respond p.comment-form-author{
            margin:0 10px 0 0
            }

        #comments #respond input,
        #comments #respond textarea{
            width:100%;
            padding:10px 15px;
            font:14px/20px "Helvetica Neue",Helvetica,sans-serif;
            border:0;
            box-shadow:inset 0 0 0 1px transparent;
            border-radius:1px;
            outline:none
            }

        #comments #respond form textarea{
            width:100%;
            min-height:120px;
            resize:vertical
            }

        #comments #respond form textarea:focus{
            min-height:200px !important
            }

        #comments #respond form .form-submit{
            margin:0
            }

        #comments #respond form .form-submit input{
            display:block;
            max-width:150px;
            padding:15px;
            font:700 14px/20px "Helvetica Neue",Helvetica,sans-serif;
            color:#fff;
            cursor:pointer;
            border-radius:1px;
            box-shadow:none !important
            }

        /*  3.6.4 Comment Section - END  */

        /*  3.6.5 Article Pagination  */

        #article-pagination{
            margin:40px auto
            }

        #article-pagination li{
            position:relative;
            display:inline-block;
            width:calc(50% - 20px);
            height:360px;
            overflow:hidden;
            margin:0 10px;
            background:#111 center no-repeat;
            background-size:cover;
            border-radius:2px
            }

        #article-pagination li a.overlay{
            position:absolute;
            width:100%;
            height:100%;
            top:0;
            left:0;
            background:rgba(0,0,0,.4);
            z-index:5
            }

        #article-pagination li:hover a.overlay{
            background:rgba(0,0,0,.6)
            }

        #article-pagination li .center{
            position:absolute;
            width:80%;
            max-width:400px;
            top:50%;
            left:50%;
            -webkit-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%);
            color:#fff;
            pointer-events:none;
            z-index:10
            }

        #article-pagination li .center h2{
            margin:auto;
            white-space:nowrap;
            overflow:hidden;
            o-text-overflow:ellipsis;
            text-overflow:ellipsis;
            font:700 22px/1.5em "Helvetica Neue",Helvetica,sans-serif;
            text-shadow:0 1px 3px rgba(0,0,0,.3);
            }

        #article-pagination li .center h2 span{
            display:block;
            margin:0 0 10px;
            font:15px/1.5em "Helvetica Neue",Helvetica,sans-serif;
            opacity:.6
            }

        #article-pagination li .center p{
            margin:10px 0 0;
            font:16px/1.8em "Helvetica Neue",Helvetica,sans-serif;
            text-shadow:0 1px 3px rgba(0,0,0,.3);
            opacity:.8
            }

        #article-pagination li.next{
            text-align:left
            }

        #article-pagination li.prev{
            text-align:right
            }

        /*  3.6.5 Article Pagination - END  */

    /*  3.6 Single Article Styling - END  */

    /*  3.7 Templates  */

    #container.page{
        max-width:960px;
        margin:auto
        }

    #container.page #posts-container.no-sidebar #posts{
        width:100% !important;
        margin:auto
        }

    #container.page #posts-container.no-sidebar article.entry{
        width:100%;
        float:none;
        max-width:720px !important;
        margin:auto
        }

        /*  3.7.1 Contact Template  */

        #container.contact #respond .error{
            padding:10px 20px;
            text-align:center;
            border:1px solid rgba(255,0,0,.15);
            background:rgba(255,0,0,.1);
            color:rgba(255,0,0,1);
            border-radius:2px
            }

        #container.contact #respond .success{
            padding:10px 20px;
            text-align:center;
            border:1px solid rgba(100,225,100,.15);
            background:rgba(100,225,100,.1);
            color:rgba(100,150,100,1);
            border-radius:2px
            }

        #container.contact form input,
        #container.contact form textarea{
            display:inline-block;
            width:calc(50% - 10px);
            margin:0 0 20px;
            padding:15px;
            font:14px/20px "Helvetica Neue",Helvetica,sans-serif;
            border:0;
            box-shadow:inset 0 0 0 1px transparent;
            border-radius:2px;
            outline:none
            }

        #container.contact form input:first-child{
            margin:0 20px 20px 0
            }

        #container.contact form textarea{
            display:block;
            width:100%;
            min-height:200px;
            resize:vertical
            }

        #container.contact form input#submit{
            display:block;
            max-width:150px;
            padding:15px 20px;
            font:700 14px/20px "Helvetica Neue",Helvetica,sans-serif;
            color:#fff;
            cursor:pointer
            }

        /*  3.7.1 Contact Template - END  */

    /*  3.7 Templates - END  */

    /*  3.8 Sidebar  */

    #sidebar{
        width:300px;
        margin:0 10px 20px;
        overflow:hidden
        }

    #sidebar h2{
        padding:20px;
        text-transform:uppercase;
        letter-spacing:2px;
        font:700 14px/1.5em "Helvetica Neue",Helvetica,sans-serif
        }

    #sidebar .widget{
        margin:0 0 20px;
        border-radius:2px
        }

    #sidebar .widget ul li{
        padding:15px 20px
        }

    #sidebar .widget ul li a{
        opacity:1;
        }

    #sidebar .widget ul li span{
        display:block
        }

    #sidebar .widget ul li a:hover,
    #sidebar .widget ul li span{
        opacity:.4
        }

    #sidebar .widget select{
        width:calc(100% - 40px);
        margin:20px
        }

        /*  3.8.1 Sidebar Widget Specification  */

        #sidebar .widget ul.menu li{
            padding:0
            }

        #sidebar .widget ul.menu li a{
            display:block;
            padding:15px 20px;
            opacity:.8 !important
            }

        #sidebar .widget .textwidget p{
            width:calc(100% - 40px);
            padding:20px;
            opacity:.8
            }

        #sidebar .widget ul > li:last-child{
            border-bottom:0 solid transparent !important;
            }

        #sidebar .tagcloud a{
            background:rgba(127,127,127,.15)
            }

        #sidebar .tagcloud a:hover{
            background:rgba(127,127,127,.3)
            }

        #sidebar .widget form.search-form label input{
            background:rgba(127,127,127,.15)
            }

        #sidebar .widget ul.menu li a:hover,
        #sidebar .widget #calendar_wrap table#wp-calendar tbody td a{
            background:rgba(127,127,127,.15)
            }

        /*  3.8.1 Sidebar Widget Specification - END  */

    /*  3.8 Sidebar - END  */

    /*  3.9 Pagination  */

    #pagination{
        position:relative;
        width:90%;
        max-width:300px;
        overflow:hidden;
        margin:20px auto 0;
        text-transform:uppercase;
        letter-spacing:1px;
        text-align:center;
        font:700 14px/45px "Helvetica Neue",Helvetica,sans-serif;
        border-radius:45px
        }

        /*  3.9.1 Infinite Scrolling  */

        #pagination a#load{
            display:block;
            height:45px;
            border-radius:45px
            }

        #pagination a#load span#loading,
        #pagination a#load span#done{
            display:none
            }

        #pagination a#load span#loading{
            position:absolute;
            top:50%;
            left:50%;
            width:80px;
            -webkit-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%)
            }

        #pagination a#load span#loading > div{
            display:inline-block;
            height:8px;
            width:8px;
            border-radius:100%;
            -webkit-animation:stretchdelay 1.2s infinite ease-in-out;
            animation:stretchdelay 1.2s infinite ease-in-out
            }

        #pagination a#load span#loading .rect2{
            -webkit-animation-delay:-1.1s;
            animation-delay:-1.1s
            }

        #pagination a#load span#loading .rect3{
            -webkit-animation-delay:-1s;
            animation-delay:-1s
            }

        #pagination a#load span#loading .rect4{
            -webkit-animation-delay:-.9s;
            animation-delay:-.9s
            }

        @-webkit-keyframes stretchdelay{0%,40%,100%{opacity:.4}20%{opacity:1}}@keyframes stretchdelay{0%,40%,100%{opacity:.4}20%{opacity:1}}

        #pagination a#load.finished{
            pointer-events:none
            }

        #pagination a#load:hover,
        #pagination a#load.loading{
            color:#fff
            }
        
        #pagination a#load.loading span#loading > div{
            background:#fff
            }

        /*  3.9.1 Infinite Scrolling - END  */

        /*  3.9.2 Page Number Navigating  */

        #pagination a.prev,
        #pagination a.next{
            position:absolute;
            display:block;
            top:0;
            width:35px !important;
            margin:5px;
            font:13px/35px "phase" !important;
            border-radius:100% !important;
            box-shadow:inset 0 0 0 3px transparent;
            pointer-events:none;
            opacity:.4;
            z-index:5
            }

        #pagination a.prev{
            left:0
            }

        #pagination a.next{
            right:0
            }

        #pagination a.page-numbers,
        #pagination span.page-numbers{
            display:inline-block;
            width:25px;
            text-align:center;
            line-height:24px;
            border-radius:100%;
            pointer-events:auto;
            opacity:.8
            }

        #pagination a.page-numbers:hover,
        #pagination span.page-numbers.current{
            opacity:1;
            background:rgba(127,127,127,.3)
            }

        #pagination:hover span.page-numbers.current{
            background:rgba(127,127,127,.1)
            }

        #pagination a.prev:hover,
        #pagination a.next:hover{
            background:transparent !important;
            }

        /*  3.9.2 Page Number Navigating - END  */

    /*  End Pagination  */

/*  3.0 Container - END  */

/*  4.0 Footer  */

#footer{
    padding:40px 0
    }

#footer hr.divider{
    margin:0 0 40px;
    border:0;
    background:rgba(127,127,127,.1)
    }

    /*  4.1 Footer Widgets  */

    #footer #widgets .widget{
        width:280px;
        margin:0 20px 40px
        }

    #footer h2{
        margin:0 0 20px;
        text-transform:uppercase;
        letter-spacing:2px;
        font:400 14px/1.5em "Helvetica Neue",Helvetica,sans-serif
        }

    #footer .widget{
        margin:0 0 20px;
        border-radius:2px
        }

    #footer .widget ul li{
        margin:0 0 5px;
        list-style:none
        }

    #footer .widget ul li a{
        opacity:.6
        }

    #footer .widget ul li a:hover{
        opacity:1
        }

    #footer .widget ul li span{
        display:block
        }

    #footer .widget ul li span{
        opacity:.4
        }

    #footer .widget select{
        width:calc(100% - 40px);
        margin:20px
        }

    #footer .tagcloud a{
        background:rgba(127,127,127,.15)
        }

    #footer .tagcloud a:hover{
        background:rgba(127,127,127,.3)
        }

    #footer .widget form.search-form label input{
        background:rgba(127,127,127,.15)
        }

    #footer .widget ul.menu li a,
    #footer .widget #calendar_wrap table#wp-calendar tbody td a{
        background:rgba(127,127,127,.15)
        }

    .widget #calendar_wrap table#wp-calendar tbody td,
    .widget #calendar_wrap table#wp-calendar thead th{
        border:1px solid rgba(127,127,127,.15)
        }

    #footer .widget ul.menu li a:hover{
        background:rgba(127,127,127,.3)
        }

        /*  4.1.1 Footer Widget Specification  */

        #footer .widget ul.menu li a{
            display:block;
            padding:0 10px;
            font:14px/40px "Helvetica Neue",Helvetica,sans-serif;
            border-radius:2px
            }

        #footer .widget form.search-form,
        #footer .widget .tagcloud{
            padding:0
            }

        #footer .widget form.search-form input.search-submit{
            top:0;
            right:0
            }

        #footer .widget #calendar_wrap table#wp-calendar thead{
            width:calc(100% - 40px);
            padding:20px
            }

        #footer .widget #calendar_wrap table#wp-calendar caption{
            margin:0 0 20px;
            padding:0;
            text-transform:uppercase;
            letter-spacing:2px;
            text-align:left;
            font:700 14px/1.5em "Helvetica Neue",Helvetica,sans-serif
            }

        #footer .widget #calendar_wrap table#wp-calendar tfoot{
            display:none
            }

        #footer .widget select{
            width:calc(100% - 40px);
            margin:0
            }

        /*  4.1.1 Footer Widget Specification - END  */

    /*  4.1 Footer Widgets - END  */

    /*  4.2 Social Icons  */

    #footer #connect{
        width:90%;
        max-width:800px;
        margin:auto;
        text-align:center
        }

    #footer #connect #social{
        margin:0 0 20px
        }

    #footer #connect #social li{
        display:inline-block;
        list-style:none;
        width:25px;
        height:25px;
        margin:0 2.5px 5px
        }

    #footer #connect #social li a{
        display:block;
        text-align:center;
        font:20px/25px "phase";
        border-radius:2px;
        opacity:.4
        }

    #footer #connect #social li a:hover{
        opacity:.8
        }

    /*  4.2 Social Icons - END  */

    /*  4.3 Credit  */

    #footer #connect #credit a:hover{
        text-decoration:underline
        }

    /*  4.3 Credit - END  */

/*  4.0 Footer - END  */

/*  5.0 Animation  */

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

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

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

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

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

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

body.animated_loading.animated_header #header,
body.animated_loading.animated_header #submenu,
body.animated_loading #featured,
body.animated_loading #posts-container,
body.animated_loading .sponsor,
body.animated_loading #popular,
body.animated_loading #category,
body.animated_loading #article-pagination,
body.animated_loading #related,
body.animated_loading #footer{
    -webkit-animation:fadein .6s both;
    animation:fadein .6s both
    }

body.animated_loading #featured{
    -webkit-animation-delay:.2s;
    animation-delay:.2s
    }

body.animated_loading #posts-container,
body.animated_loading .sponsor,
body.animated_loading #category{
    -webkit-animation-delay:.4s;
    animation-delay:.4s
    }

body.animated_loading #article-pagination,
body.animated_loading #popular,
body.animated_loading #related,
body.animated_loading #footer{
    -webkit-animation-delay:.6s;
    animation-delay:.6s
    }

article.loading{
    opacity:0;
    pointer-events:none
    }

article.loaded{
    opacity:1;
    pointer-events:auto;
    -webkit-animation:fadeup .45s both ease-out .2s;
    animation:fadeup .45s both ease-out .2s
    }

article.loaded:nth-child(2n){
    -webkit-animation-delay:.2s;
    animation-delay:.2s
    }

article.loaded:nth-child(3n){
    -webkit-animation-delay:.3s;
    animation-delay:.3s
    }

article.loaded:nth-child(4n){
    -webkit-animation-delay:.4s;
    animation-delay:.4s
    }


#featured #featured-slides.loaded,
.single #slider.loaded,
.single .media.video.loaded{
    position:relative;
    -webkit-animation:fadein .2s both;
    animation:fadein .2s both
    }

/*  5.0 Animation - END  */

/*  6.0 Responsive  */

@media screen and (min-width:1280px){

    section{
        width:1280px
        }

    #posts-container.sidebar #posts{
        width:960px
        }

    #posts{
        position:relative
        }

    #meta.sidebar{
        display:block
        }

    }

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

    #meta.article{
        display:block
        }

    }

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

    #featured.featured-slide .slick-slider .slick-list li.slick-slide{
        height:350px
        }

    section{
        width:95%
        }

    #posts-container{
        width:100%;
        padding:40px 2.5%
        }

    #posts{
        width:100% !important
        }

    #sidebar{
        display:none
        }

    #container.single #sidebar{
        display:block
        }

    #container.single .media,
    #container.single article.entry{
        width:100% !important;
        padding:0 10px
        }

    .grid article,
    #category .entry,
    .explore .entry,
    #footer #widgets .widget{
        width:calc(50% - 20.5px) !important;
        max-width:100% !important;
        margin:0 10px 20px
        }

    .grid article .block{
        width:100% !important
        }

    }

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

    #featured.featured-slide{
        padding:0 !important
        }

    #featured.featured-slide .slick-slider{
        width:100% !important;
        margin:0 !important
        }

    #featured.featured-slide .slick-slider .slick-list li.slick-slide{
        height:320px;
        margin:0 2px;
        border-radius:0
        }

    .slick-prev,
    .slick-next,
    .slick-dots{
        display:none !important
        }

    #container.single #posts-container #sidebar{
        display:none
        }

    #container.single #posts{
        float:none;
        width:100% !important;
        margin:auto !important
        }

    }

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

    #header section{
        width:100%
        }

    #header h1,
    #header a#logo{
        margin:0 0 0 5%
        }

    #header a#click-menu{
        display:block
        }

    #header #navigation ul#menu,
    #header #social{
        display:none
        }

    #header #navigation{
        width:100% !important;
        max-width:100% !important;
        margin:-9px 0 0;
        text-align:left
        }

    #header.responsive-slide #navigation{
        height:auto !important
        }

    #header #navigation li{
        display:block;
        margin:0
        }

    #header #navigation li a{
        padding:0 5%
        }

    #header #navigation li.menu-item-has-children:after{
        content:"+";
        position:absolute;
        top:0;
        right:15px;
        width:50px;
        text-align:center;
        font:700 20px/60px "Helvetica",sans-serif;
        opacity:.6;
        cursor:pointer;
        z-index:51
        }

    #header #navigation li.menu-item-has-children:hover::after{
        opacity:1
        }

    #header #navigation #menu > li.menu-item-has-children a:before{
        display:none
        }

    #header #navigation li > ul{
        position:relative;
        width:100%;
        max-height:0;
        overflow:hidden;
        padding:0;
        top:0;
        opacity:1;
        pointer-events:auto;
        transition:.6s
        }

    #header #navigation li > ul.slide{
        max-height:600px;
        overflow:auto
        }

    #header #navigation li > ul li a{
        line-height:60px;
        padding:0 10%
        }
    
    #header #navigation li > ul li.menu-item-has-children:after,
    #header #navigation li > ul li.menu-item-has-children ul{
        display:none
        }

    #submenu.original section{
        -webkit-animation:slidein .6s both;
        animation:slidein .6s both
        }

    body.single #submenu.original{
        height:50px
        }

    a#scroll-top{
        display:none
        }

    .clone{
        display:none !important
        }

    #featured h1{
        font:700 25px/35px "Helvetica Neue",Helvetica,sans-serif
        }

    #featured p{
        font:16px/1.8em "Helvetica Neue",Helvetica,sans-serif
        }

    #featured.single.horizontal,
    #featured.single.vertical{
        height:auto
        }

    #featured.single.horizontal .post-info,
    #featured.single.vertical .post-info{
        position:relative;
        left:auto;
        bottom:auto;
        -webkit-transform:translate(0,0);
        transform:translate(0,0)
        }

    #featured.single #overlay{
        display:block
        }

    #featured.single.horizontal #gradient,
    #featured.single.vertical #gradient{
        display:none
        }

    #featured.single .featured-caption{
        right:50%;
        -webkit-transform:translate(50%,0);
        transform:translate(50%,0)
        }

    #posts-container{
        padding:20px 2.5%
        }

    #container.single .media,
    #container.single article.entry{
        padding:0
        }

    .single .media{
        margin:0
        }

    .grid article,
    #footer #widgets .widget{
        width:100% !important;
        margin:0 auto 10px !important
        }

    .grid article .block{
        height:300px !important
        }

    #category{
        display:none
        }

    .explore .entry{
        display:block;
        float:none;
        width:calc(100% - 2px) !important;
        margin:0 auto 20px !important
        }

    #article-pagination{
        margin:20px auto
        }

    #article-pagination li{
        width:100%;
        margin:auto;
        text-align:center !important
        }

    }

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

    #featured.featured-slide .slick-slider .slick-list li.slick-slide{
        height:220px
        }

    #featured.featured-slide .slick-slider .slick-list li.slick-slide h2{
        font:700 20px/1.5em "Helvetica Neue",Helvetica,sans-serif
        }

    .single #slider .slick-dots{
        bottom:30px !important;
        opacity:1
        }

    #posts-container{
        padding:10px 2.5% 20px
        }

    .grid article .block{
        height:250px !important
        }

    #pagination{
        margin:10px auto 0
        }

    #scroll-top{
        display:none
        }

    }

/*  6.0 Responsive - END  */

/*  7.0 Advertisements  */

.sponsor{
    position:relative;
    max-width:100% !important;
    overflow:hidden;
    text-align:center
    }

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

.sponsor.leaderboard.advertisement_article_above,
.sponsor.leaderboard.advertisement_article_below,
.sponsor.leaderboard.advertisement_footer,
.sponsor.rectangle.advertisement_sidebar_home_above,
.sponsor.rectangle.advertisement_sidebar_article_above{
    margin:0 auto 20px
    }

.sponsor.leaderboard.advertisement_grid_above,
.sponsor.leaderboard.advertisement_grid_below{
    margin:0 auto 40px
    }

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

    .sponsor.leaderboard.advertisement_grid_above,
    .sponsor.leaderboard.advertisement_grid_below{
        margin:0 auto 20px
        }

}

/*  7.0 Advertisements - END  */