body {
margin: 0;
}
.grid-container {
display: block !important;
}
.mainContainer {
max-width: 100%;
display: flex;
padding: 2rem;
}
.mainContainer .title {
width: 25%;
text-transform: uppercase;
border-right: 1px solid #bbbbbb;
}
.mainContainer .title--story {
font-weight: 500;
letter-spacing: 2px;
line-height: 2.1rem;
}
.mainContainer .title--bigger {
font-size: 35px;
}
.mainContainer .timeline {
width: 80%;
height: 80vh;
}
.mainContainer .timeline__allDate {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 4.3rem;
border-bottom: 1px solid #bbbbbb;
transform: translateX(-2%);
text-align: center;
align-items: baseline;
position: relative;
z-index: 2;
}
.mainContainer .timeline__allDate--row {
display: none;
}
.mainContainer .timeline__allDate--single sup {
position: relative;
}
.mainContainer .timeline__allDate--single__date {
font-family: "Cormorant Garamond", Didot, serif;
font-weight: 900;
font-style: italic;
font-size: 25px;
cursor: pointer;
}
.mainContainer .timeline__allDate--single__date:nth-child(1) {
margin-left: 15px;
}
.mainContainer .timeline__allDate--single__switch {
display: flex;
justify-content: center;
}
.mainContainer .timeline__allDate--single__switch--point {
font-size: 40px;
z-index: 1;
display: none;
}
.mainContainer .timeline__allDate--single__switch--point.active {
display: block;
}
.mainContainer .timeline__allDate--single__switch--line {
border: 1px solid #bbbbbb;
border-right: 0;
position: absolute;
height: 25px;
top: 83%;
}
.mainContainer .timeline__allText {
padding: 0 1rem 0 8rem;
overflow: scroll;
overflow-x: hidden;
height: calc(80vh - 5rem);
}
.mainContainer .timeline__allText .content {
display: none;
}
.mainContainer .timeline__allText .content.active {
display: block;
}
.mainContainer .timeline__allText .content--title {
font-size: 30px;
font-style: italic;
margin-bottom: 1.5rem;
}
.mainContainer .timeline__allText .content--description {
font-size: 1.1rem;
font-style: italic;
animation: transition ease-in 0.7s;
}
.mainContainer .timeline__allText .content--description sup {
position: relative;
}
.mainContainer .timeline__allText .content--description__littleTitle {
font-size: 1.5rem;
line-height: 1.5rem;
animation: transition ease-in 0.7s;
}
.mainContainer .timeline__allText .content--paragraph {
margin-bottom: 1rem;
}
.mainContainer .timeline__allText .content--paragraph__title {
display: flex;
align-items: center;
justify-content: space-between;
animation: transition ease-in 1s;
}
.mainContainer .timeline__allText .content--paragraph__title.active > .more {
transform: inherit;
transition: 0.7s;
}
.mainContainer .timeline__allText .content--paragraph__title--subtitle {
font-size: 26px;
font-weight: inherit;
margin-bottom: 0.8rem;
padding-right: 1rem;
}
.mainContainer .timeline__allText .content--paragraph__title--more {
cursor: pointer;
transform: rotate(45deg);
transition: 0.3s;
}
.mainContainer .timeline__allText .content--paragraph__content {
display: none;
margin-bottom: 3rem;
}
.mainContainer .timeline__allText .content--effect {
height: 10rem;
position: sticky;
padding: 1rem;
bottom: -2px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 17%, white 89%);
}
.mainContainer .timeline__allText .content--effect__top {
height: 5rem;
position: sticky;
top: 0;
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 17%, white 89%);
}
.mainContainer .timeline__allText .oneSection {
width: 45%;
}
.mainContainer .timeline__allText .twoSection {
display: flex;
justify-content: space-between;
}
.mainContainer .timeline__allText .twoSection__content--left, .mainContainer .timeline__allText .twoSection__content--right {
width: 45%;
}
.mainContainer .timeline__btn {
display: grid;
justify-content: flex-end;
transform: translateY(-10rem);
margin-right: 10rem;
}
.mainContainer .timeline__btn--left, .mainContainer .timeline__btn--right {
font-size: 45px;
font-family: "Infini Romain", Didot, serif;
padding: 0 0.5rem;
border-radius: 50%;
cursor: pointer;
}
@keyframes transition {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
50% {
opacity: 0.6;
}
75% {
opacity: 0.75;
}
100% {
opacity: 1;
}
}
@media all and (max-width: 1199px) {
.mainContainer {
padding: 0;
flex-wrap: wrap;
display: block;
}
.mainContainer .title {
width: 80%;
margin-left: 7rem;
border-right: none;
}
.mainContainer .title--story {
font-size: 35px;
}
.mainContainer .title--bigger {
font-size: 55px;
}
.mainContainer .timeline {
width: 100%;
height: 80vh;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.mainContainer .timeline__allDate {
width: 10%;
grid-template-columns: 100%;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
text-align: left;
border-right: 1px solid #bbbbbb;
align-items: center;
height: 80vh;
border-bottom: 0;
}
.mainContainer .timeline__allDate--row {
display: block;
}
.mainContainer .timeline__allDate--single {
height: 80px;
align-items: center;
display: flex;
justify-content: space-between;
position: relative;
left: 8%;
}
.mainContainer .timeline__allDate--single sup {
position: inherit;
}
.mainContainer .timeline__allDate--single__date {
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.mainContainer .timeline__allDate--single__date:nth-child(1) {
margin-left: 0;
}
.mainContainer .timeline__allDate--single__switch--line {
transform: rotate(90deg);
top: 38%;
right: 7%;
}
.mainContainer .timeline__allText {
width: 82%;
height: calc(80vh - 2rem);
max-height: calc(80vh - 2rem);
border-top: 1px solid #bbbbbb;
transform: translateX(-5%);
padding-left: 5rem;
margin-top: 1rem;
overflow: scroll;
overflow-x: hidden;
}
.mainContainer .timeline__allText .content--title {
margin: 0 0 1rem 0;
}
.mainContainer .timeline__allText .content--paragraph__title--subtitle {
font-size: 24px;
}
.mainContainer .timeline__allText .content--paragraph__title--more {
margin-left: 10px;
}
.mainContainer .timeline__allText .content--border {
margin-bottom: 2rem;
}
.mainContainer .timeline__allText .oneSection {
width: auto;
}
.mainContainer .timeline__allText .twoSection {
flex-wrap: wrap;
}
.mainContainer .timeline__allText .twoSection__content--left, .mainContainer .timeline__allText .twoSection__content--right {
width: 100%;
}
.mainContainer .timeline__allText .twoSection__content--left {
margin-bottom: 3rem;
}
.mainContainer .timeline__btn {
width: 80%;
transform: translateY(-5rem);
grid-template-columns: 50px 50px;
margin-right: 0;
}
.mainContainer .timeline__btn--right, .mainContainer .timeline__btn--left {
transform: rotate(90deg);
}
.mainContainer .timeline__btn--right {
order: 2;
}
}
@media all and (max-width: 480px) {
.mainContainer .title {
margin-left: 1rem;
}
.mainContainer .timeline__allDate {
width: 15%;
}
.mainContainer .timeline__allDate--single {
left: 15%;
}
.mainContainer .timeline__allDate--single__switch--line {
right: 13%;
}
.mainContainer .timeline__allText {
padding-left: 3rem;
}
}
@media only screen and (max-width: 769px) and (orientation: landscape) {
.mainContainer .timeline {
height: 80vw;
}
.mainContainer .timeline__allDate {
height: 80vw;
}
.mainContainer .timeline__allText {
height: calc(80vw - 2rem);
max-height: calc(80vw - 2rem);
}
}.site-content{
display: inherit!important;
}