*,
html {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-size: 100%;
    font-family: helvetica, arial, sans-serif;
    position: relative;
    background-color: #e9ebee;
    line-height: 1.34;
    min-width: 1300px;
}

a {
    text-decoration: none;
    color: #1d2129;
}

header,
nav,
section,
aside,
footer {
    display: block;
}


/****************************************/


/* Format header */

#header {
    background-color: #3b5998;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    border-bottom: 1px solid #666666;
    z-index: 1000000;
}

#header_wrapper {
    display: table;
    width: 1017px;
    margin-left: 62px;
    margin-right: auto;
    padding-top: 9px;
    padding-bottom: 9px;
}

#header_wrapper>a>i {
    font-size: 27px;
    color: #fff;
    display: table-cell;
}

#header_wrapper_main {
    display: table-cell;
    width: 985px;
    vertical-align: middle;
}

#header_wrapper_main input {
    font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
    width: 407px;
    height: 25px;
    font-size: 14px;
    padding-left: 5px;
    border: 1px solid #fff;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    float: left;
}


/*Warring: hack change placeholder, don't change here*/

#header_wrapper_main>input::-webkit-input-placeholder {
    color: #1d2129;
}

#header_wrapper_main>input:-moz-placeholder {
    color: #1d2129;
}


/* Trình duyệt FF 4-18 */

#header_wrapper_main>input::-moz-placeholder {
    color: #1d2129;
}


/* Trình duyệt FF 19+ */

#header_wrapper_main>input:-ms-input-placeholder {
    color: #1d2129;
}

#header_wrapper_main button {
    border: none;
    background-color: #f6f7f9;
    width: 45px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border: 0px solid #fff;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    float: left;
}

#button_search i {
    font-size: 16px;
    color: darkslategrey;
}

#header_wrapper_main_left {
    display: inline-block;
    padding-left: 206px;
    float: left;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    /*    margin-top: -25px;*/
}

#header_wrapper_main_left>span {
    padding-top: 6px;
    padding-bottom: 6px;
}

.timeline-button {
    display: inline-block;
    color: #fff;
    padding-left: 3px;
    padding-right: 10px;
    vertical-align: middle;
    line-height: 25px;
}

.button-home {
    display: inline-block;
    width: 80px;
    height: 25px;
    color: #fff;
    line-height: 25px;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

.button-home:after {
    position: absolute;
    content: ' ';
    display: block;
    width: 1px;
    height: 18px;
    background-color: rgba(0, 0, 0, 0.09);
    top: 4px;
    left: -2px;
}

#header_wrapper_main_left a:hover {
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    border-radius: 3px;
}

#header_wrapper_main_left_2:after {
    content: ' ';
    display: block;
    width: 10px;
    height: 17px;
    top: 5px;
    left: 0;
    position: absolute;
    border-left: 1px solid #29487d;
}

#header_wrapper_main_left img {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

#header_wrapper_main_middle {
    display: inline-block;
    padding-left: 20px;
    padding-right: 12px;
    float: left;
    margin-top: 2px;
}

#header_wrapper_main_middle img:hover,
#header_wrapper_main_bottom:hover {
    cursor: pointer;
}

#header_wrapper_main_bottom {
    display: inline-block;
    padding-left: 12px;
    float: left;
    margin-top: 4px;
    position: relative;
}

#header_wrapper_main_bottom i {
    padding-left: 2px;
    font-size: 17px;
}

#header_wrapper_main_bottom:after {
    content: ' ';
    display: block;
    width: 10px;
    height: 15px;
    top: 0px;
    left: 0;
    position: absolute;
    border-left: 1px solid #29487d;
}


/****************************************/


/* Format body */

#main_body {
    display: block;
    background-color: #e9ebee;
    width: 100%;
}

#main_body:after {
    content: ' ';
    display: block;
    clear: both;
}


/* Format left body */

#left_home {
    display: block;
    position: fixed;
    top: 60px;
    color: #1d2129;
    left: 0;
    width: 186px;
    margin-left: 62px;
}


/* Notice format hover all "li" */

#left_home li:hover {
    cursor: pointer;
    background-color: #f6f7f9;
    /* Hack hover hover */
    outline-color: #d9d9d9;
    outline-style: solid;
    outline-width: 1px;
}


/* Format top left main body */

#top-left-home {
    font-size: 13px;
    margin-bottom: 18px;
}

#top-left-home li {
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 4px;
}

#top-left-home li:nth-child(1) {
    margin-bottom: 10px;
}

#top-left-home li:nth-child(2) {
    font-weight: bold;
    background-color: #f6f7f9;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
}


/* Off hover border(outline) new posts */

#top-left-home li:nth-child(2):hover {
    outline: none;
}

#top-left-home li:nth-child(2) i {
    color: #3658a3;
}

#top-left-home img {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    /*    margin-bottom: 3px;*/
    vertical-align: middle;
}

#top-left-home span {
    vertical-align: middle;
}


/* Format bottom left main body */

.bottom-left-home {
    margin-bottom: 18px;
}

#left_home h4 {
    font-size: 11px;
    margin-bottom: 5px;
}

.bottom-left-home li {
    display: block;
    list-style: inside none;
    width: 186px;
    height: 30px;
    padding-left: 3px;
    line-height: 30px;
    font-size: 13px;
    position: relative;
}

.bottom-left-home li:nth-child(7) img {
    margin-left: 5px;
    width: 10px;
    height: 10px;
}

.bottom-left-home img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

.bottom-left-home span {
    vertical-align: middle;
    max-width: 130px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.counter-posts {
    float: right;
    margin-right: 6px;
    font-size: 11px;
    color: #808080;
}

.hover-posts {
    opacity: 0;
    font-size: 5px;
    position: absolute;
    color: #808080;
    top: 0;
    right: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.bottom-left-home li:hover .hover-posts {
    opacity: 1;
    background-color: #f6f7f9;
}


/* Format other left main body */

#other-left-main-body {
    font-size: 12px !important;
}

#other-left-main-body a {
    color: #365899;
    margin-right: 10px;
}

.after-other {
    position: relative;
}

.after-other:after {
    content: ' . ';
    display: inline-block;
    position: absolute;
    top: -3px;
    left: -8px;
}


/*************************************************/


/*Format center main body */

#center_home {
    display: block;
    width: 500px;
    float: left;
    margin-top: 55px;
    margin-left: 265px;
}

#newposts_center_home {
    display: block;
    width: 100%;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background-color: #ffffff;
}

#newposts_center_home:after {
    content: ' ';
    display: block;
    clear: both;
}

#upload-center-main-body {
    display: block;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 7px;
    padding-bottom: 15px;
    border-bottom: 1px solid #d9d9d9;
}

#upload-center-main-body span {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    color: #365899;
    margin-right: 10px;
}

#upload-center-main-body span:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.05);
}

#special-hr {
    position: relative;
}

#special-hr:after {
    content: ' ';
    display: block;
    width: 10px;
    height: 17px;
    top: 0px;
    right: -12px;
    position: absolute;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}

#upload-center-main-body span span {
    vertical-align: middle;
}

#upload-center-main-body span img {
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin-right: 3px;
}

#think-center-main-body {
    display: block;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 15px;
    padding-bottom: 20px;
}

#think-center-main-body img {
    vertical-align: middle;
}

#think-center-main-body img:hover {
    cursor: pointer;
}

#think-center-main-body input {
    display: inline-block;
    width: 85%;
    vertical-align: middle;
    margin-left: 10px;
    border: none;
    font-size: 14px;
    outline: none;
}

