.page-header , .mobile-buttons{
    display: none;
}

body {
    font-family: 'Inder', sans-serif;
}

.background {
    background: #eaeaea;
    background-size:cover;
    background-position:50% 50%;
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
}

.dimmer {
    background:rgba(0,0,0,0.40);
    position:fixed;
    top:0;left:0;
    width:100%;height:100%
}

.master-block {
    height:80%;margin:0 auto;width:940px;  
    padding-top: 40px;
    padding-bottom: 40px;
}

.app-details-outer-block {
    position:fixed;
    display:table;
    height: 80%;
}

.app-details-inner-block {
    display:table-cell;
    vertical-align:middle;    
}

.desktop-buttons {
    margin-left:50px;
    margin-top: 30px;
}


.desktop-buttons img {
    width: 205px;
}

.desktop-buttons a {
    opacity: 0.8;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.desktop-buttons #android-button img{
    margin-top: 3px;
}

#ios-button:hover , #android-button:hover {
    opacity: 1.0;
}

.seperator {
    margin-left: 395px; 
    margin-top: -40px;
    display:flex;
    position:fixed;

}

.black-seperator-outer-block {
    position:fixed;
    display:table;
    height:80%;
    background: rgba(0,0,0,0.10);
    margin-left: 395px; 
    width:2px;
    padding: 0px;

}

.white-seperator-outer-block {
    position:fixed;
    display:table;
    height:80%;
    background: rgba(255,255,255,0.10);
    margin-left: 397px; 
    width:2px;
    padding: 0px;
}

.seperator-inner-block {
    display:table-cell;
    vertical-align:middle;
    width:2px;
}

.white-line {
    position:relative;
    background: rgba(255,255,255,0.10);
    height:470px;
    width:2px;
    padding: 0px;    
    top: 80px;
}

.post-outer-block {
    position:absolute;
    display:table;
    height: 80%;
    margin-left:530px;

}

.post-inner-block {
    display:table-cell;
    width:394px;
    vertical-align:middle;    
}

.post-header {
    display:block;
    width:394px;
    margin-bottom: 12px;
    color: white;
    -webkit-text-shadow:0 2px 3px rgba(0,0,0,0.4); -moz-text-shadow:0 2px 3px rgba(0,0,0,0.4); -o-text-shadow:0 2px 3px rgba(0,0,0,0.4);
    text-shadow:0 2px 3px rgba(0,0,0,0.4);
}

.user-info {
    margin-top: 25px;
    display:flex;
}

#avatar{
    -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;
    -webkit-box-shadow:0 0 9px rgba(0,0,0,0.99);-moz-box-shadow:0 0 9px rgba(0,0,0,0.4);-o-box-shadow:0 0 9px rgba(0,0,0,0.4);box-shadow:0 0 0 9px rgba(255,255,255,0.15);
    
    width: 65px;
    height: 65px;
}

#feeling-face{
    width: 35px;
    height: 35px;
    margin-left: -20px;
    margin-top: 35px
}

.name-and-username {
    display:inline-block;
    margin-left: 17px;
    font-size: 20px;
    line-height: 10px;
}

#username {
    font-size: 16px;
    color: rgb(216, 216, 216);
}

#f-line {
    color: rgb(216, 216, 216);
}

#feeling {
    font-weight: 900;
}

#timestamp{
    float:right;
    margin-top: -63px;
    opacity:0.7;
    font-size: 14px;
}

.tag {
    display: inline-block;
    background-color: #bebebe;
    -webkit-border-radius: 6px;
	-moz-border-radius: 4px;
	border-radius: 8px;
    
    font-size: 16px;
    color: white;
    
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 14px;
    padding-right: 14px;
    
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    line-height: 25px;
   
    max-width: 340px;
    
    text-overflow: ellipsis;
	white-space:nowrap;
    overflow: hidden;    
}

.tag img {
    position: absolute;
    width: 22px;
    margin-right: 10px;
    margin-left: -2px;
    margin-top: -1px;
}

.tag > span {
    margin-left: 30px;
    margin-right: 5px;
}

