/* ============================
        ZENLOUS MAIN CSS
============================ */


* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 100%;
    font-family: Helvetica, Arial, sans-serif;
    background: #F0EAE5;
    color: #000;
}

a {
    text-decoration: none;
}

a:active {
    outline: none;
}

img {
    max-width: 100%;
    border: none;
}

.content_404 {
    visibility: hidden;
}

.hasPlaceholder {
    color: #777;
}

/* =====================
        HEADINGS
===================== */

h1, h2, h3, h4, h5, h6 {
    text-align: left;
    margin: 20px 0 10px;
    padding: 0 5%;
    color: #000;
    clear: both;
}

/* =====================
        STRUCTURE
===================== */


#html, #head, #body {
    width: 100%;
}

#html {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    text-align: left;
}

/* HEADER */

#menu {
    float: right;
    overflow: hidden;
    position: relative;
}

#menu ul {
    clear: left;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

#menu ul li {
    display: block;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

#menu ul li a{
    display: block;
    margin: 20px 10px;
    color: #777;
    text-decoration: none;
    padding: 10px 15px;
    font-size: 14px;
    border: 1px solid transparent;
    border-radius: 5px;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

/* MAIN CONTENT */

#body {
    float: left;
    position: relative;
}

#content {
    width: 74.8%;
    padding: 20px 0 40px;
    float: left;
    position: relative;
    border-right: 1px dashed #d9d9d9;
}

#content .has_img {
    padding: 0;
}

#content > iframe, #page_blog .blog_post_cont > iframe {
    padding: 0 5%;
}

#content p, #content ul, .content_div {
    line-height: 1.4em;
    font-size: .9em;
    padding: 0 5%;
    margin-bottom: 10px;
}

#content > iframe, #page_blog .blog_post_cont > iframe {
    padding: 0 5%;
}

.content_div > * {
  padding: 0 !important;
}
#post_email_input,#oauth_login_fb {
  width: 100%;
}

.expired {
  color: red;
}
.not_expired {
  color: green;
}


/* SIDEBAR */

#side {
    width: 25%;
    float: right;
}

.side_box {
    margin: 20px auto 40px;
    overflow: auto;
}

.side_box h3 {
    font-size: 1.2em;
    line-height: 1.2em;
    text-align: center;
    margin: 0 auto;
    background: #e6e6e6;
    border-radius: 5px 5px 0 0;
    border: 1px solid #d9d9d9;
    border-bottom: none;
    padding: 10px;
    width: 80%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.side_box_content {
    width: 80%;
    padding: 10px 0;
    margin: 0 auto;
    border-radius: 0 0 5px 5px;
    border: 1px solid #d9d9d9;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

/* FOOTER */

#foot {
    width: 100%;
    clear: both;
    float: left;
    padding: 30px 0 100px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}

.foot_column {
    width: 16%;
    float: left;
    font-size: .9em;
    margin: 0 4%;
}

.foot_column ul {
    list-style: none;
}

.foot_column a {
    padding: 5px 0;
    display: block;
}

/* =================================
        HORIZONTAL PARAGRAPHS
================================= */

.horiz_p_2_cont, .horiz_p_3_cont {
    margin-top: 25px;
    overflow: auto;
}

.horiz_p_2 {
    width: 43%;
    margin: 0 4% 0 0;
    float: left;
}

.horiz_p_2 h2, .horiz_p_2 h3, .horiz_p_2 p {
    padding: 0 !important;
}

.horiz_p_2:nth-child(2n+1) {
    margin-left: 5%;
}

.horiz_p_2:nth-child(2n+2) {
    margin-right: 0;
}

.horiz_p_3 {
    width: 28%;
    margin: 0 3% 0 0;
    float: left;
}

.horiz_p_3 h2, .horiz_p_3 h3, .horiz_p_3 p {
    padding: 0 !important;
}

.horiz_p_3:nth-child(3n+1) {
    margin-left: 5%;
}

.horiz_p_3:nth-child(3n+3) {
    margin-right: 0;
}

.horiz_p_2 h2, .horiz_p_2 h3, .horiz_p_3 h2, .horiz_p_3 h3 {
    margin: 0 0 10px 0;
}


/* =================
        BLOG
================= */

#page_blog #content h2 {
    text-align: left !important;
    padding: 0 5%;
    margin-top: 0;
    font-size: 1.7em;
    display: block;
}


#page_blog #content h2 a {
    text-decoration: none;
    color: #99B21F;
}

#page_blog #content .date {
    color: #999;
    margin: 0 5%;
    padding: 10px 0;
}

#page_blog #content p, #page_blog #content ul {
    line-height: 1.4em;
    font-size: .9em;
    padding: 0 5%;
    margin-bottom: 10px;
}

#page_blog #content ul, .blog_post #content ul {
    margin: 15px 5% !important;
}

.blog_post #content .has_img {
    padding: 0 5%;
}

.blog_post_cont {
    padding-bottom: 20px;
    margin-bottom: 50px;
}

.blog_post_cont p iframe, .blog_post iframe, iframe {
    max-width: 100%;
}