#complete-center-main-body {
    display: block;
    width: 100%;
    border-top: 1px solid #d9d9d9;
}

#complete-center-main-body:after {
    content: ' ';
    display: block;
    clear: both;
}

#complete-center-main-body a {
    display: inline-block;
    padding: 10px 15px 10px 15px;
    float: left;
    vertical-align: middle;
}

#complete-center-main-body img {
    width: 15px;
    height: 15px;
}

#complete-center-main-body a:hover {
    background-color: #e6e6e6;
}

.trust,
button[type="submit"] {
    display: inline-block;
    border: none;
    float: right;
    outline: none;
    padding: 5px 13px 5px 13px;
    margin-top: 6px;
    margin-bottom: 7px;
    margin-right: 10px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 12px;
}

.trust,
button[type="submit"]:hover {
    cursor: pointer;
}

.trust {
    background-color: rgba(0, 0, 0, 0.03);
    color: #4d4d4d;
    border: 1px solid #d9d9d9;
}

button[type="submit"] {
    background-color: #4267b2;
    color: #fff;
}


/*Format posts center main body*/

#posts_center_home {
    display: block;
    width: 100%;
}

#posts1_center_home {
    display: block;
    width: 100%;
    border: 1px solid #d9d9d9;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    background-color: #ffffff;
    margin-top: 10px;
}

#posts1_center_home>span {
    display: block;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
    line-height: 1.38;
    color: #a6a6a6;
    border-bottom: 1px solid #d9d9d9;
}

#posts1_center_home a {
    display: inline-block;
    color: #365899;
}

#posts1_center_home>span>a:hover {
    cursor: pointer;
    text-decoration: underline;
}

#posts1_center_home>span>i {
    display: inline-block;
    float: right;
}

.name_posts1_center_home {
    font-size: 13px;
    font-weight: bold;
}

#posts1_center_home>ul {
    display: block;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    font-size: 15px;
}

#posts1_center_home>ul:after {
    content: ' ';
    display: block;
    clear: both;
}

#posts1_center_home>ul>li {
    list-style-type: none;
    margin-bottom: 10px;
}

#posts1_center_home>ul>li:after {
    content: ' ';
    display: block;
    clear: both;
}

#posts1_center_home>ul>li:nth-child(1)>div>span {
    margin-right: 7px;
}

#posts1_center_home>ul>li:nth-child(2) {
    padding-bottom: 15px;
    border-bottom: 1px solid #d9d9d9;
    line-height: 20px;
}

#posts1_center_home>ul>li>img {
    display: inline-block;
    float: left;
    margin-right: 7px;
    vertical-align: middle;
}

#posts1_center_home>ul>li>div {
    display: inline-block;
    float: left;
    vertical-align: middle;
    margin-top: 2px;
}

#posts1_center_home>ul>li>div>a {
    display: block;
    color: #365899;
    font-weight: bold;
    font-size: 14px;
}

#posts1_center_home>ul>li>div>span {
    display: inline-block;
    font-size: 12px;
    color: #8c8c8c;
}

.imgresize {
    display: inline-block;
    width: 475px !important;
    height: 348px !important;
    margin-top: 10px;
    border: 1px solid #d9d9d9;
}

.imgresize-icon {
    width: 40px;
    height: 40px;
}

.imgresize-group {
    display: inline-block;
    width: 475px;
}


/* Format like, share, comment*/

.like_comment_share>a {
    margin-right: 20px;
    font-size: 12px;
    color: #7f7f7f !important;
    font-weight: bold;
}

.like_comment_share>a>img {
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin-right: 3px;
}

#posts1_center_home>ul>li>a>span {
    vertical-align: middle;
}

#posts1_center_home>ul>li>a:hover span {
    text-decoration: underline;
}


/* Format like more */

.like_more {
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, 0.05);
    border-top: 1px solid #d9d9d9;
    padding-bottom: 10px;
    border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.like_more:after {
    content: ' ';
    display: block;
    clear: both;
}

.like_more ul {
    display: block;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.like_more ul li {
    list-style: none;
    white-space: nowrap;
    font-size: 12px;
}

.like_more ul li:nth-child(1) {
    color: #365899;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #d9d9d9;
}

.like_more ul li:nth-child(1):hover {
    cursor: pointer;
}

.like_more a:hover {
    text-decoration: underline;
}

.like_more>ul>li:nth-child(1)>img {
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: middle;
    float: left;
    margin-right: 5px;
}

.like_more ul li a {
    display: inline-block;
    vertical-align: middle;
}

.like_more ul li:nth-child(2) {
    margin-top: 10px;
}

.friend_comment_like_more {
    display: block;
    width: 100%;
    margin-top: 10px;
    font-size: 12px;
}

.friend_comment_like_more>span {
    width: 85%;
    margin: auto;
    display: block;
}

.friend_comment_like_more>span>a {
    font-weight: bold;
    vertical-align: middle;
}

.friend_comment_like_more>span>span {
    vertical-align: middle;
}

.friend_comment_like_more>span>span>span {
    vertical-align: middle;
}

.friend_comment_like_more:after {
    content: ' ';
    display: block;
    clear: both;
}

.friend_comment_like_more img {
    width: 38px;
    height: 38px;
    display: inline-block;
    float: left;
    margin-right: 5px;
    border: 1px solid #d9d9d9;
}

.friend_comment_like_more img:hover {
    cursor: pointer;
}

.friend_comment_like_more>a {
    display: inline-block;
    margin-top: 4px;
    margin-right: 10px;
    vertical-align: middle;
}

.friend_comment_like_more h4 {
    margin-top: 4px;
}

.like_more h4 {
    display: inline-block;
    font-weight: normal;
    vertical-align: middle;
    color: #7f7f7f;
}

.friend_reply_like_more {
    display: inline-block;
    margin-left: 66px;
    margin-top: 5px;
}

.friend_reply_like_more a {
    vertical-align: middle;
    margin-right: 12px;
}

.friend_reply_like_more img {
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: middle;
}

.friend_reply_like_more:hover a {
    text-decoration: underline;
    cursor: pointer;
}


/* Format comment of me */

.bottom_like_more {
    margin-top: 10px;
}

.bottom_like_more img {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.bottom_like_more input {
    display: inline-block;
    width: 438px;
    margin-left: 5px;
    padding-top: 6px;
    padding-left: 5px;
    padding-bottom: 7px;
    vertical-align: middle;
    font-size: 12px;
    outline: none;
    border: none;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    position: relative;
}

.bottom_like_more i {
    display: inline-block;
    position: absolute;
    font-size: 15px;
    color: #7f7f7f;
}

.camera-comment {
    transform: translate(-370%, 50%)
}

.fa-smile-o {
    transform: translate(-230%, 50%);
}


/* If you want to clear border bottom */

.clear_border_bottom {
    border-bottom: 1px solid transparent !important;
    margin-bottom: -5px !important;
}


/* Format like more on top */

.like_more_version2 {
    display: block;
    width: 100%;
    margin-top: 10px !important;
    margin-bottom: -10px !important;
}

.like_more_version2:after {
    content: ' ';
    display: block;
    clear: both;
}

.like_more_version2 a {
    display: inline-block;
    float: left;
    font-weight: normal !important;
    font-size: 12px !important;
    vertical-align: middle;
    color: #8c8c8c !important;
    margin-left: 5px;
}

.like_more_version2 img {
    display: inline-block;
    float: left;
    width: 17px;
    height: 17px;
    vertical-align: middle;
    margin-left: -3px;
}

.like_more_version2 img:hover {
    cursor: pointer;
}

.like_more_version2 span {
    display: inline-block;
    float: right;
    vertical-align: middle;
}

.like_more_version2 a:hover {
    text-decoration: underline !important;
}


/* Horver fa-chevron-down */

.fa-chevron-down:hover,
.fa-globe:hover,
.fa-camera:hover,
.fa-smile-o:hover {
    cursor: pointer;
}


/******************************************************/


/* Format right main body */

#right_home {
    display: block;
    width: 310px;
    float: left;
    position: absolute;
    top: 55px;
    color: #1d2129;
    left: 0;
    margin-left: 780px;
}


/* Format ads right main body */

#ads_right_home {
    display: block;
    width: 100%;
    background-color: #ffffff;
    border-left: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    border-radius: 2px;
}

