.workProcedure { padding: 0 5%; font-size: 16px; font-family: "Noto Sans", sans-serif; color: #eee9dc; } .workProcedure h2 { margin: 3em 0 0 0; font-size: 1.5em; letter-spacing: 2px; text-transform: uppercase; } /* ------------------------------------- * timeline * ------------------------------------- */ #timeline { list-style: none; margin: 50px 0 30px 120px; padding-left: 30px; border-left: 3px solid #00f6ff; font-weight: 600; } #timeline li { margin: 40px 0; position: relative; } #timeline p { position: absolute; top: 15px; margin: 0 0 15px; } .date { margin-top: -10px; top: 50%; left: -200px; font-size: 0.95em; line-height: 20px; position: absolute; } .circle { margin-top: -10px; top: 50%; left: -38px; width: 9px; height: 9px; background: #fff; border: 2px solid #00f6ff; border-radius: 50%; display: block; position: absolute; } .content { padding: 50px 20px 0; } /* label { font-size: 1.3em; position: absolute; z-index: 100; top: 20px; } */ .radio { display: none; } /* .radio:checked + .relative .circle { background: #f98262; } */ .radio:checked ~ .content { max-height: 180px; border-color: #eee9dc; margin-right: 20px; } .work{ } /* ------------------------------------- * mobile phones (vertical version only) * ------------------------------------- */ @media screen and (max-width: 767px) { #timeline { margin-left: 0; padding-left: 0; border-left: none; } #timeline li { margin: 50px 0; } /* label { width: 85%; font-size: 1.1em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; transform: translateX(18px); } */ .content { padding-top: 45px; border-color: #eee9dc; } .content:before, .content:after { border: solid transparent; bottom: 100%; } .content:before { border-bottom-color: inherit; border-width: 17px; top: -16px; left: 50px; margin-left: -17px; } .content:after { border-bottom-color: #48b379; border-width: 20px; top: -20px; left: 50px; margin-left: -20px; } .content p { font-size: 0.9em; line-height: 1.4; } .circle, .date { display: none; } }