/*||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||
    //|| Global
    //||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||*/

    body.modal.blog {
        background          : #EAEAEA;
        font-family         : "Lato";
        font-weight         : 400;
        width               : 98%;
        height              : 97%;
        margin              : 1%;
        padding             : 0;
    }

    body.modal.blog div.container {
        display             : block;
        width               : 100%;
        height              : 100%;
        border              : 1px solid #CCC;
        background          : #FFF;
        overflow-x          : hidden;
        overflow-y          : auto;
    }

    /*||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||
    //|| Shared Body
    //||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||*/

    body.modal.blog.shared {
        width               : 100%;
        height              : 100%;
        overflow            : auto;
        padding             : 0;
        margin              : 0;
    }

    body.modal.blog.shared div.container {
        display             : block;
        width               : auto;
        height              : auto;
        margin              : 0;
        padding             : 0;
        background          : #FFF;
        overflow-x          : auto;
        overflow-y          : auto;
    }

    body.modal.blog.shared div.split-share {
        display             : table;
        width               : 100%;
    }

    body.modal.blog.shared div.split-left,
    body.modal.blog.shared div.split-right {
        display             : table-cell;
    }

    body.modal.blog.shared div.split-left {
        width               : 60%;
    }

    body.modal.blog.shared div.split-right {
        background-image     : var(--IMGURL-MODAL-LOGIN);
        background-repeat    : no-repeat;
        background-size      : cover;
        background-attachment: center;
        background-position  : center;
        width               : 40%;
        max-width           : 40%;
        vertical-align      : middle;
        max-height          : 100%;
        height              : 100%;
        position            : fixed;
    }

    body.modal.blog.shared div.split-right div.inner {
        background          : rgba(0,0,0,0.4);
        vertical-align      : middle;
        display             : block;
        text-align          : center;
        width               : 100%;
        height              : 100%;
    }

    body.modal.blog.shared div.split-right div.inner div.middle {
        position            : fixed;
        display             : block;
        width               : 40%;
        background          : rgba(0,0,0,0.4);
        vertical-align      : middle;
        margin              : 0 auto;
        text-align          : center;
        padding             : 20px;
        top                 : 40%;
        color               : #FFF;
    }

    /*||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||
    //|| Header
    //||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||*/

    body.modal.blog ul.head  {
        display             : table;
        width               : 90%;
        margin              : 30px 0 20px;
        padding             : 30px 5% 5px;
    }

    body.modal.blog ul.head li {
        display             : table-cell;
        vertical-align      : middle;
    }

    body.modal.blog ul.head li.img {
        max-width           : 150px;
    }

    body.modal.blog ul.head li.img img {
        max-width           : 150px;
        display             : block;
        width               : 100%;
        height              : auto;
    }

    body.modal.blog ul.head h1 {
        color               : var(--COLOR-ONE);
        font-family         : "Lato"; /* Open Sans */
        font-weight         : 400;
        font-size           : 3em;
        letter-spacing      : -2px;
        padding             : 0 0 20px 20px;
        margin              : 0;
        line-height         : 1.0em;
    }

    body.modal.blog ul.head h2 {
        font-family         : "Lato";
        font-weight         : 400;
        font-size           : 1.0em;
        letter-spacing      : 0;
        padding             : 0 0 0 20px;
        margin              : 0;
    }

    body.modal.blog ul.head h2 a {
        text-decoration     : none;
        color               : var(--COLOR-ONE);
    }

    /*||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||
    //|| Header - Stats
    //||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||*/

    body.modal.blog ul.head div.stats {
        padding             : 15px 0 0 20px;
        margin              : 0;
        display             : block;
        text-align          : left;
        font-family         : "Lato";
        font-weight         : 400;
    }

    body.modal.blog ul.head div.stats span {
        display             : inline-block;
        padding             : 4px 10px;
        font-size           : 80%;
        color               : #666;
        background          : rgba(100,100,100,0.1);
        border-radius       : 3px;
        margin-right        : 5px;
    }

    /*||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||
    //|| Header - Buttons
    //||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||*/

    body.modal.blog ul.head div.buttons {
        padding             : 15px 0 0 20px;
        display             : block;
        text-align          : left;
    }

    body.modal.blog ul.head div.buttons button {
        display             : inline-block;
        margin-right        : 5px;
        border              : 1px solid var(--MODALONE); /* Modal Blue */
        background          : var(--MODALONE-RGBA-5); /* Modal Blue */
        color               : #FFF;
        text-transform      : none;
        font-size           : 0.9em;
        border-radius       : 3px;
    }

    body.modal.blog.no-share ul.head div.buttons button.share {
        display             : none;
    }

    body.modal.blog.no-login ul.head div.buttons button.flag,
    body.modal.blog.no-login ul.head div.buttons button.like {
        display             : none;
    }

    body.modal.blog ul.head div.buttons button i.fa {
        color               : rgba(255,255,255,0.5);
        font-size           : 80%;
        display             : inline-block;
        width               : 20px;
        text-align          : center;
    }

    body.modal.blog ul.head div.buttons button:hover {
        background          : var(--MODALONE) /* Modal Blue */
    }

    body.modal.blog ul.head div.buttons button:hover i.fa {
        color               : #FFF;
    }

    /*||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||
    //|| Flags
    //||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||*/

    body.modal.blog ul.head div.buttons button.flagged,
    body.modal.blog ul.head div.buttons button.flagged i.fa {
        color               : #000;
        font-weight         : bold;
    }

    /*||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||
    //|| Likes
    //||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||*/

    body.modal.blog ul.head div.buttons button.like.liked i.fa {
        font-size           : 120%;
        color               : #FFF;
    }

    /*||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||
    //|| Body
    //||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||*/

    body.modal.blog div.story {
        padding             : 20px 5% 50px;
    }

    body.modal.blog div.story br {
        content: "A" !important;
        display: block !important;
        margin-bottom: 1.5em !important;
    }

    body.modal.blog div.story div.inner {
        padding             : 20px 0 0 0;
        line-height         : 1.9em;
        font-size           : 1.1em;
        border-top          : 2px dotted #CCC;
    }

    body.modal.blog div.story small {
        font-size           : 80%;
        padding             : 30px 0;
        border-top          : 2px dotted #CCC;
        margin              : 30px 0 0;
        color               : #999
    }

    /*||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||
    //|| Share Blog
    //||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||*/

    body.modal.blog.sharer div.sharer {
        display         : inline-block;
    }

/*||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||
//||
//|| MOBILE
//||
//||=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-||*/

       @media (max-width: 767px) {

            body.modal.blog ul.head div.buttons button {
                width           : 40px;
                height          : 40px;
                padding         : 0 0px 0 0;
                overflow        : hidden;
            }

           body.modal.blog ul.head div.buttons button.like.liked i.fa,
           body.modal.blog ul.head div.buttons button.like.liked i.fa,
           body.modal.blog ul.head div.buttons button i.fa {
                display         : inline-block;
                width           : 100%;
                padding         : 12px 5px 0 0;
                margin          : 0 0 20px 0;
                text-align      : center;
                font-size       : 100%;
           }

           body.modal.blog ul.head div.buttons button.like.liked i.fa {
                color           : red;
           }


        }