#ads_right_home ul {
    padding-left: 10px;
    padding-right: 10px
}

#ads_right_home ul li {
    list-style: none;
    display: block;
    padding-top: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #d9d9d9;
}

#ads_right_home>ul>li>a {
    display: block;
}

#ads_right_home>ul>li>a>img {
    display: inline-block;
    vertical-align: middle;
}

#ads_right_home>ul>li>a>span {
    display: inline-block;
    color: #365899;
    font-weight: bold;
    font-size: 12px;
    vertical-align: middle;
}

.clear-border {
    border: 1px solid transparent !important;
}


/*Format suggested page */

#top_suggested_page {
    display: block;
    width: 100%;
    font-size: 11px;
    color: #a6a6a6;
    font-weight: bold;
    padding-bottom: 10px;
}

#top_suggested_page:after {
    content: ' ';
    display: block;
    clear: both;
}

#top_suggested_page a {
    display: inline-block;
    float: right;
    color: #365899;
    font-weight: normal;
    font-size: 12px;
}

#bottom_suggested_page {
    display: block;
    width: 100%;
    font-size: 13px;
}

#bottom_suggested_page span {
    margin-left: 8px;
}

#bottom_suggested_page a {
    color: #365899;
}

#suggested_group {
    display: block;
    width: 100%;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 2px;
}

#suggested_group>#top-suggested-group>img {
    display: block;
    width: 100%;
    height: 123px;
}

#suggested_group p {
    display: inline-block;
    font-size: 13px;
    color: #8c8c8c;
    margin-left: 10px;
}

#suggested_group a {
    margin-left: 10px;
}

#suggested_group button {
    display: inline-block;
    position: absolute;
}

#top-suggested-group:after {
    content: ' ';
    display: block;
    clear: both;
}

#bottom-suggested-group {
    width: 100%;
    width: 290px;
    height: 80px;
    position: relative;
}

#lf-bottom-suggested-group {
    display: inline-block;
    position: absolute;
    width: 180px;
    left: 30%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#lf-bottom-suggested-group p {
    display: inline-block;
    float: left;
    padding: 0;
    margin-left: 0;
    margin-right: 13px;
}

#lf-bottom-suggested-group span {
    display: inline-block;
    width: 150px;
    text-align: left;
    font-size: 13px;
    color: #8c8c8c;
    padding-left: 10px;
}

#rg-bottom-suggested-group {
    display: inline-block;
    position: absolute;
    width: 100px;
    left: 80%;
    top: 30%;
    transform: translateX(-50%) translateY(-50%);
}

.join_now {
    background-color: rgba(0, 0, 0, 0.03);
    border: none;
    color: #4d4d4d;
    font-size: 12px;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    padding: 5px 8px 5px 8px;
}


/* Reuse bold */

.reuse-bold {
    font-weight: bold;
    font-size: 13px;
}

.reuse-a {
    display: inline-block;
    font-weight: bold;
    font-size: 13px;
    font-weight: bold;
    color: #365899;
}

.reuse-a:hover {
    cursor: pointer;
    text-decoration: underline;
}

div#small_img {
    position: absolute;
    left: 10px;
    top: 84px;
}

div#small_img img {
    border: 1px solid #bfbfbf;
}


/* About right main body */

#about_right_home {
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    font-size: 13px;
    line-height: 20px;
}

#about_right_home a {
    display: inline-block;
    color: #90949c;
    margin-right: 8px;
}

#about_right_home a:hover {
    cursor: pointer;
    text-decoration: underline;
}


/***********************************************/


/* Chat main body */

#chat_main_body {
    display: block;
    position: fixed;
    top: 45px;
    left: 1137px;
    padding-top: 5px;
    padding-left: 2px;
    padding-bottom: 0;
    z-index: 1000;
}

#chat_main_body:after {
    content: ' ';
    display: block;
    clear: both;
}

#chat_main_body {
    display: block;
    left: 1137px;
    width: 215px;
    height: 693px;
    position: fixed;
    padding-top: 5px;
    padding-left: 2px;
    padding-bottom: 0;
    /*
    overflow-y: scroll;
    overflow-x: hidden;
*/
    bottom: 30px;
    right: 0;
    border-left: 1px solid rgb(204, 204, 204);
}

#chat_main_body li {
    display: block;
    list-style-type: none;
    font-size: 14px;
    padding: 5px 1px 5px 5px;
    position: relative;
}

#chat_main_body li:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.07);
}

#chat_main_body li>img {
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    border: 1px solid #ccc;
}

#chat_main_body li span {
    display: inline-block;
    vertical-align: middle;
}


/* Hover friend chat */

.fr1-chat {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    display: none;
    background-color: #fff;
    transform: translateX(-103%);
    z-index: 10000;
    padding: 10px;
    width: 350px;
    box-shadow: 0px 0px 8px #737373;
}

.fr1-chat>img {
    vertical-align: top;
    margin-right: 10px;
    float: left;
    z-index: 10000;
}

.fr1-chat a {
    color: #365899 !important;
    z-index: 100;
}

.fr1-chat>a {
    vertical-align: top;
    font-weight: bold;
    float: left;
}

.fr1-chat>span {
    line-height: 20px;
    margin-top: 30px;
    float: left;
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
}

.fr1-chat:hover {
    display: inline-block !important;
    cursor: default;
}

.fr1-chat:after,
.fr1-chat:before {
    content: ' ';
    display: inline-block;
    width: 0;
    height: 0;
    left: 102%;
    bottom: 75%;
    border-style: solid;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
    transform: translateX(-50%);
    position: absolute;
}

.fr1-chat:after {
    border-width: 10px;
    border-left-color: white;
}

.fr1-chat:before {
    border-width: 11px;
    border-left-color: #fff;
}

#chat_main_body li:hover .fr1-chat {
    display: inline-block !important;
    opacity: 1;
    z-index: 10000;
}

.online-chat {
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    height: 6px;
    width: 6px;
    top: 18px;
    right: 15px;
    background: rgb(66, 183, 42);
}

#bt_chat_main_body {
    display: block;
    width: 100%;
    position: fixed;
    bottom: 0;
}

#bt_chat_main_body i {
    display: inline-block;
    position: absolute;
    color: #bfbfbf;
}

#bt_chat_main_body i:hover {
    cursor: pointer;
}

#bt_chat_main_body input {
    font-size: 12px;
    width: 101%;
    padding: 7px 2px 7px 23px;
    border: none;
    margin-left: -2px;
}

.fa-search {
    font-size: 14px;
    top: 5px;
    left: 4px;
}

.fa-cog {
    font-size: 14px;
    top: 5px;
    left: 165px;
}

.fa-pencil-square-o {
    font-size: 15px;
    top: 5px;
    left: 185px;
}


/***********************************************************/


/* Format register page */

