h5 {
    margin-top: 0px !important;
}
.t {
    padding: 14px 20px;

}
.p-text {
    border-radius: 6px;
}
.media-div {
    min-height: 120px;
    max-height: 300px !important;
    overflow-y: hidden;
    border-radius: 10px !important;
    position: relative;
    min-width: 250px;
}

.post-username {
    font-size: 18px;
    margin-left: 6px;
    margin-bottom: 2px;
    vertical-align: top;
}
.post-username a {
    color: #43659c !important;
    text-decoration: none;
}
.post-username a:hover {
    color: #7697cc !important;
}

.media-img {
    max-height: 250px;
    border-radius: 10px !important;
}

.media-cap {
    position: absolute;
    bottom: 20px;
    left: 0px;
    background-color:rgba(254, 254, 255, 1);
}


.mycolors {
    color: #2196f3; /* primary */
    color: #25b6af; /* secondary */
    color: #ff4081; /* accent */
    color: #43659c; /* med blue */
    color: #b6c7d4; /* text1 light gray */
    color: #6f8ca3; /* text2 medium gray */
    color: #415769; /* text3 dark gray */

}
.bg-header {
    background-color: #88c4f9!important; }
.bg-following-header {
    background-color: #274c77 !important;  }
.bg-sidebar-headers {
    background-color:#25B6AF !important; }
.bg-item {
    background-color: #5da2d5 !important; }

.btn-color1 {
    background-color: #C33c54 !important;     color: white !important;}
.btn-color2 {
    background-color: #e1e4db !important;      color: #18188f !important;}
.btn-color3 {
    background-color: #F9e900 !important;     color: #18188f !important; }
.txt-white {
    color: white !important;
}
/*
#f78888  pink
#f3d250 orange
#ececec gray
#90ccf4 blue
#5da2d5 med-blue

    background-color: #294168 !important;

*/





.icon-container {
    color: lightgray;
}
.icon1:hover {
    color: gray;
}
.icon2:hover {
    color: gray;
}
.icon3:hover {
    color: gray;
}
.icon4:hover {
    color: gray;
}


.w-card-div {
    display:none;
    width: 20%;
    position: fixed;
    right: 10px;
    color: rgba(0,0,0,.87);
    font-family: "Helvetica","Arial",sans-serif;
    line-height: 20px;
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: 400;
    z-index: 1;
    background: #fff;
    border-radius: 2px;
    box-sizing: border-box;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
  }
  .w-card-title {
    min-height: 40px;
    height: 40px;
    margin-bottom: -20px;
  }
  .w-card-title h2 {
    margin-top: -3px;
    margin-left: 26px;
    font-size: 16px;
    font-weight: 300;
    color: #fff;
  }
  .w-list__item {
    color: darkgray;
    font-size: 13px;
    padding: 5px;
    min-height: 10px;
    padding-left: 25px;
  }
  .demo-card-wide > .mdl-card__menu {
    color: #fff;
  }
  .w-card-content {
    margin-top: 20px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
  }

.card0 {
    top: 120px;
    min-height: 140px;
    max-height: 140px;
}
.card1 {
    top: 290px;
    min-height: 200px;
    max-height: 200px;
}

.card2 {
    top: 520px;
    min-height: 140px;
    max-height: 140px;
}
.card0,.card4 .card-content {
    height: 100px;
} 
.w-list li:hover {
    cursor: pointer;
    background-color: #ccecea;
}
#following-users-list li:hover {
    cursor: pointer;
    background-color: #ccecea;
}
#following-tags-list li:hover {
    cursor: pointer;
    background-color: #ccecea;
}
.mobile-open-follow {
    width: 100px;
    top: 120px;
    position: fixed !important;
    right: 10px;
    color: rgba(0,0,0,.87);
    font-family: "Helvetica","Arial",sans-serif;
    line-height: 20px;
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: 400;
    z-index: 1;
    background: #fff;
    border-radius: 2px;
    box-sizing: border-box;
}
.highlight{
    font-weight: bold;
    color: #03a098;
}
.highlight a {
    font-weight: bold;
    color: #03a098;
}

.w-list {
    margin-left: 0px;
    padding-left: 0px;
    list-style: none;
}


.w-popover {
display: none;
z-index: 1060;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
margin-top: .5rem;
opacity: 1;
position: absolute;
top: 0px;
left: 0px;
}


.bias-right {
    float: right;
}

.repost-li {
    height: 500px;
    display:block;
}

.repost {
    display: none;
    width: 80%;
    margin-left: -50px !important;
    height: 470px;
    background-color: #ECF0FA;
    overflow: hidden;
}
.repost textarea {
    background-color: #f5f6f8;
}
.repost-result {
    overflow: scroll;
    height: 100%;
    /*margin-top: 100px !important;*/
}
.repost-text-span1 {
    float: left;
    width: 70% !important;
    margin-left: 20px !important;
}
.repost-text-span2 {
    float: right;
    margin-right: 20px;
    margin-top: 30px;
}

#item-page-header {
    display: none;
    color: white;
    height: 205px;
    position: absolute;
    top: 78px;
    width: 77%;
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: 10px;
    background-attachment: fixed;
    background-size:  96% auto;
}
#item-page-header .span1 {
    height: 205px;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: -20px;
    padding: 5px;
}
.span1 img {
    border-radius: 25px;
}
.span2 {
    width: 77%;
}
.span3 {
    margin-top: 10px;
}

#searching-div {
    display: none;
    color: white;
    height: 70px;
    background-color: #294168 !important;
    position: absolute;
    top: 286px;
    width: 75%;
}

.avatar {
    border-radius: 26px;
}


.hi-light-on {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-color: #f0eef0 !important;
}


.search-container {
    margin-bottom: -36px !important;
}

.filter-btn {
    margin-left: 4px;
    bottom: 3px !important;
}
.fitler-menu {
    margin-top: 5px;
    margin-right: 77px;
    margin-left: 20px;
}
/*
.filters-div {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    text-align: right;
    height: 30px;
    color: gray;
    margin-top: -20px;
}*/
.flex-item {
  float: right;  
}
.mdl-chip {
    height: 29px;
    line-height: 29px;
    margin-left: 8px;
}

.emj-hover span {
    margin: 5px;
    padding: 5px !important;
    font-size: 22px !important;
    height: 30px;
    cursor: pointer;
}
.emj-hover:hover {
    font-size: 30px;
    cursor: pointer;
}

.emj-popover {
    display: none;
    z-index: 1060;
    font-size: 28px;
    margin-top: 10px;
    height: 40px;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 1.3rem;
    margin-top: .5rem;
    opacity: 1;
    position: absolute;
    top: 0px;
    left: 150px;
    }
.emoji-menu {
    cursor: pointer;
}
#emj-Selector {
    margin: 10px 10px 0px 10px !important;
}
.emj {
    font-size: 20px;
    margin-right: 0px;
    cursor: pointer;
}
.emj span {
    font-size: 12px;
    margin-right: 4px;
}



@media (max-width: 576px) {
    .p-text {
        font-size: 13px;
    }

    .media-div {
        min-width: 90%;
        max-height: 240px;
    }

}

@media (max-width: 767px) {
    .w-card-div {
        display: none;
    }
    #item-page-header {
        width: 98%;
        top: 58px !important;
    }
    #searching-div {
        width: 100%;
        height: 100px;
        margin-top: -30px;
    }
    #searching-div h3 {
        font-size: 17px;
    }
}


