/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

#timeline_listing{
grid-area:listing;
display:flex;
justify-content:center;
align-content:flex-start;
flex-wrap:wrap;
width:100%;
margin:0;
padding:0;
}

#timeline_listing > article{
float:left;
width:18rem;
min-width:13rem;
margin:1rem 0 1rem 0;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:0;
overflow:hidden;
}

}

/* Mobile View -> Tablet && Portrait */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

#timeline_listing{
grid-area:listing;
display:flex;
justify-content:center;
align-content:flex-start;
flex-wrap:wrap;
width:100%;
margin:0;
padding:0;
}

#timeline_listing > article{
float:left;
width:15rem;
min-width:10rem;
margin:1rem .5rem 1rem .5rem;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:0;
overflow:hidden;
}

}

/* Mobile View -> Tablet && Landscape */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){

#timeline_listing{
grid-area:listing;
display:flex;
justify-content:center;
align-content:flex-start;
flex-wrap:wrap;
width:100%;
margin:0;
padding:0;
}

#timeline_listing > article{
float:left;
width:15rem;
min-width:10rem;
margin:1rem .75rem 1rem .75rem;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:0;
overflow:hidden;
}

}

/* Desktop View */
@media screen and (min-width: 79.5rem){

#timeline_listing{
grid-area:listing;
display:flex;
justify-content:center;
align-content:flex-start;
flex-wrap:wrap;
width:100%;
margin:0;
padding:0;
}

#timeline_listing > article{
float:left;
width:15rem;
min-width:10rem;
margin:1rem .75rem 1rem .75rem;
padding:0;
border:var(--light-border-color) 1px solid;
border-radius:0;
overflow:hidden;
}

}






/* Mobile View */
@media screen and (max-width: 79.5rem){

#timeline{
display:block;
width:2.5rem;
height:2.5rem;
position:relative;
overflow:hidden;
cursor:pointer;
margin:0 .25rem 0 0;
border:#ff0000 0px solid;
}

#timeline p{
width:2.5rem;
margin:0;
padding:0;
/*
border:1px #FF00FF solid;
background:#0FF000;
*/
top:0;
left:0;
position:relative;
z-index:2;
}

}


/* Desktop View */
@media screen and (min-width: 79.5rem){

#timeline{
display:block;
width:2.5rem;
height:2.5rem;
position:relative;
overflow:hidden;
margin:0 .45rem 0 0;
}

#timeline p{
height:3rem;
margin:0;
padding:0;
top:0;
left:0;
position:relative;
z-index:2;
}

}

#timeline{
background:url('/asset/img/timeline/off.svg') no-repeat top left;
}

#timeline:hover{
background:url('/asset/img/timeline/on.svg') no-repeat top left;
}

#timeline.on{
background:url('/asset/img/timeline/on.svg') no-repeat top left;
}

#timeline.on:hover{
background:url('/asset/img/timeline/off.svg') no-repeat top left;
}



#timeline p span{
display:block;
width:100%;
margin:0 0 0 10em;
}

#timeline .info{
display:flex;
justify-content:flex-end;
align-items:center;
min-width:1.25rem;
height:1.25rem;
background:var(--base-background-color);
position:absolute;
top:0;
right:0;
border:2px solid var(--base-background-color);
border-radius:50%;
z-index:1;
}

#timeline .info p{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
margin:0;
padding:0;
font-size:.65rem;
text-align:center;
color:var(--base-font-color);
}

/* Preview */
#timeline_preview{
display:flex;
justify-content:center;
align-items:center;
width:90%;
height:20rem;
margin:0 0 2rem 0;
padding:1rem 0;
background:linear-gradient(0deg, rgba(241, 241, 241, 1) 0%, rgba(255, 255, 255, 1) 70%);
border-bottom:var(--base-border-color) 1px solid;
overflow-x:auto;
scrollbar-width:none;
}

#timeline_preview .content{
display:flex;
justify-content:center;
align-items:center;
width:min-content;
margin:0;
padding:0;
}

#timeline_preview .card{
display:block;
margin:0 .75rem;
padding:0;
background:var(--base-background-color);
border-radius:.5rem;
position:relative;
}

#timeline_preview .card .bookmark-wrapper{
display:block;
margin:0;
padding:0;
position:absolute;
top:.5rem;
right:.5rem;
z-index:2;
}

#timeline_preview .card .media img{
width:12rem;
height:auto;
}