/* Dropdown
------------------------------------------------ */

.dropdown {
    width: 170px;
    padding: 10px 15px;
    background: #fff;

    position: fixed;
    display: none;
    z-index: 50;

    font-size: 1.4rem;
    line-height: 1.8em;

    border-radius: 5px;
    border: 1px solid #e0e0e0;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.08);
}

.dropdown .dropdown-inner {
    overflow: hidden;
    height: 100%;
}

.dropdown:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
	-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
	    transform: rotate(45deg);
    display: block;
    background-color: #FFF;
}

.dropdown--top:before    {    top: -6px; border-left:  1px solid #d2d2d2; border-top:    1px solid #d2d2d2; }
.dropdown--bottom:before { bottom: -6px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; }

.dropdown--left:before   {  left: 14px; }
.dropdown--right:before  { right: 14px; }

.dropdown li { margin: 0; }
.dropdown li a { color: #444; display: block; }

.dropdown.isVisible { display: block; }

/* Dropdown: Post Likes Dropdown
------------------------------------------------ */

.dropdown--likes { width: 250px; position: absolute; bottom: 49px; left: -10px; background-color: #FFF; }
.dropdown--likes:before { left: 32px; }

@media (max-width: 748px) {
    .dropdown--likes { left: -50px; }
    .dropdown--likes:before { left: 73px; }
}

@media screen and (max-width: 549px) {
    .dropdown--likes { left: -20px; }
    .dropdown--likes:before { left: 27px; }
}

.likes-list { }
.likes-list-intro { font-size: 1.3rem; line-height: 2.1rem; padding: 4px 4px 1rem 4px; }
.likes-list ul { list-style: none; margin-bottom: 0; }
.likes-list ul li { overflow: hidden; }
.likes-list .user-avatar { float: left; }
.likes-list .user-name { float: left; line-height: 3.4rem; font-size: 1.3rem; padding-left: 9px; }
.likes-list .user-name a { color: #333; }
.likes-list .btn { font-size: 1rem; padding: 9px 18px; width: 78px; padding: 9px 0px; line-height: 1.45rem; letter-spacing: 0.04rem; }


/* Dropdown: Post Share Dropdown
------------------------------------------------ */

.dropdown--share { width: 130px; position: absolute; top: 46px; right: -8px; left: inherit; background-color: #FFF; }
.dropdown--share:before { left: 103px; }

.share-list { }
.share-list-intro { font-size: 1.3rem; line-height: 2.1rem; padding: 4px 4px 1rem 4px; text-align: center; }
.share-list ul { list-style: none; margin-bottom: 0; text-align: center; }
.share-list ul li { overflow: hidden; display: inline-block; padding: 0px 5px; font-size: 2rem; margin: 0px; }

.dropdown--qShare { width: 130px; position: absolute; top: 31px; right: -13px; left: inherit; background-color: #FFF; }
.dropdown--qShare:before { left: 103px; }


/* Dropdown: Post Share Dropdown
------------------------------------------------ */

.dropdown--notifications { padding: 0; right: -5px; top: 57px; z-index: 2050; width: 360px; position: absolute; }
.dropdown--notifications:before { content: ''; top: -6px; right: 54px; border-left: 1px solid #ddd; border-top: 1px solid #ddd; }

.notification-list          { list-style: none; margin: 0; }
.notification-item          { position: relative; color: #8F8F8F; padding: 20px 0; line-height: 18px; }
.notification-item:after    { content: ""; border-bottom: 1px solid #F3F2F2; height: 1px; width: 358px; position: absolute; left: -20px; bottom: 0px; }
.notification-item a        { color: #333; }
.notification-item a:hover  { color: #000;; }
.notification-item.isHidden { display: none; }
.notification-item--not-dismissed { display: flex; }
.notification-avatar        { float: none; display: inline-block; }
.notification-message       { display: inline-block; width: 253px; vertical-align: top; margin-top: -2px; width: 70%; width: calc(100% - 50px); }
.notification-time          { display: block; font-size: 1.2rem; color: #8F8F8F; }
.notification-morebtn       { color: #9633ff; position: relative; top: 4px; }

.notification-item--noitem  { padding-top: 10px; }

.notification-list.showAll .isHidden               { display: flex; }
.notification-list.showAll + .notification-morebtn { display: none; }
.notification-list.showAll li:last-of-type         { margin-bottom: 0; }
.notification-list.showAll li:last-of-type:after   { border: none; }

@media screen and (max-width: 500px) {
    .dropdown--notifications { padding: 0; right: -8px; top: 53px; z-index: 2050; width: 106%; max-width: 360px; }
    .dropdown--notifications:before { right: 58px; }
}


/* Dropdown: Action Dropdown
    - on "My Posts" when there's more options
      then just delete, we create a dropdown to
      hold them.. like delete, publish, edit....
------------------------------------------------ */

.dropdown--actions {
    padding: 2px;
    margin-top: 17px;
    width: 90px;
    margin-left: -4px;
    position: absolute;
}

.dropdown--actions:before {
    content: '';
    top: -6px;
    right: 45%;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

.actions-list { }
.actions-list li { margin: 8px 0; }


/* Dropdown: Sociallist
    on an Article, if there's too many social
------------------------------------------------ */



/* SOCIALLIST:

   List of social icons the user has entered like fb, twitter...

   - first show all icons if the viewport-width is over > 850px
   - if we're under 850px only show 2 icons and display the others
     inside a dropdown

   [1] Always hide dropdown if we're over 850 and showing all icons

-------------------------------------------------------------------- */

.sociallist { margin-top: 1px; }
.sociallist_more { display: none; }

@media (max-width: 850px){
    .sociallist .sl:nth-of-type(2) ~ .sl { display: none; }
    .sociallist_more { display: initial; margin-left: 13px; position: relative; top: 1px; }
    .sociallist .sl:nth-of-type(2) + .sociallist_more { display: none; } /* [1] */
}


/* SOCIALLIST:

   The Internals of the dropdown

   [1] Always hide dropdown when there are just 2 icons

-------------------------------------------------------------------- */

.dropdown--sociallist { width: auto; position: absolute; right: 9px; width: auto; position: absolute; width: auto; top: 55px; }
.dropdown--sociallist .sl { display: none; }
.dropdown--sociallist .sl:nth-of-type(2) ~ .sl { display: inline-block; margin: 0; margin: 5px 10px; }

@media (min-width: 1027px) {
    .dropdown--sociallist { right: 9px; }
}

/* SOCIALLIST CLONE: SHAREWRAP
-------------------------------------------------------------------- */

.sharewrap {}
.sharewrap .bottom-info-bookmark { margin-right: 0; }
.sharewrap .share-list-intro { display: inline-block; overflow: hidden; width: 100%; border-top: 1px solid #dddddd; margin-top: 6px; padding-top: 5px; margin-bottom: -9px; }
.sharewrap .share-list-ul { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; }
.sharewrap .share-list-ul li { margin: 0px 5px; }

.sub-menu--community_followers,
.sub-menu--community_following { display: flex; flex-direction: column; align-items: center; line-height: 1.2; color: #272727; letter-spacing: 0.05em; font-size: 14px; font-weight: 500; }

.sub-menu--community_followers { margin-right: 10px; }

/* Options Dropdown
-------------------------------------------------------------------- */

.dropdown--options { position: absolute; top: 36px; right: 9px; margin-top: 9px; width: auto; }
.dropdown--options:before { left: 47px; }
.dropdown--options li { margin: 0; line-height: 2em; padding: 0 5px; }

/* Article Options Dropdown
-------------------------------------------------------------------- */

.dropdown--articleoptions { position: absolute; top: 23px; right: -13px; width: auto; list-style-type: none; }
.dropdown--articleoptions:before { right: 15px; }
.dropdown--articleoptions li a:hover { color: black; }

/* AD Options Dropdown
-------------------------------------------------------------------- */

.dropdown--adinfo { right: 24px; top: 50px; width: auto; }
.dropdown--right:before { right: 14px; }


/* Dropdown: Animation
---------------------------------------------*/

.dropdown--fade-scale {
    -webkit-animation: scale-fade 150ms forwards cubic-bezier(.8, .02, .45, .91);
            animation: scale-fade 150ms forwards cubic-bezier(.8, .02, .45, .91);
    -webkit-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
            transform-origin: bottom center;
}

.dropdown--fade-scale-top {
    -webkit-animation: scale-fade 150ms forwards cubic-bezier(.8, .02, .45, .91);
            animation: scale-fade 150ms forwards cubic-bezier(.8, .02, .45, .91);
    -webkit-transform-origin: top center;
        -ms-transform-origin: top center;
            transform-origin: top center;
}