nav#header-rs {
    width: 100%;
    display: block;
    padding: 0 !important;
    margin: 0 !important;
    /* For browsers that do not support gradients */
    background: #4e69a2;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(#4e69a2, #3b5998 50%);
    /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(#4e69a2, #3b5998 50%);
    /* For Firefox 3.6 to 15 */
    background: -moz-linear-gradient(#4e69a2, #3b5998 50%);
    /* Standard syntax */
    background-image: linear-gradient(#4e69a2, #3b5998 50%);
    border-bottom: 1px solid #133783;
}

#header-rs:after {
    content: ' ';
    display: block;
    clear: both;
}

#header-rs>a>img {
    display: inline-block;
    margin: 30px 0 5px 182px;
    float: left;
}

#lg-header-rs {
    display: inline-block;
    float: right;
    margin-right: 182px;
    margin-top: 13px;
    font-size: 12px;
    line-height: 18px
}

#lg-header-rs label {
    color: #fff;
    padding-left: 1px;
}

#lg-header-rs tr {
    padding-bottom: 10px;
}

#lg-header-rs td {
    padding-left: 12px;
}

#lg-header-rs a {
    color: #9cb4d8;
}

#lg-header-rs a:hover {
    cursor: pointer;
    text-decoration: underline;
}

input[type="email"],
input[type="password"] {
    width: 150px;
    border: 1px solid #000;
    padding: 3px;
}

#lg-header-rs label:hover {
    cursor: pointer;
}

#lg-header-rs button[type="submit"] {
    margin: 0;
    background-color: #4267b2;
    border: 1px solid #29487d;
    padding: 0;
    padding: 4px 6px;
}


/************************/


/* Format main register */

#main-rs {
    display: block;
    width: 100% !important;
    background: linear-gradient(white, #D3D8E8);
}

#main-rs:after {
    content: ' ';
    display: block;
    clear: both;
}

#content-main-rs {
    display: block;
    width: 1050px;
    margin: 0 auto;
}

#content-main-rs:after {
    content: ' ';
    display: block;
    clear: both;
}

#left-main-rs {
    display: inline-block;
    float: left;
    width: 500px;
    padding-top: 54px;
    padding-left: 110px;
}

#left-main-rs>img {
    display: block;
}

#left-main-rs>span {
    display: block;
}

#tk-left-main-rs {
    display: block;
    color: #3b5998;
    font-family: "Freight Sans Semibold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 28px;
    line-height: 30px;
    margin-top: 15px;
    text-align: center;
    width: 300px;
    word-spacing: -1px;
}

#gb-left-main-rs {
    display: block;
    color: #1d2129;
    font-family: "Freight Sans Pro Book", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 26px;
    margin-top: 15px;
    text-align: center;
    width: 300px;
    word-spacing: -1px;
}

div#right-main-rs {
    display: inline-block;
    width: 413px;
    margin-left: 110px;
    float: left;
}

div#right-main-rs fieldset {
    border: 0;
}

div#right-main-rs>form>fieldset>span {
    display: block;
    margin-bottom: 10px;
}

#text-rg {
    font-size: 36px;
    color: #333;
    font-weight: bold;
    padding-top: 20px;
}

#text-free-forever {
    color: #1d2129;
    font-size: 19px;
    padding-bottom: 10px;
}

div#right-main-rs input[type="text"],
div#right-main-rs input[type="email"],
div#right-main-rs input[type="password"] {
    padding: 10px 20px 10px 10px;
    margin-bottom: 10px;
    border: 1px solid #bdc7d8;
    border-radius: 5px;
    font-size: 18px;
}

.text-first-name {
    width: 190px;
    margin-right: 10px;
}

.text-last-name {
    width: 195px;
}

div#right-main-rs input[type="email"],
div#right-main-rs input[type="password"] {
    display: block;
    width: 399px;
}

div#right-main-rs label {
    font-size: 18px;
}

#text-birthday {
    display: block;
}

#birthday-all {
    display: block;
    width: 100%;
}

#birthday-all:after {
    content: ' ';
    display: block;
    clear: both;
}

#birthday-all select {
    padding: 5px;
    margin-top: 5px;
    margin-left: 0px;
    float: left;
    margin-bottom: 20px;
}

#birthday-all a {
    display: inline-block;
    width: 149px;
    font-size: 11px;
    float: left;
    margin-top: 6px;
    margin-left: 7px;
    color: #365899;
}

#birthday-all a:hover {
    cursor: pointer;
    text-decoration: underline;
}

#female-rg {
    margin-left: 10px;
}

label[for="female"] {
    margin-right: 20px;
}

#term-rg {
    font-size: 11px;
    width: 312px;
    margin-top: 15px;
    color: #777;
}

#term-rg a {
    color: #365899;
}

#btn-rg {
    display: block;
    float: left;
    padding: 7px 54px;
    /* For browsers that do not support gradients */
    background: #fff;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(#67ae55, #578843);
    /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(#67ae55, #578843);
    /* For Firefox 3.6 to 15 */
    background: -moz-linear-gradient(#67ae55, #578843);
    /* Standard syntax */
    background: linear-gradient(#67ae55, #578843);
    box-shadow: 0px 0px 20px #999999;
    border: 1px solid #737373;
    font-size: 19px;
    margin-top: 10px;
}

#create-group-rs {
    display: block;
    float: left;
    margin-top: 30px;
    font-size: 13px !important;
    color: #666;
    font-weight: bold;
    margin-bottom: 30px;
}

#create-group-rs a {
    color: #365899;
}


/*****************************************************************/


/* Format footer register */

#footer-rs {
    display: block;
    width: 100%;
    background-color: #ffffff;
    padding-top: 10px;
    padding-bottom: 20px;
}

footer a {
    color: #365899;
}

footer a:hover {
    text-decoration: underline;
}

#content-footer-rs {
    display: block;
    width: 1000px;
    margin: 0 auto;
    font-size: 12px;
}

#language-content-footer-rs {
    display: inline-block;
    padding-bottom: 12px;
}

#language-content-footer-rs li {
    display: inline-block;
    color: #777;
    margin-right: 10px;
}

#language-content-footer-rs button {
    border: 0;
    background-color: #fff;
    padding: 2px 10px 2px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #4b4f56;
}

#language-content-footer-rs button:hover {
    background-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

#gird-content-footer-rs {
    display: table;
    width: 100%;
    padding-top: 13px;
    padding-bottom: 26px;
    position: relative;
}

#gird-content-footer-rs:after {
    position: absolute;
    top: 0;
    content: ' ';
    display: block;
    width: 958px;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.2);
}

#gird-content-footer-rs>tr {
    display: table-cell;
}

#gird-content-footer-rs td {
    padding-bottom: 5px;
    padding-right: 5px;
}

#content-footer-rs span {
    display: inline-block;
    font-size: 11px;
    color: #737373;
}


/**********************************************************************/


/* Format personal page */

#timeline {
    display: block;
    width: 1016px;
    margin-left: 80px;
    margin-top: 47px;
}

#timeline:after {
    content: ' ';
    display: block;
    clear: both;
}

#content_timeline {
    display: inline-block;
    width: 853px;
    float: left;
    height: 358px;
}

#content_timeline:after {
    content: ' ';
    display: block;
    clear: both;
}

#top_timeline {
    position: relative;
}

#top_timeline:hover {
    cursor: pointer;
}

#top_timeline:after {
    content: ' ';
    display: block;
    clear: both;
}

#banner_timeline {
    display: block;
    width: 853px;
    height: 316px;
    position: relative;
    float: left;
}

#banner_timeline>i,
#banner_timeline h3,
#banner_timeline #update_info,
#banner_timeline #view_activity_log {
    display: inline-block;
    position: absolute;
}

