:root {
--backround-color: #fff;
--primary-color: #7f9ac1;
--secondary-color: #04557d; }
#rts-timeline ul {
list-style: none;
margin-top: 50px; }
#rts-timeline ul li {
position: relative;
width: 0;
margin: 0 auto;
border-left: 6px dotted var(--primary-color); }
#rts-timeline ul li::before {
content: "";
position: absolute;
top: 0;
left: -11px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--primary-color);
transition: background 1s ease-in-out; }
#rts-timeline ul li:nth-child(2n) > div {
margin-left: 70px;
transform: translateX(60px); }
#rts-timeline ul li:nth-child(4n) > div {
margin-left: -414px;
transform: translateX(-60px); }
#rts-timeline ul li:nth-child(2n) > div::before {
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent var(--secondary-color) transparent transparent; }
#rts-timeline ul li:nth-child(4n) > div::before {
transform: translateX(365px);
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent var(--secondary-color); }
#rts-timeline ul li.show > div {
opacity: 1;
visibility: visible;
transform: translateX(0); }
#rts-timeline ul li.show::before {
background: var(--secondary-color); }
#rts-timeline ul li > div {
width: 350px;
margin-bottom: 5px;
position: relative;
opacity: 0;
visibility: hidden;
transition: all 1s ease-in-out; }
#rts-timeline ul li > div > p {
padding-top: 0;
padding-bottom: 30px;}
#rts-timeline ul li > div > div {
position: relative;
top: -14px;
background: var(--secondary-color);
width: 350px;
padding: 5px 10px; }
#rts-timeline ul li > div > div h2 {
text-align: center;
color: #fff; }
#rts-timeline ul li > div::before {
content: "";
width: 0;
height: 0;
position: absolute;
top: 0;
border-style: solid; }
@media (max-width: 900px) {
#rts-timeline ul li > div,
#rts-timeline ul li > div > div {
width: 200px; }
#rts-timeline ul li:nth-child(4n) > div {
margin-left: -264px; }
#rts-timeline ul li:nth-child(4n) > div::before {
transform: translateX(215px); } }
@media (max-width: 600px) {
#rts-timeline ul li {
margin: 0 -10px;
text-align: unset;
padding-left: 0; }
#rts-timeline ul li > div,
#rts-timeline ul li > div > div,
#rts-timeline ul li > div > p {
width: calc(100vw - 40%); }
#rts-timeline ul li:nth-child(4n) > div {
margin-left: 70px;
transform: translateX(60px); }
#rts-timeline ul li:nth-child(4n) > div::before {
transform: translateX(0);
border-width: 8px 16px 8px 0;
border-color: transparent var(--secondary-color) transparent transparent; }
#rts-timeline ul li.show > div {
transform: none; }
#rts-timeline .main-header h1 {
font-size: 2rem; } }