.blog_post_cont p a img, .blog_post_cont p img, .oldpost_content p a img, .oldpost_content p img, .blog_post #content .has_img img {
    background: #fff;
    padding: 5px;
    border: 1px solid #d9d9d9 !important;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.navbar {
    overflow: auto;
    margin-bottom: 20px;
}

.nav, .navprev, .navnext, .readmore {
    background: rgb(238,238,238);
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(224,224,224,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(224,224,224,1)));
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(224,224,224,1) 100%);
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(224,224,224,1) 100%);
    background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(224,224,224,1) 100%);
    background: linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(224,224,224,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#e0e0e0',GradientType=0 );
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    padding: 5px 10px !important;
    margin: 5px 5%;
    display: inline-block;
}

.nav a, .navprev, .navnext, .readmore a {
    color: #000 !important;
}

.navprev, .navnext {
    width: 35%;
    margin: 5px 0;
}

.navprev span, .navnext span {
    margin: 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

.navprev {
    float: right;
}

.share {
    display: block;
    clear: both;
    margin: 10px 5%;
    -webkit-user-select: none;
    user-select: none;
    -moz-user-select: none;
}

.share > .comments > .icon {
    color: transparent;
}


/***
  toutube loader
***/

  .ytBox {
    margin: 20px 5%;
    position: relative;
  }

  .ytObjectBox {
    position: relative;
    padding-bottom: 53.25%;
    padding-top: 25px;
    height: 0;
  }

  .ytBox iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
  }

  .ytImgBox {
    display: none;
    width: 100%;
    height: 0;
    padding-bottom: 53.25%;
    padding-top: 25px;
    position: relative;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  
/* *** */
.twitter {
    background: rgb(135,224,253);
    background: -moz-linear-gradient(top,  rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,224,253,1)), color-stop(40%,rgba(83,203,241,1)), color-stop(100%,rgba(5,171,224,1)));
    background: -webkit-linear-gradient(top,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
    background: -o-linear-gradient(top,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
    background: -ms-linear-gradient(top,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
    background: linear-gradient(top,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );
    color: #fff;
    border: 1px solid #0096C4;
    margin: 0 5px;
    padding: 3px 5px;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
}

.twitter .icon {
    background: url(../_images/soc_icon.png) no-repeat;
    background-size: cover;
    width: 25px;
    height: 18px;
    display: block;
    float: left;
}

.facebook {
    background: rgb(86,136,201);
    background: -moz-linear-gradient(top,  rgba(86,136,201,1) 0%, rgba(44,83,158,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(86,136,201,1)), color-stop(100%,rgba(44,83,158,1)));
    background: -webkit-linear-gradient(top,  rgba(86,136,201,1) 0%,rgba(44,83,158,1) 100%);
    background: -o-linear-gradient(top,  rgba(86,136,201,1) 0%,rgba(44,83,158,1) 100%);
    background: -ms-linear-gradient(top,  rgba(86,136,201,1) 0%,rgba(44,83,158,1) 100%);
    background: linear-gradient(top,  rgba(86,136,201,1) 0%,rgba(44,83,158,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5688c9', endColorstr='#2c539e',GradientType=0 );
    border: 1px solid #3B5998;
    color: #fff;
    margin: 0 5px;
    padding: 3px 5px;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
}

.facebook .icon {
    background: url(../_images/soc_icon.png) no-repeat;
    background-position: -28px 0;
    background-size: cover;
    width: 25px;
    height: 18px;
    display: block;
    float: left;
}

.comments {
    background: #BAD824;
    background: -moz-linear-gradient(top, rgba(186, 216, 36, 1) 1%, rgba(142, 185, 42, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(186, 216, 36, 1)), color-stop(100%,rgba(142, 185, 42, 1)));
    background: -webkit-linear-gradient(top, rgba(186, 216, 36, 1) 1%,rgba(142, 185, 42, 1) 100%);
    background: -o-linear-gradient(top, rgba(186, 216, 36, 1) 1%,rgba(142, 185, 42, 1) 100%);
    background: -ms-linear-gradient(top, rgba(186, 216, 36, 1) 1%,rgba(142, 185, 42, 1) 100%);
    background: linear-gradient(top, rgba(186, 216, 36, 1) 1%,rgba(142, 185, 42, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bad824', endColorstr='#8eb92a',GradientType=0 );
    border-radius: 5px;
    border: 1px solid #A0B168;
    color: white;
    padding: 3px 5px;
    margin: 0 0 0 5px;
    cursor: pointer;
    display: inline-block;
}

.comments .icon {
    background: url(../_images/soc_icon.png) no-repeat;
    background-position: -53px 0;
    background-size: cover;
    width: 25px;
    height: 18px;
    display: block;
    float: left;
}

.twitter .count, .facebook .count, .comments .count {
    color: #fff;
    text-decoration: none;
}

.fb_iframe_widget {
    display: block !important;
}

.fb_iframe_widget > span {
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
}

.fb_iframe_widget iframe {
    width: 100% !important;
}

.twitter-tweet {
    margin: 20px 0 !important;
    padding: 0 5% !important;
}

#uf0374_1.fbConnectWidgetTopmost {
    border-radius: 5px;
}

#share_stand_cont {
    background: #f5f5f5;
    margin: 40px 0 10px;
    min-height: 60px;
    padding: 20px;
    border-radius: 5px;
    position: relative;
}

#share_stand_cont .twitter-share2 {
    position: absolute;
    z-index: 10;
    right: 0;
    width: 50%;
}

#share_stand_cont .twitter-share-button2 {
    background-color: #1b95e0;
    color: #fff !important;
    padding: 3px 5px;
    font-size: 12px;
    border-radius: 2px;
    display: inline-block;
    font-family: sans-serif;
    float: right;
    position: absolute;
    right: 20px;
    cursor: pointer;
}

#share_stand_cont .twitter-share-button2:hover {
    text-decoration: none;
}

#share_stand_cont .twitter-share-button2:before {
    content: '';
    background: url(https://files.nozbe.com/images/soc_icon.png) #1b95e0 no-repeat;
    background-size: cover;
    display: inline-block;
    width: 15px;
    height: 10px;
}

.vcount .count-o {
    height: 29px !important;
    border-color: rgba(187, 187, 187, 0.8) !important;
}

#count {
    font-size: 15px !important;
    width: 100% !important;
    height: 18px !important;
    line-height: 27px !important;
}

