/*-------------------  content placeholder  --------------------*/

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

.animated-background {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    height: 150px;
    position: relative;
}

.animated-background.details-background {
    height: 53px;
    margin-bottom: 15px;
}

.timeline-item {
    background: #fff;
    margin: 0 auto;
    /* max-width: 472px; */
    min-height: 160px;
}

.background-masker {
    background: #fff;
    position: absolute;
}

/* Every thing below this is just positioning */

.background-masker.header-top,
.background-masker.header-bottom,
.background-masker.subheader-bottom {
    top: 0;
    left: 40px;
    right: 0;
    height: 10px;
}

.background-masker.header-left,
.background-masker.subheader-left,
.background-masker.header-right,
.background-masker.subheader-right {
    top: 10px;
    left: 40px;
    height: 8px;
    width: 10px;
}

.background-masker.header-bottom {
    top: 18px;
    height: 6px;
}

.background-masker.subheader-left,
.background-masker.subheader-right {
    top: 24px;
    height: 6px;
}


.background-masker.header-right,
.background-masker.subheader-right {
    width: auto;
    left: 300px;
    right: 0;
}

.background-masker.subheader-right {
    left: 230px;
}

.background-masker.subheader-bottom {
    top: 30px;
    height: 10px;
}

.background-masker.content-top,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end,
.background-masker.content-first-end {
    top: 40px;
    left: 0;
    right: 0;
    height: 6px;
}

.background-masker.content-top {
    height:10px;
}

.background-masker.content-first-end,
.background-masker.content-second-end,
.background-masker.content-third-end{
    width: auto;
    left: 380px;
    right: 0;
    top: 60px;
    height: 8px;
}

.background-masker.content-second-line  {
    top: 68px;
}

.background-masker.content-second-end {
    left: 420px;
    top: 74px;
}

.background-masker.content-third-line {
    top: 82px;
}

.background-masker.content-third-end {
    left: 300px;
    top: 88px;
}

.your-chat {
    top: 50px;
    height: 10px;
    right: 40px;
    left: 0;
}

.your-chat-2 {
    top: 60px;
    right: 40px;
    width: 10px;
    height: 8px;
}

.your-chat-3 {
    top: 60px;
    right: 300px;
    width: auto;
    height: 8px;
    left: 0;
}

.your-chat-4 {
    top: 68px;
    right: 40px;
    width: auto;
    left: 0px;
    height: 6px;
}

.your-chat-5 {
    top: 74px;
    right: 40px;
    height: 6px;
    width: 10px;
}

.your-chat-6 {
    right: 230px;
    width: auto;
    left: 0;
    top: 74px;
    height: 6px;
}

.your-chat-7 {
    top: 80px;
    right: 40px;
    width: auto;
    left: 0px;
    height: 10px;
}

.your-chat-8 {
    top: 90px;
    left: 0px;
    right: 0;
    height: 10px;
}

.your-chat-9 {
    top: 100px;
    left: 0px;
    right: 0;
    height: 20px;
}

.background-wrapp {
    position: relative;
}

.background-wrapp.chat-3 {
    top: 100px;
}

.quotes-2 {
    top:60px;
}

.quotes-3 {
    top:120px;
}

.details-1 .background-masker.header-top, .details-1 .background-masker.header-bottom, .details-1 .background-masker.subheader-bottom {
    top: 0;
    left: 0px;
    right: 0;
    height: 10px;
}

.details-1 .background-masker.header-bottom {
    top: 18px;
    height: 6px;
}

.details-1 .background-masker.subheader-bottom {
    top: 30px;
    height: 10px;
}

.details-1  .background-masker.content-top {
    height: 13px;
    top: 41px;
}

.details-2 {
    top:54px;
}

.details-3 {
    top:108px;
}

.details-4 {
    top:158px;
}

.details-wrapper, .quotes-wrapper {
    min-height: 280px;
}

.quotes-wrapper .timeline-item{
    min-height: 160px;
}

.quotes-wrapper .timeline-item .animated-background {
    height:50px;
    margin-bottom:20px;
}

.background-masker.content-top-2 {
    top: 50px;
    left: 0;
    right: 0;
    height: 10px;
}
/*-------------------  content placeholder -END --------------------*/