#sticky {
    width: 108px;
    height: 108x;
    
    position:relative;
    float:right;
    margin-top: -40px;
}

#post-image {
    width:100%;
}

#caption {
    font-size: 17px;
    line-height: 26px;
    margin-top: 10px;
    margin-left: 15px;
    margin-right: 15px;
}

.post-container {
    background: rgb(249, 248, 246);
    color: rgb(114, 114, 114);
    
    -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;
    
    -webkit-box-shadow:0 2px 6px rgba(0,0,0,0.4); -moz-box-shadow:0 2px 6px rgba(0,0,0,0.4); -o-box-shadow:0 2px 6px rgba(0,0,0,0.4);
    box-shadow:0 2px 6px rgba(0,0,0,0.4);
    
    padding-top: 15px;
    padding-bottom: 5px; 
}


#container-bottom {
    width: 400px;
    margin-top: -5px;
    -moz-border-bottom-left-radius: 7px; -webkit-border-bottom-left-radius:7px; border-bottom-left-radius: 7px;
    -moz-border-bottom-right-radius: 7px; -webkit-border-bottom-right-radius:7px; border-bottom-right-radius: 7px;
}

.numbers {
    margin-top: -42px;
    margin-left: 85px;
    font-size: 20px;
    color: rgb(177, 177, 177);    
    margin-bottom: 40px;
}

#num-of-refeels {
    margin-left: 100px;
}

#num-of-hugs {
    margin-left: 110px;
}


@media screen and (max-width: 750px) {
    html{
        min-height:100%;position:relative
    }

    body {
        height:100%;
    }

    .page-header , .mobile-buttons{
        display:block ;
    }

    .background {
        position:absolute;
    }

    .dimmer {
        position:absolute;
    }

    .page-header {
        position:absolute;
        top:0;left:0;
    }

    .mobile-buttons {
        display: block;
        text-align:center;
        margin-top: 30px;
        margin-bottom: -15px;
        width: 100%;
    }

    .mobile-buttons img {    
        position:relative;
        opacity: 0.9;
        width: 60%;
    }

    .page-header img {
        width:100%;
    }


    .master-block {
        width: auto;
        margin-left: auto;
        margin-right:auto;
    }

    .app-details-outer-block , .app-details-inner-block , .black-seperator-outer-block , .white-seperator-outer-block {
        display:none;
    }


    .post-outer-block {
        position:relative;
        height: auto;
        width: 92%;
        margin-left:auto;
        margin-right:auto;
    }

    .post-inner-block {
        width:auto;
        vertical-align:center;    
    }

    .post-header {
        width:auto;
        margin-bottom: 15px;
        margin-top: 15%;
    }

    .user-info {
        margin-top: 0px;
    }

    #avatar{
        width: 45px;
        height: 45px;
        margin-bottom: -6px;
        
        -webkit-box-shadow:0 0 6px rgba(0,0,0,0.99);-moz-box-shadow:0 0 6px rgba(0,0,0,0.4);-o-box-shadow:0 0 6px rgba(0,0,0,0.4);box-shadow:0 0 0 6px rgba(255,255,255,0.15);
    }
    
    #feeling-face {
        width: 24px;
        height: 24px;
        position: absolute;
        margin-top: 22px;
        margin-left: 35px
    }

    .name-and-username {
        margin-left: 22px;
        margin-bottom: 0px;
        font-size: 16px;
        line-height: 7px;
        margin-top: -10px;
    }

    #username {
        font-size: 15px;
    }

    #timestamp{
        font-size: 12px;
    }


    #sticky {
        width: 85px;
        height: 85px;
    }

    #caption, .tag {
        font-size: 15px;
    }
    
    #container-bottom {
        width: 100%;
    }

    .numbers {
        margin-top: -12%;
        margin-left: 21%;
        font-size: 15px;
        margin-bottom: 10px;
    }

    #num-of-refeels {
        margin-left: 31%;
    }

    #num-of-hugs {
        margin-left: 34%;
    }
    
    .tag {
        max-width: 220px;
        line-height: 21px;
        padding-top: 6px;
    }
    
}