.vcount .btn-o {
    margin-top: 40px !important;
}

#page_archive h2 {
    font-size: 1em;
    margin-bottom: 0;
}

/* BLOG POST */

.blog_post h1 {
    text-align: left;
    font-size: 1.7em;
    padding: 0 5%;
    margin-top: 0;
    display: block;
}

#disqus_thread, .oldpost_comments {
    margin: 50px 5% 10px;
    border-top: 1px solid #d9d9d9;
}

.comment {
    margin: 10px 0;
}

.comment .username {
    margin: 10px 5%;
    font-size: 13px;
    border: 1px solid rgba(0, 0, 0, .15);
    padding: 10px;
    border-radius: 5px;
    background: #F1F1F1;
}

.dsq-comment-header {
    background: #f1f1f1 !important;
}

.comment .date {
    margin: 10px 5%;
    font-size: 11px;
    color: #999;
}

/* ==========================
        MEDIA QUERIES
========================== */

/* DESTKOP */

@media screen and (min-width: 1025px) {
    #html, #head, #body {
        width: 1024px;
    }

    #html {
        border: 1px solid #B1A9A5;
    }

    #content {
        border-right: 1px dashed #d9d9d9;
    }

    #side {
        width: 255px;
    }
}

/* IPAD, OTHER TABLETS & MOST ANDROID PHONES IN HORIZONTAL VIEW */

@media screen and (max-width: 800px) {
    #logo {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    #menu {
        width: 100%;
        text-align: center;
    }

    #content, #side {
        width: 100%;
        float: none;
        overflow: auto;
    }

    #content {
        min-height: auto;
    }

    .navprev span, .navnext span {
        width: 80%;
    }

    #side {
        border-top: 1px solid #d9d9d9;
        box-shadow: inset 0 0 25px rgba(0,0,0,.4);
        padding: 20px 0;
    }

    .side_box {
        width: 50%;
        margin: 20px auto;
        float: left;
    }

    .box_content {
        padding: 10px 0;
    }

    #foot {
        padding: 30px 5% 100px;
    }

    .foot_column {
        width: 33%;
        margin: 20px auto;
        float: left;
    }

    .social_icons {
        display: none;
    }

    .fbConnectWidgetTopmost {
        max-height: 215px !important;
    }


/* MOST ANDROID PHONES IN PORTRAIT VIEW, IPHONE & BELOW */

@media screen and (max-width: 480px) {
    h1, h2, h3, h4, h5, h6 {
        text-align: left;
    }

    h1 {
        font-size: 2em;
        color: #99B21F;
    }

    h2 {
        font-size: 1.4em;
        color: #99B21F;
    }

    h3, h4 {
        font-size: 1.2em;
    }

    #logo {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    #menu {
        width: 100%;
        text-align: center;
    }

    #menu ul {
        float: none;
        clear: none;
        width: auto;
        padding: 20px 0;
    }

    #menu ul li {
        float: none;
        display: inline;
    }

    #menu ul li a {
        font-size: .6em;
        margin: 5px 2px;
        display: inline-block;
    }

    #content, #side {
        width: 100%;
        float: none;
        overflow: auto;
    }

    .horiz_p_2_cont, .horiz_p_3_cont {
        margin-top: 0 !important;
    }

    .side_box {
        width: 100%;
    }

    .twitter > .icon, .facebook > .icon {
        padding: 0;
    }

    .horiz_p_2, .horiz_p_3 {
        width: 90%;
        float: none;
        padding: 0 5%;
        margin: 0 auto !important;
    }

    #foot {
        padding: 20px 0;
    }

    .foot_column {
        width: 100%;
        margin: 20px 0;
        text-align: center;
    }

    .foot_column ul li a {
        font-size: 1em;
        display: block;
        padding: 10px 0;
    }
}