@charset "utf-8"; /* CSS Document */ @media all { .main-timeline { position: relative; margin-bottom:40px; } .main-timeline:before { content: ""; display: block; width: 2px; height: 100%; background-color: rgba(0, 0, 0, 20%); margin: 0 auto; position: absolute; top: 0; left: 0; right: 0; box-shadow:0 3px 10px 0px rgba(0, 0, 0, .25); } .main-timeline .timeline:after { content: ""; display: block; clear: both } .main-timeline .icon { width: 18px; height: 18px; line-height: 18px; margin: 0 auto; position: absolute; top: 8.7rem; left: 0; bottom: 0; right: 0; border-radius: 50%; } .largeimg{ width:205px !important; height:205px !important; } .main-timeline.alternating .timeline:nth-child(2n) .img-container { order:2; } .main-timeline.alternating .timeline:nth-child(2n) .img-container:before { left: 10px; } .main-timeline.alternating .timeline:nth-child(2n) .img-content { left: 37%; } .main-timeline .img-container:before { content: ""; width: 24%; height: 1px; border: dashed rgba(0, 0, 0, 60%) 1.3px; position: absolute; top: 0; right: 0; bottom: 0; z-index:-99; } .main-timeline .img-content { width: 125px; margin: auto; position: absolute; height: 125px; border-radius: 50%; padding: 6px; left: 65%; transform: translate(-50%, -50%); } .main-timeline .date { width: fit-content; display:flex; color: #ffffff; border-radius: 4px 4px 0 0; position:absolute; top:10px; min-height:38px; align-items:center; } .main-timeline .month { font-size: 1.8rem; } span.year { padding: 5px 20px; } .main-timeline .timelineImg { display: block; font-size: 30px; font-weight: 700; color: #232323; width:100%; height:100%; } .main-timeline .timelineImg img{ vertical-align: middle; border-style: none; width: 100%; height: 100%; border-radius: 50%; object-fit:cover; } .main-timeline.alternating .timeline:nth-child(even) .timeline-container { float: inherit; padding-right: 40px; order: 1; } .main-timeline .timeline-content { /*width: 400px;*/ min-height: 160px; } } @media only screen and (max-width: 768px) { .main-timeline:before{ right:inherit; } .main-timeline .timeline-content{ width:inherit; } .main-timeline .timeline-container{ float:left; width:inherit; margin-top: -8rem; } .main-timeline.linear .timeline-container{ margin-top: -5rem; } .main-timeline .img-container{ max-height:100%; } .main-timeline .icon{ left: 5px; right: inherit; } .main-timeline.alternating .timeline:nth-child(2n) .img-container{ order:1; } .main-timeline.alternating .timeline:nth-child(even) .timeline-container .date{ right:inherit; } .main-timeline .img-container:before{ left: 15px; } .main-timeline .img-content, .main-timeline.alternating .timeline:nth-child(2n) .img-content{ left: 50px; transform: translate(0%, -50%); } .main-timeline .img-content{ position:relative !important; } .main-timeline.alternating .timeline:nth-child(even) .timeline-container { padding-right: 12px; } }