#banner_timeline>h3>span {
    vertical-align: middle;
}

#take-photo-wraper {
    position: absolute;
    display: inline-block;
    white-space: nowrap;
    top: 27px;
    left: 26px;
    padding: 3px 5px 3px 5px;
}

#take-photo-wraper:hover {
    cursor: pointer;
    border: 1px solid #e9ebee;
    background-color: rgba(0, 0, 0, .7)
}

#take-photo-wraper:hover .fa-camera1 {
    font-size: 15px;
    transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}

#take-photo-wraper:hover #take-photo {
    opacity: 1;
}

#take-photo {
    color: #e9ebee;
    display: inline-block;
    cursor: pointer;
    opacity: 0;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.fa-pencil {
    display: none;
    font-size: 14px;
    vertical-align: middle;
}

#banner_timeline>h3:hover {
    cursor: pointer;
}

#banner_timeline>h3:hover .fa-pencil {
    cursor: pointer;
    display: inline-block;
}

.fa-camera1 {
    color: #90949c;
    font-size: 19px;
    display: inline-block;
    vertical-align: middle;
}

#update_info {
    border: 1px solid #000;
    border-radius: 2px;
    font-family: helvetica, arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 12px 5px 12px;
    text-align: center;
    vertical-align: middle;
    color: #4b4f56;
    background-color: #f6f7f9;
    float: left;
    bottom: 17px;
    left: 496px;
}

#update_info:hover,
#view_activity:hover,
#view-other:hover {
    cursor: pointer;
    background-color: #e6e6e6;
}

#view_activity_log {
    bottom: 17px;
    left: 649px;
    display: block;
    border: 1px solid #000;
    border-radius: 2px;
}

#view_activity {
    border: none;
    border-right: 1px solid rgba(0, 0, 0, .15);
    font-family: helvetica, arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 12px 5px 12px;
    text-align: center;
    vertical-align: middle;
    color: #4b4f56;
    background-color: #f6f7f9;
    float: left;
}

#view-other {
    border: none;
    font-family: helvetica, arial, sans-serif;
    font-size: 4px;
    font-weight: bold;
    padding: 9.5px 12px 9.5px 12px;
    text-align: center;
    vertical-align: middle;
    color: rgba(0, 0, 0, .4);
    background-color: #f6f7f9;
    float: left;
}

#banner_timeline h3 {
    bottom: 15px;
    left: 202px;
    color: #fff;
    font-size: 25px;
    text-shadow: 0 0 3px rgba(0, 0, 0, .8);
}


/***********************************/


/*Navigation*/

#nav-timeline {
    display: block;
    width: 851px;
    text-align: center;
    float: left;
    margin-top: -1px;
    background-color: #ffffff;
    border-left: 1px solid rgba(0, 0, 0, .15);
    border-right: 1px solid rgba(0, 0, 0, .15);
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

#nav-timeline a {
    color: #365899;
}

#nav-timeline-primary {
    display: block;
    width: 529px;
    margin-left: 203px;
}

#nav-timeline-primary>li {
    display: inline-block;
    text-align: center;
    padding: 12px 16px 12px 16px;
    font-size: 14px;
    font-weight: bold;
    float: left;
    color: #4b4f56;
    border-right: 1px solid rgba(0, 0, 0, .08);
}

#special-nav-timeline-primary {
    border-left: 1px solid rgba(0, 0, 0, .08);
    position: relative;
}

#special-nav-timeline-primary:hover {
    background-color: #ffffff !important;
}

#special-nav-timeline-primary:after,
#special-nav-timeline-primary:before {
    content: " ";
    display: inline-block;
    width: 0;
    height: 0;
    left: 50%;
    border-style: solid;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    transform: translateX(-50%);
    position: absolute;
}

#special-nav-timeline-primary:after {
    border-width: 8px;
    border-bottom-color: #e9ebee;
    bottom: -2%;
}

#special-nav-timeline-primary:before {
    border-width: 8.9px;
    border-bottom-color: rgba(0, 0, 0, .15);
    bottom: 0%;
}

#nav-timeline-more {
    position: relative;
}

#nav-timeline-other {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    text-align: left;
    font-size: 11px;
    font-weight: normal;
    border: 1px solid rgba(0, 0, 0, .08);
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #fff;
}

#nav-timeline-other li {
    display: block;
    list-style: none;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 30px;
    padding-left: 20px;
    white-space: nowrap;
}

#nav-timeline-primary li:hover {
    background-color: rgba(0, 0, 0, .05);
}

#nav-timeline-more:hover #nav-timeline-other {
    display: block;
}


/* Avatar timeline */

#avatar-timeline {
    width: 170px;
    height: 170px;
    border: 1px solid rgba(0, 0, 0, .21);
    border-radius: 3px;
    position: absolute;
    bottom: 20px;
    left: 15px;
    text-align: center;
}

#avatar-timeline img {
    border: 4px solid #fff;
}

#take-avatar {
    position: absolute;
    display: inline-block;
    bottom: 3px;
    left: 3px;
    width: 160px;
    height: 51px;
}

.fa-camera2 {
    color: #e6e6e6;
    font-size: 22px;
    display: inline-block;
}

#avatar-timeline:hover {
    cursor: pointer;
}

#avatar-timeline:hover #take-avatar {
    cursor: pointer;
    background-color: rgba(0, 0, 0, .7)
}

#avatar-timeline:hover .fa-camera2 {
    font-size: 15px;
    transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}

#avatar-timeline:hover #take-avatar-wrapper {
    opacity: 1;
}

#take-avatar-wrapper {
    color: #e9ebee;
    display: inline-block;
    cursor: pointer;
    opacity: 0;
    width: 100px;
    height: 40px;
    font-size: 12px;
    font-weight: bold;
    white-space: normal;
    text-align: left;
    margin-top: 10px;
    vertical-align: middle;
}


/************************************************************/


/* Format timeline center */

#center-timeline {
    display: block;
    width: 100%;
    margin-top: 20px;
}

#center-timeline:after {
    content: ' ';
    display: block;
    clear: both;
}


/*******************************/


/* Format left timeline center */

#left-center-timeline {
    display: inline-block;
    width: 323px;
    float: left;
}


/* Format Address timeline */

#address-timeline {
    display: block;
    width: 100%;
    padding: 5px 20px 5px 10px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 3px;
}

#address-timeline ul li {
    display: block;
    position: relative;
    width: 100%;
    font-size: 12px;
    list-style-type: none;
    white-space: nowrap;
    padding: 7px 3px;
}

#address-timeline ul li:after {
    content: ' ';
    display: block;
    clear: both;
}

#address-timeline ul li i {
    display: inline-block;
    float: left;
    vertical-align: middle;
    font-size: 13px;
    width: 22px;
    text-align: center;
    color: #90949c;
}

#address-timeline ul li a {
    color: #365899;
}

#address-timeline ul li a:hover {
    cursor: pointer;
    text-decoration: underline;
}

.txt-address-timeline {
    display: inline-block;
    float: left;
    margin-top: -1px;
    width: 255px;
    white-space: normal;
    vertical-align: middle;
    margin-left: 5px;
}

.smtxt-address-timeline {
    color: #90949c;
}

.change-pencil {
    opacity: 0;
    position: absolute;
}

#address-timeline ul li:hover .change-pencil {
    opacity: 1;
}

.change-pencil:hover {
    background-color: #365899;
    color: #fff !important;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

#bottom-album-timeline {
    display: block;
    width: 100%;
    padding-left: 6px;
    padding-bottom: 5px;
}