/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .p-text {
        font-size: 13px;
    }

    .media-div {
        min-width: 75%;
    }
    #item-page-header {
        top: 58px !important;
    }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .p-text {
        font-size: 14px;
    }
    .w-card-div {
        display: absolute;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .p-text {
            font-size: 15px;
    }
    #item-page-header {
        top: 68px !important;
    }

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

        .p-text {
            font-size: 16px;
        }
}






@font-face {
    font-weight: 400;
    font-style: normal;
    font-family: 'Circular-Loom';

    src: url('https://cdn.loom.com/assets/fonts/circular/CircularXXWeb-Book-cd7d2bcec649b1243839a15d5eb8f0a3.woff2') format('woff2');
}

@font-face {
    font-weight: 500;
    font-style: normal;
    font-family: 'Circular-Loom';

    src: url('https://cdn.loom.com/assets/fonts/circular/CircularXXWeb-Medium-d74eac43c78bd5852478998ce63dceb3.woff2') format('woff2');
}

@font-face {
    font-weight: 700;
    font-style: normal;
    font-family: 'Circular-Loom';

    src: url('https://cdn.loom.com/assets/fonts/circular/CircularXXWeb-Bold-83b8ceaf77f49c7cffa44107561909e4.woff2') format('woff2');
}

@font-face {
    font-weight: 900;
    font-style: normal;
    font-family: 'Circular-Loom';

    src: url('https://cdn.loom.com/assets/fonts/circular/CircularXXWeb-Black-bf067ecb8aa777ceb6df7d72226febca.woff2') format('woff2');
}