/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Dec 11, 2020, 2:34:58 PM
    Author     : alvin
*/

 #user-profile-container {
               padding-bottom:20px;
               border-bottom:1px dotted #777;
           }
           #user-profile-avatar-img {
               width:100px;
               height: 100px;
               border-radius: 50%;
           }
           .btn-follow {
               color:white;
               background-color:black;
               padding:5px;
               width: 80%;
               outline:none;
               border:none;
               border-radius: 5px;
               transition: 0.25s;
           }
           .btn-follow:hover {
                background-color:rgba(0,0,0,0.8);
           }


           .editor-minds-div {
               min-height: 288px;
               margin-top: 30px;
               transition: 0.25s;
               animation: sharp-effect 1s;
           }

           @keyframes sharp-effect {
               0%   {opacity:0;}
               100% {opacity:1;}
           }
           .editor-minds-div:hover {
               transform:scale(1.05);
           }
           .editor-minds-div img {
               transition:0.25s;
               width:100%;
           }

           a {
               color:black;
           }
           a:hover {
               color:black;
           }
           .favourite-love-icon {
               transition:0.25s;
           }
           .favourite-love-icon:hover {
               color:red;
           }
           .profile-mind-category-tag {
              text-align: right;
              background: black;
               border-radius: 3px 0 0 3px;
               color: #fff;
               display: inline-block;
               font-size: 10px;
               height: 22px;
               line-height: 22px;
               padding: 0 20px 0 13px;
               position: relative;
               text-decoration: none;
               -webkit-transition: color .2s;
           }
           .profile-mind-category-tag::after {
               background: #fff;
               border-bottom: 13px solid transparent;
               border-left: 10px solid black;
               border-top: 9px solid transparent;
               content: '';
               position: absolute;
               right: 0;
               top: 0;
           }
           .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
               background-color:black;
               color:white;
           }
           .pagination>li>a, .pagination>li>span {
               color:black;
           }
           .minds-title {
               overflow: hidden;
               text-overflow: ellipsis;
               display: -webkit-box;
               height: 40px;
               -webkit-line-clamp: 2; /* number of lines to show */
               -webkit-box-orient: vertical;
           }
           .show-pointer {
               transition:0.25s;
               cursor: pointer;
           }
           .little-helper-filter-btn {
               color:white;
               background-color:black;
               padding:5px;
               width: 80%;
               outline:none;
               border:none;
               border-radius: 5px;
               transition: 0.25s;
           }
           .little-helper-filter-btn:hover {
               background-color:rgba(0,0,0,0.8);
           }


              .article-content-div {
               padding-top: 30px;
               padding-bottom: 50px;
               border-bottom: 1px solid #e7e7e7;
           }

           .article-img-cover-container:hover .overlay-view-total {
               top: 80%;
           }

           .article-img-cover-container:hover .overlay {
               opacity: 1;
           }
           .article-img-cover-container {
               overflow: hidden;
           }
           .article-img-cover-container > picture > img {
               width:100%; 
           }


                .overlay {
            position: absolute;
            bottom: 0;
            left: 15px;
            right: 0;
            background-color:rgba(0,0,0,0.4);
            overflow: hidden;
            width: calc(100% - 30px);
            height: 100%;
            opacity: 0;
            transition: .5s ease;
            cursor: pointer;
        }
        .overlay-view-more {
            color: white;
            font-size: 13px;
            position: absolute;
            font-weight: 800;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
        }
        .overlay-view-total {
            color: white;
            font-size: 10px;
            position: absolute;
            font-weight: 800;
            top: 110%;
            width:80%;
            border-top:0.01em solid rgba(255,255,255,0.5);
            border-width: 0.01em;
            padding-top:10px;
            transition:0.25s;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .article-title-h4 {
            cursor: pointer;
            color:black;
            transition: 0.25s;
            font-size: 20px;
            font-family: 'Sorts Mill Goudy', sans-serif;
            line-height: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            height: 85px;
          
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;

        }
        .article-title-h4:hover {
            color:grey;
            text-decoration: none;
        }
        .editor-name {
            color:#919191;
        }
        .article-ul {
            list-style: none;
            padding: 0px;

        }
        .article-li {
            display: inline;
            cursor:pointer;
            margin-right: 10px;
            color:black;

        }
        .article-share-li {
            color:lightgrey;
            font-weight: 400;
            font-size: 12px;
        }
        .category-a-link {
            border-radius: 3px 0 0 3px;
            color: black;
            background-color:#e5e5e5;
            display: inline-block;
            font-size: 14px;
            padding: 5px 15px 5px 15px;
            border-radius: 5px;
            text-decoration: none;
            -webkit-transition: color .2s;
        }



        .category-a-link:hover {
            color:grey;
            text-decoration: none;
        }
        .edit-profile-link {
            text-align: center;
            padding: 10px;
        }
        .edit-profile-link > a > button {
            width: 120px;
            padding: 5px;
            border: none;
            outline: none;
            font-weight: 400;
            transition: 0.25s;
        }
        .edit-profile-link > a > button:hover {
            background-color:black;
            color:white;
        }