#bottom-album-timeline:after {
    content: ' ';
    display: block;
    clear: both;
}

#bottom-album-timeline>span {
    width: 102px;
    height: 102px !important;
    float: left;
    margin-right: 2px;
    margin-bottom: 2px;
    position: relative;
}


/* Format Album timeline */

#album-timeline {
    display: block;
    width: 100%;
    margin-top: 15px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 3px;
}

#top-album-timeline {
    display: block;
    width: 100%;
    padding: 13px;
}

#top-album-timeline img {
    vertical-align: middle;
    margin-right: 5px;
}

#top-album-timeline img:hover {
    cursor: pointer;
}

.big-text {
    font-size: 18px;
    vertical-align: middle;
}

.big-text:hover {
    cursor: pointer;
    text-decoration: underline;
}

.chevron-down-album {
    display: none;
    float: right;
    font-size: 12px;
    margin-top: 5px;
}

#top-album-timeline:hover .chevron-down-album {
    display: inline-block;
}


/* Format Friend timeline */

.name-friend-timeline {
    position: absolute;
    /* For browsers that do not support gradients */
    background: transparent;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, .3));
    /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(transparent, rgba(0, 0, 0, .3));
    /* For Firefox 3.6 to 15 */
    background: -moz-linear-gradient(transparent, rgba(0, 0, 0, .3));
    /* Standard syntax */
    background: linear-gradient(transparent, rgba(0, 0, 0, .3));
    z-index: 1000;
    bottom: 0;
    left: 0;
    width: 101px;
    height: 101px;
    font-size: 12px;
    text-align: left;
    font-weight: bold;
    padding-left: 10px;
    line-height: 180px;
    color: #fff;
}


/*******************************/


/* Format right timeline center */

#right-center-timeline {
    display: inline-block;
    width: 511px;
    float: left;
    margin-left: 15px;
}


/*******************************/


/* Format new post timeline ( Reused new post home (index.html) ) */

#upload-timeline {
    width: 100%;
    display: block;
    background-color: #f6f7f9;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .15);
}

#upload-timeline>span {
    display: inline-block;
    margin-right: 5px;
    padding-left: 10px;
    position: relative;
}

#upload-timeline>span:hover {
    cursor: pointer;
}

.border-after {
    position: relative;
}

.border-after:after {
    content: ' ';
    display: block;
    position: absolute;
    width: 1px;
    height: 15px;
    top: 5px;
    left: 0;
    background-color: rgba(0, 0, 0, .15);
}

#upload-timeline>span>span {
    color: #4b4f56;
    font-size: 12px;
    font-weight: bold;
}

#upload-timeline img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}


/*******************************/


/* Format post timeline */

.img-timeline {
    width: 485px !important;
    height: 215px !important;
    float: left;
}

.img-group {
    width: 472px;
    height: 250px;
}

.post-timeline {
    display: inline-block;
    width: 100%;
    height: 297px;
    float: left;
    position: relative;
    line-height: 20px;
    border: 1px solid #ccc;
    text-align: center;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .15);
}

.beautiful-fb {
    position: absolute;
    top: 10px;
    left: 10px;
}

.happy {
    margin-top: 20px;
    display: block;
    width: 100%;
    line-height: 20px;
    text-align: center;
    float: left;
}


/************************************************************/


/* Format timeline ads */

#ads_timeline {
    display: inline-block;
    width: 150px;
    float: left;
    position: fixed;
    padding-top: 20px;
    padding-left: 10px;
}


/*******************************/


/* Format intro ads */

#intro_ads {
    display: block;
    width: 150px;
    font-size: 13px;
    font-weight: bold;
    padding-bottom: 5px;
}

#intro_ads a {
    color: #666;
}

#intro_ads a:hover {
    cursor: pointer;
    text-decoration: underline;
}


/*******************************/


/* Format view ads */

#view_ads {
    display: block;
    width: 150px;
    font-size: 11px;
    padding-top: 15px;
    padding-bottom: 10px;
    border-top: 1px solid #ccc;
}

#view_ads>a {
    display: block;
    color: #3b5998;
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#view_ads img {
    display: block;
    width: 150px;
    height: 77px;
    margin-bottom: 20px;
}

.small-character {
    font-size: 11px;
    color: rgba(0, 0, 0, .45);
}


/************************************************************************/


/********************** Group facebook **************************/


/***********************************************/


/* Top group facebook */

#top-group {
    display: inline-block;
    width: 820px;
    margin-left: 265px;
    margin-top: 20px;
}


/* Banner group facebook */

#banner-group {
    display: block;
    position: relative;
    width: 820px;
    height: 302px;
}

#banner-group img {
    width: 820px;
    height: 302px;
}

#banner-group>span {
    display: inline-block;
    position: absolute;
    text-shadow: 0 0 3px rgba(0, 0, 0, .5);
    color: #fff;
    bottom: 20px;
    left: 15px;
    z-index: 1000;
}

#banner-group>span>a {
    display: inline-block;
    font-weight: normal;
    color: #fff;
    font-size: 25px;
}

#banner-group>span>a:hover {
    cursor: pointer;
    text-decoration: underline;
}

#banner-group>span>h4 {
    display: block;
    width: 100px;
    font-weight: normal;
}

#banner-group>span>h4:hover {
    cursor: pointer;
}

#banner-group>span>h4:hover span {
    text-decoration: underline;
}

#banner-group>span>h4 i {
    font-size: 18px;
    margin-right: 5px;
}

#banner-group>span>h4>span {
    display: inline-block;
    font-size: 14px;
}

#banner-group>span>h4>p {
    display: none;
    width: 326px;
    position: absolute;
    background-color: #000;
    padding: 5px 10px 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    top: -20%;
    left: 0;
}

#banner-group>span>h4>p:after {
    content: ' ';
    display: inline-block;
    width: 0;
    height: 0;
    bottom: 0;
    left: 10px;
    position: absolute;
    border-width: 4px;
    border-style: solid;
    border-top-color: #000;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: translateY(100%);
}

#banner-group>span>h4:hover p {
    display: inline-block;
    text-decoration: 3s;
}

#banner-group>span>h4>p:hover {
    display: none;
}

#banner-group>button,
#other-banner {
    display: inline-block;
    position: absolute;
    z-index: 1000;
}

#banner-group>button {
    text-align: center;
    background-color: #fff;
    width: 100px;
    padding: 5px 10px;
    bottom: 16px;
    font-weight: bold;
    color: #4b4f56;
    font-size: 12px;
    left: 478px;
    border-radius: 2px;
    border: 0;
    border: 1px solid rgba(0, 0, 0, .75);
    white-space: nowrap;
    text-overflow: ellipsis;
}

#banner-group button:hover {
    cursor: pointer;
    background-color: #f6f7f9;
}

#banner-group>button>i {
    display: inline-block;
    font-size: 16px;
    vertical-align: middle;
}

#banner-group>button>span {
    display: inline-block;
    vertical-align: middle;
}

#ignored-group {
    display: none;
    position: absolute;
    top: 140%;
    left: 0;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, .15);
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}

#ignored-group:after {
    content: ' ';
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 13px;
    border-width: 8px;
    border-style: solid;
    border-top-color: transparent;
    border-bottom-color: #fff;
    border-left-color: transparent;
    border-right-color: transparent;
    transform: translateY(-100%);
}

#banner-group>button:hover #ignored-group {
    display: inline-block;
}

#ignored-group li {
    list-style: none;
    text-align: left;
    padding: 5px 10px;
}

#ignored-group li a {
    color: #4b4f56;
}

#ignored-group li:hover {
    background-color: #365899;
}

