/* .time-line */
.time-line { position: relative;}
.time-line:after { content: ""; position: absolute; top: 2%; left: calc(50% - (16px / 2)); z-index: 20; width: 16px; height: 96%; background: #efcd34; border-radius: 16px;}

.time-line .item { position: relative; background:linear-gradient(90deg, rgba(255,255,255,1) 42%, rgba(250,250,250,1) 42%); margin-bottom: 3rem;}
.time-line .item:before ,
.time-line .item:after { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 30px; background: #fff;}
.time-line .item:after { top: inherit; bottom: 0;}
.time-line .item .content.flex { position: relative; z-index: 25; align-items: center;}
.time-line .item .content.flex > div { position: relative; z-index: 10; width: 50%; max-width: 550px;}

.time-line .item .content.flex > div.text-content { order: 1; max-width: inherit; text-align: right; padding: 0 3rem 0 6.5rem;}
.time-line .item .content.flex > div.text-content:after { content: ""; position: absolute; top: 1.8rem; right: -5px; z-index: 25; width: 10px; height: 10px; background: #fff; border-radius: 100%;}
.time-line .item .text-content h2 { margin-bottom: 0;}
.time-line .item .text-content h2 strong { display: block; font-size: 3.75rem; line-height: 4rem;}
.time-line .item .text-content h2 span { display: block; font-size: 1.8rem; line-height: 2rem;}
.time-line .item .text-content p ,
.time-line .item .text-content p strong { font-size: 1.1rem; margin: 1.5rem 0 0;}
.time-line .item .text-content p.tag { display: inline-block; font-size: .8rem; line-height: 1rem; letter-spacing: 2px; color: #fff; text-transform: uppercase; background: #efcd34; margin: 1rem 0; padding: .5rem 1rem;}
.time-line .item .text-content ul.basic-list { margin-bottom: 0;}
.time-line .item .text-content a.flex { justify-content: flex-end; text-decoration: underline; margin: 1.5rem 0 0;}
.time-line .item .text-content a.flex svg { margin-left: 1rem; transition: margin .5s ease;}
.time-line .item .content.flex > div.image-content { width: 45%; order: 2;}
.time-line .item .image-content img { width: 100%; height: 100%; object-fit: contain;}


.time-line .item:nth-child(odd) { background:linear-gradient(-90deg, rgba(255,255,255,1) 42%, rgba(250,250,250,1) 42%) ;}
.time-line .item:nth-child(odd) .content.flex > div.text-content { order: 2; text-align: left; padding: 0 6.5rem 0 3rem;}
.time-line .item:nth-child(odd) .content.flex > div.text-content:after { left: -5px;}
.time-line .item:nth-child(odd) .content.flex > div.image-content { order: 1;}

@media(hover:hover){
    .time-line .item .text-content a:hover.flex { text-decoration: none;}
    .time-line .item .text-content a:hover.flex svg { margin: 0 -.5rem 0 1.5rem;}
}

@media(max-width: 1280px){
    .time-line .item .content.flex > div.text-content { padding: 0 3rem;} 
}
@media(max-width: 1023px){
    .time-line .item { margin: 0;} 
    .time-line .item .content.flex > div.text-content { padding: 0 2.2rem 0 0;} 
    .time-line .item .content.flex > div.text-content:after { top: 1.4rem;}
    .time-line .item .text-content h2 strong { font-size: 3rem; line-height: 3.2rem;}
    .time-line .item .text-content h2 span { font-size: 1.5rem; line-height: 1.7rem;}
    .time-line .item .text-content p ,
    .time-line .item .text-content p strong { font-size: 1rem; margin: 1rem 0 0;}
    .time-line .item .content.flex > div.image-content { height: 400px;}
    .time-line .item:nth-child(odd) .content.flex > div.text-content { order: 2; text-align: left; padding: 0 0 0 2.2rem;}
}
@media(max-width: 767px){
    .time-line:after { left: 2rem;}
    .time-line .item { margin-bottom: 3rem;}
    .time-line .item .content.flex { flex-wrap: wrap;}
    .time-line .item .content.flex > div { width: 100% !important;}
    .time-line .item .content.flex > div.text-content { order: 2; text-align: left; padding: 0 0 0 3rem !important;}
    .time-line .item .content.flex > div.text-content:after { display: none;}
    .time-line .item .text-content a.flex { justify-content: flex-start;}
    .time-line .item .content.flex > div.image-content { order: 1; margin-bottom: 3rem;}
    .time-line .item .content.flex > div.image-content { height: 275px;}
}