#section6Inner .listTimeOriz{ width:0%; margin-left:auto; margin-right:auto; display:flex; justify-content: center; overflow:hidden; transition:all 2s; } #section6Inner.fadeStart .listTimeOriz{ width:90%; overflow:visible; } .listTimeOriz li{ border-right:1px solid rgba(0,0,0,0.125); width:calc( 100% / 6 ); padding-top:20vh; min-height:50vh; display:flex; flex-direction: column-reverse; justify-content: start; transition:all 1s; position:relative; transform:skewX(-15deg); } .listTimeOriz li:first-child{ border-left:1px solid rgba(0,0,0,0.125); } .listTimeOriz li:before{ content:""; position:absolute; left:50%; top:0px; width:0; height:100%; transition:all 1s; z-index:1; background: -moz-linear-gradient(0deg, rgba(57,116,212,1) 0%, rgba(30,53,149,1) 100%); background: -webkit-linear-gradient(0deg, rgba(57,116,212,1) 0%, rgba(30,53,149,1) 100%); background: linear-gradient(0deg, rgba(57,116,212,1) 0%, rgba(30,53,149,1) 100%); opacity:0; } .listTimeOriz li p{ text-align: center; position:relative; z-index:5; transform:skewX(15deg); font-weight:bold; } .listTimeOriz li .listTitle{ opacity:0.1; font-size:8px; transform:scale(0.75); transition:all 2s; margin-top:20px; letter-spacing:0.05rem; } .listTimeOriz li .date{ font-size:20px; background: -moz-linear-gradient(90deg, rgba(57,116,212,1) 0%, rgba(30,53,149,1) 100%); background: -webkit-linear-gradient(90deg, rgba(57,116,212,1) 0%, rgba(30,53,149,1) 100%); background: linear-gradient(90deg, rgba(57,116,212,1) 0%, rgba(30,53,149,1) 100%); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; transition:all 1s; font-family: "Reddit Sans Condensed", sans-serif; } @media only screen and (min-width:751px){ .listTimeOriz li:hover:before{ left:0%; width:100%; opacity:1; } .listTimeOriz li:hover .date{ background:#FFF; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; font-size:30px; } .listTimeOriz li:hover{ width:calc( 100% / 3 ); padding-top:18vh; } .listTimeOriz li:hover .listTitle{ opacity:1; transform:scale(1); font-size:16px; transform:skewX(15deg); text-shadow: 1px 1px 1px rgba(30,53,149,1) ; color:#FFF; } } @media only screen and (max-width:750px){ #section6Inner .listTimeOriz{ display:flex; flex-direction: column; justify-content: start; width:100%; position:relative; height:0px; overflow:hidden; transition:all 2s; } #section6Inner.fadeStart .listTimeOriz{ height:64vw; overflow:hidden; } .listTimeOriz li{ border-right:none; border-left:none; width:100%; padding-top:6vw; padding-bottom:4vw; margin-top:0vw; margin-bottom:0vw; min-height:auto; display:flex; flex-direction: row-reverse; justify-content:start; gap:10vw; transition:all 1s; position:relative; transform:skewX(0deg); } .listTimeOriz li:first-child{ border-right:none; border-left:none; } .listTimeOriz:after{ position:absolute; content:""; width:4px; left:20%; top:0px; height:100%; background: -moz-linear-gradient(0deg, rgba(57,116,212,1) 0%, rgba(30,53,149,1) 100%); background: -webkit-linear-gradient(0deg, rgba(57,116,212,1) 0%, rgba(30,53,149,1) 100%); background: linear-gradient(0deg, rgba(57,116,212,1) 0%, rgba(30,53,149,1) 100%); z-index:-1; opacity:1; } .listTimeOriz li:after{ border:4px solid rgba(30,53,149,1); position:absolute; content:""; width:4px; left:calc( 20% - 8px ); top:calc( 50% - 8px ); top:4vw; z-index:-1; opacity:1; background: #FFF; border-radius: 50%; height: 11px; width: 11px; } .listTimeOriz li .date{ font-size:3.0vw; width:16vw; transform:skewX(0deg); margin-top:-2.5vw; } .listTimeOriz li .listTitle{ opacity:1; width:100%; transform:scale(1); font-size:3.2vw; transform:skewX(15deg); text-shadow: none; margin-top:-3vw; transform:skewX(0deg); text-align: left; margin-left:2vw; position:relative; } .listTimeOriz li .listTitle:after{ width:100%; height:calc( 100% + 4vw ); content:""; left:0px; top:0px; border-bottom:1px dashed #CCC; position: absolute; z-index:-1; } .listTimeOriz li:hover{ width:100%; } .listTimeOriz li:before{ background: -moz-linear-gradient(90deg, rgba(57,116,212,1) 0%, rgba(30,53,149,1) 100%); background: -webkit-linear-gradient(90deg, rgba(57,116,212,1) 0%, rgba(30,53,149,1) 100%); background: linear-gradient(90deg, rgba(57,116,212,1) 0%, rgba(30,53,149,1) 100%); } }