#ignored-group li:hover a {
    color: #fff;
}

#other-banner {
    border: 1px solid rgba(0, 0, 0, .75);
    bottom: 16px;
    right: 15px;
}

#other-banner>button {
    display: inline-block;
    float: left;
    padding: 5px 10px;
    border: none;
    background-color: #fff;
    color: #4b4f56;
    font-weight: bold;
    font-size: 12px;
    border-right: 1px solid rgba(0, 0, 0, .15);
}

#other-banner .fa-check {
    color: #0099ff;
}

.hover-notice-group {
    position: relative;
}

.notice-group {
    display: none;
    width: 150px;
    position: absolute;
    background-color: #000;
    color: #fff;
    padding: 5px 10px 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: normal;
    top: -130%;
    left: 0;
}

.notice-group:after {
    content: ' ';
    display: inline-block;
    width: 0;
    height: 0;
    bottom: 0;
    left: 10px;
    position: absolute;
    border-width: 4px;
    border-style: solid;
    border-top-color: #000;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: translateY(100%);
}

.hover-notice-group:hover .notice-group {
    display: inline-block;
}

.notice-group:hover {
    display: none;
    opacity: 0;
}

.circle-group i {
    font-size: 4px;
    margin-left: -2px;
    vertical-align: middle;
    color: rgba(0, 0, 0, .35);
    border-right: 0;
}

.cover-linear {
    display: block;
    position: absolute;
    width: 820px;
    height: 102px;
    bottom: 0;
    left: 0;
    /* For browsers that do not support gradients */
    background: white;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, .6));
    /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(transparent, rgba(0, 0, 0, .6));
    /* For Firefox 3.6 to 15 */
    background: -moz-linear-gradient(transparent, rgba(0, 0, 0, .6));
    /* Standard syntax */
    background: linear-gradient(transparent, rgba(0, 0, 0, .6));
}


/*Navigation group facebook */


/*menu*/

#nav-group {
    display: block;
    width: 100%;
    background-color: #fff;
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: 3px;
}

#nav-group:after {
    content: ' ';
    display: block;
    clear: both;
}

#menu-nav-group {
    display: inline-block;
    width: 450px;
    float: left;
}

#menu-nav-group ul li {
    display: inline-block;
    list-style-type: none;
    float: left;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    position: relative;
}

#menu-nav-group ul li span {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(0, 0, 0, .12);
    float: left;
}

#menu-nav-group ul li:nth-child(1) {
    position: relative;
}

#menu-nav-group ul li:nth-child(1):after {
    content: ' ';
    display: block;
    width: 70px;
    height: 3px;
    background-color: #3b5998;
    position: absolute;
    bottom: 0;
    left: 15px;
}

.border-bt-menu {
    display: none;
    width: 70%;
    height: 3px;
    background-color: rgba(0, 0, 0, .2);
    text-align: center;
    margin: auto;
    position: absolute;
    bottom: 0;
}

#menu-nav-group ul li:hover .border-bt-menu {
    display: inline-block;
}

.reset-border {
    border-right: 1px solid transparent !important;
}

.bold {
    font-weight: bold;
}


/*Search*/

#search-nav-group {
    display: inline-block;
    width: 250px;
    float: right;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
}

#inside-search {
    display: inline-block;
    width: 224px;
    height: 24px;
    border: 1px solid rgba(0, 0, 0, .32);
    text-align: left;
    padding-left: 5px;
}

#search-nav-group input {
    border: none;
    font-size: 12px;
    width: 195px;
    border-right: 1px solid #d0d1d5;
    outline: none;
}

#inside-search i {
    color: rgba(0, 0, 0, .32);
    font-size: 13px;
}


/***********************************************/


/* Bottom group facebook */

#bottom-group {
    display: block;
    width: 820px;
    margin-left: 265px;
    margin-top: 20px;
}

#bottom-group:after {
    content: ' ';
    display: block;
    clear: both;
}


/*All posts group facebook*/

#posts-group {
    display: inline-block;
    width: 500px;
    float: left;
}

.change-bgc-group {
    background-color: #fff !important;
}

.border-after ul {
    position: absolute;
    display: none;
    width: 200px;
    background-color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: 1000;
    top: 121%;
    right: 0;
    border: 1px solid rgba(0, 0, 0, .15);
    box-shadow: 0 0 8px rgba(0, 0, 0, .3);
}

.border-after:hover ul {
    display: inline-block;
}

.border-after ul li {
    list-style-type: none;
    padding: 5px;
    font-size: 12px;
}

.border-after ul li:hover {
    background-color: rgba(0, 0, 0, .03);
}

.border-after ul li img {
    width: 16px !important;
    height: 16px !important;
    margin-right: 5px;
}

.border-after ul:after,
.border-after ul:before {
    content: ' ';
    display: inline-block;
    width: 0;
    height: 0;
    top: 0;
    position: absolute;
    border-style: solid;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    transform: translateY(-100%);
}

.border-after ul:after {
    border-bottom-color: #fff;
    right: 13px;
    border-width: 7px;
}

.border-after ul:before {
    right: 12px;
    border-width: 8px;
    border-bottom-color: rgba(0, 0, 0, .15);
}

.post-group {
    display: inline-block;
    border: 1px solid #ccc;
    margin-top: 10px;
}

.post-group:after {
    content: ' ';
    display: block;
    clear: both;
}

.event-group {
    display: block;
    width: 100%;
    padding: 10px;
}

.event-group:after {
    content: ' ';
    display: block;
    clear: both;
}

.event-group li {
    list-style-type: none;
    display: inline-block;
    float: left;
    margin-right: 10px;
    padding-top: 5px;
    vertical-align: middle;
}

.event-group li:nth-child(1) {
    width: 70px;
    text-align: center;
    line-height: 35px;
}

.event-group li:nth-child(1) h3 {
    display: block;
    white-space: nowrap;
    font-size: 14px;
    line-height: 14px;
    font-weight: normal;
    color: rgb(250, 62, 62);
}

.event-group li:nth-child(1) h2 {
    display: block;
    font-size: 23px;
    font-weight: normal;
}

.event-group li:nth-child(2) {
    width: 260px;
}

.event-group li:nth-child(2) h3 {
    display: block;
    font-size: 14px;
    line-height: 14px;
    font-weight: bold;
}

.event-group li:nth-child(2) h3 a {
    width: 270px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #000 !important;
}

.event-group li:nth-child(2) h3 a:hover {
    text-decoration: underline !important;
}

.event-group li:nth-child(2) h4 {
    font-size: 12px;
    line-height: 12px;
    margin-top: 5px;
    font-weight: normal;
    color: rgb(75, 79, 86);
}

.event-group li:nth-child(2) h4 {
    font-size: 12px;
    color: rgb(144, 148, 156);
}

.event-group li:nth-child(3) {
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 0 !important;
}

.event-group li:nth-child(3) button {
    width: 90px;
    margin-right: 0;
    border: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12px;
    background-color: #f6f7f9;
    color: #4b4f56;
    font-weight: bold;
    /*    background-color: #e9ebee;*/
}

.event-group li:nth-child(3) button:hover {
    cursor: pointer;
    background-color: #e9ebee;
}

.remove-border {
    border-bottom: 1px solid transparent !important;
    padding-bottom: 0 !important;
}


/* Other group facebook */

#other-group {
    display: inline-block;
    width: 310px;
    float: left;
    margin-left: 10px;
}


/* Member group */

#member-group {
    display: block;
    width: 100%;
    padding: 5px 10px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
}

#member-group li {
    list-style-type: none;
    margin-top: 5px;
}

