@font-face {
  font-family: montserratRegular;
  src: url(../lib/fonts/montserrat.regular.ttf);
}

@font-face {
  font-family: montserratBold;
  src: url(../lib/fonts/montserrat.bold.ttf);
}

body{
    font-family: 'montserratRegular', sans-serif !important;
}
.homepage-container{
    position:relative;
    margin-top:56px
}

.home-item-container{
    background: #fff;
    /*border: 1px solid grey;*/ 
    border-radius: 60px; 
    height: 200px; 
    z-index:1;
    -webkit-box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.05);
    cursor:pointer;
}

.home-item-container .content-area{
    width: 70%; 
    text-align: left; 
    padding: 16px;
    position:relative
}

.home-item-image{
    width:30%;
    background-size: cover; 
    background-repeat:no-repeat; 
    background-position: center center;
}

.border-radius-left{
    border-top-left-radius: 60px; 
    border-bottom-left-radius: 60px;
}

.border-radius-right{
    border-top-right-radius: 60px; 
    border-bottom-right-radius: 60px;
}

.home-item-title{
    width:70%; 
    font-size: 34px;
    text-align:center;
    padding: 16px;
}

.home-item-details{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 200px;
    font-size: 12px;
}

.home-item-details .parag-title{
    font-size:18px;
    padding: 8px 16px;
}

.home-item-details .parag-context{
    color: #5e5e5e;
    padding: 8px 16px;
}

.parag-title .left-txt{

}

.parag-context .left-txt{

}

.showDetails{
    z-index:99;
}

.hideDetails{
    z-index:1;
}

.fifth-item{
    position:absolute; 
    top:140px; 
    left:calc(50% - 225px);
    width: 450px;
}

.container-hide-content{
    width: 100%;
    height: 100%;
    background-color:#f0efef;
    z-index: 2000;
    position: absolute;
    top:0;
    left:0;
    text-align:center;
    font-size:30px;
    color:#286f9d;
    text-shadow: 1px 1px #c5c5c5;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.center-text{
    left: 0;
    line-height: 70px;
    margin: auto;
    margin-top: -100px;
    position: absolute;
    top: 40%;
    width: 100%;
}

.user-display-name{
    color: white;
    position: absolute;
    top: 20px;
    right: 15%;
    z-index: 999;
    padding-right: 8px;
}

@media screen and (max-width: 959px) {
    .center-text{
        top: 25%;
    }

    .homepage-container{
        margin-top:32px;
    }

    .showDetails{
        z-index:1;
    }
    .fifth-item{
        position:relative;
        top:inherit;
        left:inherit;
        /*width: 100%;*/
    }

    .home-item-container{
        width: 80%;
        margin: 16px auto;
    }

    .fifth-item .home-item-title{
        display:none;
    }
    .fifth-item.home-item-container{
        margin: 32px auto;
    }
    .home-item-details{
        position: relative;
        font-size: 12px;
        width: 70%;
    }

    .home-item-details .parag-title{
        margin-top: 8px;
    }

    .user-display-name{
        right: 0;
    }
}


@media screen and (max-width: 599px) {
    .home-item-container{
        height:140px;
    }

    .home-item-details .parag-context{
    padding: 0px 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    }
}