@import url("https://fonts.googleapis.com/css2?family=Baloo+2&display=swap"); .dark { background: #110f16; } .light { background: #f3f5f7; } a, a:hover { text-decoration: none; transition: color 0.3s ease-in-out; } #pageHeaderTitle { margin: 2rem 0; text-transform: uppercase; text-align: center; font-size: 2.5rem; } /* Cards */ .postcard { flex-wrap: wrap; display: flex; box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66); border-radius: 10px; margin: 0 0 2rem 0; overflow: hidden; position: relative; color: #fff; } .postcard.dark { background-color: #18151f; } .postcard.light { background-color: #e1e5ea; } .postcard .t-dark { color: #18151f; } .postcard a { color: inherit; } .postcard h1, .postcard .h1 { margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; } .postcard .small { font-size: 80%; } .postcard .postcard__title { font-size: 1.75rem; } .postcard .postcard__img { max-height: 180px; width: 100%; object-fit: cover; position: relative; } .postcard .postcard__img_link { display: contents; } .postcard .postcard__text { padding: 1.5rem; position: relative; display: flex; flex-direction: column; } .postcard .postcard__preview-txt { overflow: hidden; text-overflow: ellipsis; text-align: justify; height: 100%; } .postcard:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(-70deg, #424242, transparent 50%); opacity: 1; border-radius: 10px; } @media screen and (min-width: 769px) { .postcard { flex-wrap: inherit; } .postcard .postcard__title { font-size: 2rem; } .postcard .postcard__img { max-width: 300px; max-height: 100%; transition: transform 0.3s ease; } .postcard .postcard__text { padding: 3rem; width: 100%; } .postcard .media.postcard__text:before { content: ""; position: absolute; display: block; background: #18151f; top: -20%; height: 130%; width: 55px; } .postcard:hover .postcard__img { transform: scale(1.1); } .postcard:nth-child(2n+1) { flex-direction: row; } .postcard:nth-child(2n+0) { flex-direction: row-reverse; } .postcard:nth-child(2n+1) .postcard__text::before { left: -12px !important; transform: rotate(4deg); } .postcard:nth-child(2n+0) .postcard__text::before { right: -12px !important; transform: rotate(-4deg); } } @media screen and (min-width: 1024px) { .postcard__text { padding: 2rem 3.5rem; } .postcard__text:before { content: ""; position: absolute; display: block; top: -20%; height: 130%; width: 55px; } .postcard.dark .postcard__text:before { background: #18151f; } .postcard.light .postcard__text:before { background: #e1e5ea; } } .green .postcard__title:hover { color: #79dd09; } .green::before { background-image: linear-gradient(-30deg, rgba(121, 221, 9, 0.1), transparent 50%); } .green:nth-child(2n)::before { background-image: linear-gradient(30deg, rgba(121, 221, 9, 0.1), transparent 50%); } .blue .postcard__title:hover { color: #0076bd; } .blue::before { background-image: linear-gradient(-30deg, rgba(0, 118, 189, 0.1), transparent 50%); } .blue:nth-child(2n)::before { background-image: linear-gradient(30deg, rgba(0, 118, 189, 0.1), transparent 50%); } .red .postcard__title:hover { color: #bd150b; } .red::before { background-image: linear-gradient(-30deg, rgba(189, 21, 11, 0.1), transparent 50%); } .red:nth-child(2n)::before { background-image: linear-gradient(30deg, rgba(189, 21, 11, 0.1), transparent 50%); } .yellow .postcard__title:hover { color: #bdbb49; } .yellow::before { background-image: linear-gradient(-30deg, rgba(189, 187, 73, 0.1), transparent 50%); } .yellow:nth-child(2n)::before { background-image: linear-gradient(30deg, rgba(189, 187, 73, 0.1), transparent 50%); } @media screen and (min-width: 769px) { .green::before { background-image: linear-gradient(-80deg, rgba(121, 221, 9, 0.1), transparent 50%); } .green:nth-child(2n)::before { background-image: linear-gradient(80deg, rgba(121, 221, 9, 0.1), transparent 50%); } .blue::before { background-image: linear-gradient(-80deg, rgba(0, 118, 189, 0.1), transparent 50%); } .blue:nth-child(2n)::before { background-image: linear-gradient(80deg, rgba(0, 118, 189, 0.1), transparent 50%); } .red::before { background-image: linear-gradient(-80deg, rgba(189, 21, 11, 0.1), transparent 50%); } .red:nth-child(2n)::before { background-image: linear-gradient(80deg, rgba(189, 21, 11, 0.1), transparent 50%); } .yellow::before { background-image: linear-gradient(-80deg, rgba(189, 187, 73, 0.1), transparent 50%); } .yellow:nth-child(2n)::before { background-image: linear-gradient(80deg, rgba(189, 187, 73, 0.1), transparent 50%); } } 



.main-timeline { position: relative } .main-timeline:before { content: ""; display: block; width: 2px; height: 100%; background: #c6c6c6; margin: 0 auto; position: absolute; top: 0; left: 0; right: 0 } .main-timeline .timeline { margin-bottom: 40px; position: relative } .main-timeline .timeline:after { content: ""; display: block; clear: both } .main-timeline .icon { width: 18px; height: 18px; line-height: 18px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0 } .main-timeline .icon:before, .main-timeline .icon:after { content: ""; width: 100%; height: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; transition: all 0.33s ease-out 0s } .main-timeline .icon:before { background: #fff; border: 2px solid #232323; left: -3px } .main-timeline .icon:after { border: 2px solid #c6c6c6; left: 3px } .main-timeline .timeline:hover .icon:before { left: 3px } .main-timeline .timeline:hover .icon:after { left: -3px } .main-timeline .date-content { width: 50%; float: left; margin-top: 22px; position: relative } .main-timeline .date-content:before { content: ""; width: 36.5%; height: 2px; background: #c6c6c6; margin: auto 0; position: absolute; top: 0; right: 10px; bottom: 0 } .main-timeline .date-outer { width: 125px; height: 125px; font-size: 16px; text-align: center; margin: auto; z-index: 1 } .main-timeline .date-outer:before, .main-timeline .date-outer:after { content: ""; width: 125px; height: 125px; margin: 0 auto; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; transition: all 0.33s ease-out 0s } .main-timeline .date-outer:before { background: #fff; border: 2px solid #232323; left: -6px } .main-timeline .date-outer:after { border: 2px solid #c6c6c6; left: 6px } .main-timeline .timeline:hover .date-outer:before { left: 6px } .main-timeline .timeline:hover .date-outer:after { left: -6px } .main-timeline .date { width: 100%; margin: auto; position: absolute; top: 27%; left: 0 } .main-timeline .month { font-size: 18px; font-weight: 700 } .main-timeline .year { display: block; font-size: 30px; font-weight: 700; color: #232323; line-height: 36px } .main-timeline .timeline-content { width: 50%; padding: 20px 0 20px 50px; float: right } .main-timeline .title { font-size: 19px; font-weight: 700; line-height: 24px; margin: 0 0 15px 0 } .main-timeline .description { margin-bottom: 0 } .main-timeline .timeline:nth-child(2n) .date-content { float: right } .main-timeline .timeline:nth-child(2n) .date-content:before { left: 10px } .main-timeline .timeline:nth-child(2n) .timeline-content { padding: 20px 50px 20px 0; text-align: right } @media only screen and (max-width: 991px) { .main-timeline .date-content { margin-top: 35px } .main-timeline .date-content:before { width: 22.5% } .main-timeline .timeline-content { padding: 10px 0 10px 30px } .main-timeline .title { font-size: 17px } .main-timeline .timeline:nth-child(2n) .timeline-content { padding: 10px 30px 10px 0 } } @media only screen and (max-width: 767px) { .main-timeline:before { margin: 0; left: 7px } .main-timeline .timeline { margin-bottom: 20px } .main-timeline .timeline:last-child { margin-bottom: 0 } .main-timeline .icon { margin: auto 0 } .main-timeline .date-content { width: 95%; float: right; margin-top: 0 } .main-timeline .date-content:before { display: none } .main-timeline .date-outer { width: 110px; height: 110px } .main-timeline .date-outer:before, .main-timeline .date-outer:after { width: 110px; height: 110px } .main-timeline .date { top: 30% } .main-timeline .year { font-size: 24px } .main-timeline .timeline-content, .main-timeline .timeline:nth-child(2n) .timeline-content { width: 95%; text-align: center; padding: 10px 0 } .main-timeline .title { margin-bottom: 10px } }