#member-group li:nth-child(2) {
    position: relative;
    color: #90949c;
}

#member-group li:nth-child(2) i {
    position: absolute;
    top: 6.5px;
    left: 6px;
    font-size: 12px;
}

#member-group li:nth-child(2) input {
    font-family: "helvetica neue", helvetica, arial, "lucida grande", sans-serif;
    width: 290px;
    border: none;
    padding: 5px 5px 5px 20px;
    font-size: 12px;
    border: 1px solid #ccc;
}

#img-member-group {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

#member-group li:nth-child(3) div:after {
    content: ' ';
    display: block;
    clear: both;
}

#member-group li:nth-child(3) div span {
    float: left;
}

#member-group li:nth-child(3) div a {
    float: right;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: normal;
    color: #4267b2;
}

#member-group li:nth-child(3) div a:hover {
    text-decoration: underline;
}

#img-member-group div a:hover {
    cursor: pointer;
    text-decoration: underline;
}

#img-member-group:after {
    content: ' ';
    display: block;
    clear: both;
}

#img-member-group>li {
    display: inline-block;
    float: left;
    margin-right: 5px;
}

#img-member-group li img {
    display: block;
}

#member-group li:nth-child(3) ul li img {
    width: 44px;
    height: 44px;
    border: 1px solid #ccc;
}

.text-group {
    display: block;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    color: #90949c;
}

#member-group li:nth-child(5) {
    text-align: left;
    font-size: 12px;
}

#member-group li:nth-child(5) a {
    color: #4267b2;
}

#member-group li:nth-child(5) a:hover {
    cursor: pointer;
    text-decoration: underline;
}


/* Creater group */

#creater-group {
    display: block;
    width: 100%;
    padding: 5px 0px 15px 10px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    margin-top: 15px;
}

#creater-group>ul {
    margin-top: 20px;
}

#creater-group>ul:after {
    content: ' ';
    display: block;
    clear: both;
}

#creater-group>ul>li {
    list-style-type: none;
    font-size: 12px;
    display: inline-block;
}

#creater-group>ul>li:nth-child(1) {
    float: left;
    width: 197px;
}

#creater-group>ul>li:nth-child(2) {
    width: 90px;
    margin-top: 10px;
    text-align: center;
    float: left;
}

#creater-group button {
    border: none;
    font-weight: bold;
    color: #fff;
    padding: 4px 7px;
    background-color: #42b72a;
    border-radius: 2px;
}

#creater-group button:hover {
    cursor: pointer;
}


/* All album group */

#album-group {
    display: block;
    width: 100%;
    padding: 5px 0px 10px 10px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    margin-top: 15px;
}

#album-group span {
    display: inline-block;
    float: left;
}

#album-group div {
    display: block;
    width: 95%;
    margin-bottom: 20px;
}

#album-group div:after {
    content: ' ';
    display: block;
    clear: both;
}

#album-group div a {
    float: right;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: normal;
    color: #4267b2;
}

#album-group ul {
    display: block;
}

#album-group ul:after {
    content: ' ';
    display: block;
    clear: both;
}

#album-group ul li {
    list-style: none;
    display: inline-block;
    float: left;
    margin-right: 10px;
    border: 1px solid #ccc;
}

#album-group ul li img {
    display: block;
    width: 87px;
    height: 87px;
}


/* Start creater group */

#star-creater-group {
    display: block;
    width: 100%;
    padding: 5px 0px 10px 15px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    margin-top: 15px;
}

#like-creater-group {
    width: 95%;
    margin: auto;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    margin-left: -1px;
    margin-top: 15px;
}

#toplk-creater-group {
    background-color: #f6f7f9;
    padding: 30px 20px 30px 20px;
    border-bottom: 1px solid #d9d9d9;
}

#toplk-creater-group:after {
    content: ' ';
    display: block;
    clear: both;
}

#toplk-creater-group li {
    display: inline-block;
    list-style: none;
    width: 52px;
    height: 52px;
    float: left;
    position: relative;
    margin-right: -5px;
}

#toplk-creater-group li:nth-child(1) {
    z-index: 1;
}

#toplk-creater-group li:nth-child(2) {
    z-index: 2;
}

#toplk-creater-group li:nth-child(3) {
    z-index: 500;
}

#toplk-creater-group li:nth-child(4) {
    z-index: 4;
}

#toplk-creater-group li img {
    border: 3px solid #fff;
}

#toplk-creater-group li:nth-child(1) img {
    margin-top: 7px;
    width: 52px;
    height: 52px;
}

#toplk-creater-group li:nth-child(2) img {
    margin-top: 2px;
    width: 60px;
    height: 60px;
}

#toplk-creater-group li:nth-child(3) img {
    width: 64px;
    height: 64px;
}

#toplk-creater-group li:nth-child(4) img {
    margin-top: 2px;
    width: 60px;
    height: 60px;
}

#toplk-creater-group li:nth-child(5) {
    margin-top: 7px;
    width: 52px;
    height: 52px;
}

#toplk-creater-group li img,
#toplk-creater-group li:nth-child(5) {
    display: block;
    border-radius: 50px;
}

#toplk-creater-group li:nth-child(5) {
    text-align: right;
    line-height: 54px;
    font-size: 17px;
    background-color: #e9ebee;
    padding-bottom: -10px;
}

#toplk-creater-group li:nth-child(5) span {
    margin-right: 5px;
}

#bottomlk-creater-group {
    display: block;
    width: 100%;
}

#bottomlk-creater-group:after {
    content: ' ';
    display: block;
    clear: both;
}

#bottomlk-creater-group span {
    display: inline-block;
    width: 200px;
    height: 50px;
    float: left;
    text-align: left;
    font-weight: bold;
    position: relative;
    font-size: 12px;
}

#bottomlk-creater-group>span>div {
    position: absolute;
    width: 100%;
    left: 55%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#bottomlk-creater-group>div {
    display: inline-block;
    width: 75px;
    float: left;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

#bottomlk-creater-group div button {
    display: inline-block;
    padding: 5px 8px 5px 8px;
    background-color: #f6f7f9;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-weight: bold;
    font-size: 12px;
}

#bottomlk-creater-group div button a {
    color: #4b4f56;
}

#bottomlk-creater-group div button:hover {
    cursor: pointer;
    background-color: #e9ebee;
}


/*************************************************************************************/


/******************************************/


/* Preview facebook */

#preview-facebook {
    display: block;
    max-width: 1360px;
    margin: 0;
    font-family: 'Arvo', serif;
    overflow-x: hidden;
    padding: 0;
    background-image: url(/img/bg.jpg);
    font-weight: 200;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    padding-bottom: 15px;
}

#img-demos {
    width: 80%;
    transform: translate(10%);
    text-align: center;
    font-size: 25px;
    text-transform: uppercase;
}

#img-demos li {
    display: inline-block;
    margin: 0 3rem;
    margin-top: 40px;
}

#img-demos a {
    position: relative;
    cursor: pointer;
}

#img-demos a:hover {
    color: #dbd8d3;
}

#img-demos a:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -5;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) skew(-89deg) scaleX(1.5);
    opacity: 0;
    background: #000;
    transition: all 0.3s cubic-bezier(0.42, 0.08, 0, 1.8);
}

#img-demos a:hover:after {
    width: 140%;
    transform: translateX(-50%) skew(-20deg) scaleX(1);
    opacity: 1;
}

#img-demos a span {
    display: inline-block;
}

#img-demos a img {
    width: 300px;
    display: block;
}
.mg-bottom {
    margin-bottom: 20px;
}

/*
*/