:root {
	--fb-blue: #0a86f0;
	--fb-black: #090909;
	--fb-red: #ee2340;
	--fb-green: #2db557;
	--fb-yellow: #f6b024;
	--fb-bgcolor: #eef0f3;
	--fb-white: #ffffff;
	--fb-whitebg: #ffffff;
	--dark-color-text: #090909;
	--light-color-text: #606770;
	--button-link: #e0e2e8;
    --stories-bg: #090909;
    --icon-circle-bg: linear-gradient(0deg, rgba(65,67,69,1) 0%, rgba(107, 110, 114, 1) 100%);
    --shadow-color: rgba(0,0,0,.25);
}
*:focus{
    outline: none;
}
body {
    background: var(--fb-bgcolor);
    font-family: Arial, Helvetica, sans-serif;
    color: var(var(--fb-black))
}
header {
    background: var(--fb-whitebg);
    height: 62px;
    display: flex;
    padding 0 15px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-shadow: 0px 0px 5px 0px var(--shadow-color);
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
}
.header__logo-section{
    display: flex;
}
.header__logo-icon .fa-facebook {
    font-size: 40px;
    color: var(--fb-blue)
}
.header__logo-search {
    position: relative;
    margin-left: 10px;
}
.header__logo-search .fa-search{
    position: absolute;
    top: 14px;
    left: 10px;
    color: var(--light-color-text);
}
.header__logo-search input[type="text"]{
    background: var(--fb-bgcolor);
    padding: 10px;
    border-radius: 25px;
    font-size: 1.2rem;
    color: var(--light-color-text);
    padding-left: 35px;
    font-weight: 300;
    border: none;
    margin-right: 20px;
}
.header__mobile-button{
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 1.7rem;
}
.header__menu-tabs {
    display: flex;
    max-width: 600px;
    width: 100%;
    flex: none;
}
.header__menu-tab{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 62px;
    border-bottom: 4px solid var(--fb-whitebg);
    color: var(--light-color-text);
    cursor: pointer;
    font-size: 1.3rem;
}
.header__menu-tab--active, .header__menu-tab:hover{
    border-bottom: 4px solid var(--fb-blue);
}
.header__menu-tab:hover .fas, .header__menu-tab:hover .fab{
    color: var(--fb-blue);
}
.header__menu-tab--active .fas, .header__menu-tab--active .fab{
    color: var(--fb-blue);
}
.header__menu-tab .fas, .header__menu-tab .fab{
    position: relative;
}
.header__notification-bubble{
    font-family: Arial, Helvetica, sans-serif;
    background: var(--fb-red);
    color: white;
    width: 20px;
    height: 20px;
    font-size: .8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: absolute;
    top: -12px;
    right: -10px;
    font-weight: 700;
}
.header__account{
    display: flex;
}
.header__actions{
    display: flex;
    justify-content: center;
    align-items: center;
}
.header__user-img {
    border-radius: 50%;
    height: 35px;
    width: 35px;
    margin-right: 10px;
}
.header__user-name{
    font-size: .9rem;
    font-weight: 600;
    margin-right: 20px;
    font-family: Arial, Helvetica, sans-serif;
}
.header__circle-link{
    background-color: var(--button-link);
    height: 40px;
    width: 40px;
    display: flex;
    border-radius: 50%;
    color: var(--dark-color-text);
    margin-right: 10px;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    position: relative;
}
.header__circle-link i{
    font-size: 20px;
}
.header__circle-link .fa-sort-down{
    position: relative;
    top: -3px;
    font-size: 1.4rem;
}
.header__link-icon{
    font-size: 0.9rem;
}
.account__notification-bubble{
    width: 20px;
    height: 20px;
    font-size: .8rem;
    background: var(--fb-red);
    color: var(--fb-white);
    border-radius: 50%;
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    top: -5px;
    right: -7px;
}
.content-area--feed{
    padding: 90px 15px 20px;
    display: flex;
}
.sidenav{
    width: 25%;
}
.sidenav__item{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.sidenav__item-img{
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 20px;
    object-fit: cover;
    object-position: center;
}
.sidenav__item-title{
    font-size: 1rem;
    font-weight: 400;
}
.sidenav__item-icon {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    margin-right: 20px;
}
.sidenav__item-notification{
    color:var(--fb-blue);
    margin-top: 5px;
    font-size: .75rem;
    display: block;
    font-weight: 300;
}
.sidenav__item-notification-circle{
    background: var(--fb-blue);
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
}
.sidenav__item-icon--circle{
    background: var(--button-link);
    border-radius: 50%;
    font-size: .9rem;

}
.sidenav__item-icon--circle-clear{
    background: var(--fb-bgcolor);
    border-radius: 50%;
    /* font-size: 1rem; */
}
.sidenav__item-icon--circle-white{
    background: var(--icon-circle-bg);
    border-radius: 50%;
    font-size: 1rem;
    width: 35px;
    height: 35px;
}
.sidenav__item-icon .fas, .sidenav__item-icon .fab{
    color: var(--fb-blue);
}
.sidenav__item-icon--circle .fas, .sidenav__item-icon--circle .fab{
    color: var(--fb-black);
}
.sidenav__item-icon--circle-white .fas, .sidenav__item-icon--circle-white .fab{
    color: var(--fb-whitebg)
}
.sidenav__line{
    height: 3px;
    background: var(--button-link);
    margin-bottom: 15px;
    display: block;
}
.sidenav__heading-title{
    display: block;
    color: var(--light-color-text);
    font-size: 1.1rem;
    margin-bottom: 15px;
}
.feed{
    width: 50%;
    height: 200px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.stories{
    display: flex;
    max-width: 700px;
    width: 100%;
    margin-bottom: 20px;
}
.stories__video-container{
    overflow: hidden;
    width: 120px;
    height: 200px;
    border-radius: 5px;
    background: var(--stories-bg);
    position: relative;
    box-shadow: 0px 1px 2px 0px var(--fb-black);
    margin-right: 10px;
    cursor: pointer;
}
.stories__video-container:nth-last-child(1){
    margin-right: 0px;
}
.stories__bg{
    object-fit: cover;
    object-position: center;
    width: 120px;
    height: 200px;
    opacity: 0.2;
    transition: opacity.3s ease-in-out;
}
.stories__video-container:hover .stories__bg{
    opacity: .8;
}
.stories__title{
    position: absolute;
    bottom: 0;
    background: var(--fb-whitebg);
    width: 69%;
    color: var(--fb-black);
    padding: 30px 20px 10px;
    font-size: .9rem;
    text-align: center;
    line-height: 1.4;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.stories__new-btn{
    background: var(--fb-blue);
    width: 40px;
    height: 40px;
    color: var(--fb-white);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 4px solid var(--fb-white);
    position: absolute;
    top: -20px;
    left: 28px; 
}

.stories__video-container--plain .stories__title{
    background: transparent;
    color: var(--fb-white);
}
.stories__user{
    border: 4px solid var(--fb-blue);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: -113px;
    left: 10px;
}
.feed__box{
    /* padding: 20px; */
    background: var(--fb-whitebg);
    max-width: 700px;
    width: 100%;
    flex: none;
    border-radius: 5px;
    box-shadow: 0px 1px 2px 0px var(--shadow-color);
    margin-bottom: 20px;
}
.newpost{
    display: flex;
    padding: 20px 20px 5px;
    margin-bottom: 10px;
    align-items: center;
}
.newpost__user-img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}
.newpost input[type="text"]{
    background: var(--fb-bgcolor);
    padding: 10px;
    border-radius: 25px;
    border: none;
    font-size: 1.2rem;
    color: var(--light-color-text);
    padding-left: 20px;
    font-weight: 300;
    width: 100%;
}
.hline{
    height: 1px;
    background: var(--button-link);
    margin-bottom: 15px;
    display: block;
}
.post-types{
    display: flex;
    justify-content: space-between;

}
.post-types__item{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}
.post-types__item .fas, .post-types__item .far{
    margin: 10px;
    font-size: 1.5rem;
}
.post-types__item .fa-video{
    color: var(--fb-red);
}
.post-types__item .fa-photo-video{
    color: var(--fb-green);
}
.post-types__item .fa-laugh-beam{
    color: var(--fb-yellow);
}
.photopost{
    /* padding: 20px 20px 20px; */
    margin-bottom: 20px;
}
.photopost__info{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 20px;
}
.photopost__left{
    display: flex;
    justify-content: center;
    align-items: center;
}
.photopost__left img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 10px 10px 10px 0px;
}
.photopost__details{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.photopost__name{
    font-size: .9rem;
    margin-bottom: 5px;
    font-weight: 400;
}
.photopost__date{
    font-size: .7rem;
    color: var(--light-color-text)
}
.photopost__info .fa-ellipsis-h{
    color: var(--light-color-text);
    margin-right: 40px;
}
.photopost__description{
    padding: 0 20px;
    margin-bottom: 20px;
}
.photopost__image img{
    width: 100%;
}
.photopost__stats{
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    color: var(--light-color-text);
    font-weight: 100;
    font-size: 0.9rem;
}
.photopost__stats-emojis{
    display: flex;
    justify-content: center;
    align-items: center;
}
.emoji-circle{
    display: flex;
    width: 22px;
    height: 22px;
    background: black;
    color: white;
    justify-content: center;
    align-items: center;
    font-size: .4rem;
    border-radius: 50%;
    border: 2px solid white;
    position: relative;
}
.emoji-circle:nth-child(1){
    z-index: 3;
}
.emoji-circle:nth-child(2){
    left: -5px;
    z-index: 2;
}
.emoji-circle:nth-child(3){
    left: -10px;
    z-index: 1;
}
.emoji-circle--blue{
  background: linear-gradient(0deg, rgba(4,60,108,1) 0%, rgba(10,134,240,1) 100%);
}
.emoji-circle--red{
    background: linear-gradient(0deg, rgba(92,15,26,1) 0%, rgba(238,35,64,1) 100%);
}
.emoji-circle--yellow{
   background: black;
}
.emoji-circle-blue .fa-thumbs-up{
    position: relative;
    top: -2px;
}
.emoji-circle--yellow .fa-surprise{
    color:rgba(246,176,36,1);
    font-size: 1.3rem;
    overflow: hidden;
}
.photopost__actions{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.photopost__link{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--light-color-text);
    width: 100%;
    text-decoration: none;
}
.photopost__link .fas{
    margin-right: 10px;
}
.floatingmsg{
    position: fixed;
    bottom: 0;
    right: 20px;
}
.floatingmsg__bubble{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0px 5px 10px 0px var(--shadow-color);
    background: var(--button-link);
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.floatingmsg__bubble img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.floatingmsg__bubble:hover .fa-edit{
    color: var(--fb-blue)
}
.floatingmsg__notification{
    background: var(--fb-red);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: .8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    right:-5px;
    font-weight: 700;
    z-index: 3;
}
@media only screen and (max-width: 1300px){
    .header__menu-tabs{
        display: none;
    }
    .feed{
        width: 100%;
    }
}
@media only screen and (max-width: 1000px){
    .sidenav{
        display: none;
    }
    
}
@media only screen and (max-width: 768px){
    .header__user-img{
        display: none;
    }
    .header__user-name{
        display: none;
    }
    .header__logo-search .fa-search{
       left: 12px;
       top: 12px;
    }
    .header__mobile-button{
        display: flex;
    }
    .header__logo-search input[type="text"]{
        width: 40px;
        height: 40px;
        padding: 0;
    }
    .feed{
        display: block;
    }
    .stories{
        flex-wrap: nowrap;
        z-index: 9;
        padding-bottom: 20px;
        overflow-x: scroll;
    }
    .stories__video-container{
        flex: 1 0 auto;
    }
}
@media only screen and (max-width: 411px){
    .content-area-feed{
        width: 100%;
    }
    .header__acount{
        display: none;
    }
    .post-types__title{
        display: none;
    }
}