.timeline-wrapper{
    background-color: #EFEFEF;
    color: #03435B;
    font-family: Open Sans, sans-serif;
    height: auto;
    position: relative;
    width: 100%;
}

.timeline-wrapper .timeline-inner{
    margin: 0 auto;
    position: relative;
    width: 1100px;
}

.timeline-wrapper .timeline-inner-start{
    padding: 75px 0 50px 0;
}

.timeline-wrapper .timeline-inner-middle{
    padding: 0;
}

.timeline-wrapper .timeline-inner-end{
    padding: 0 0 50px 0;
}

.timeline-wrapper .timeline-title{
    font-size: 2.618em;
    font-weight: 700;
    letter-spacing: 0px;
    position: relative;
    line-height: 1em;
    margin: 8px 0 0 0;
    padding: 0 0 75px 0;
    text-align: center;
}

.timeline-wrapper .timeline-title:after{
    background-color: #03435B;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    margin-top: 18px;
    position: absolute;
    transform: translateX(-50%);
    width: 50px;
}

.timeline-wrapper .timeline-supertitle{
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.318em;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

.timeline-wrapper .timeline-row{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 225px;
    padding: 0 50px;
    position: relative;
    width: calc(100% - 100px);
}

.timeline-wrapper .timeline-intro{
    color: #001D27;
    font-size: 17px;
    font-weight: normal;
    line-height: 1.618em;
    margin: -15px 0 0 0;
    opacity: 0.9;
    padding: 0 300px;
    text-align: center;
}

.timeline-wrapper .timeline-start{
    background-image: url('../../img/mainblocks/timeline-start-ltr.svg');
    background-repeat: no-repeat;
}

.timeline-wrapper .timeline-start.rtl{
    background-image: url('../../img/mainblocks/timeline-start-rtl.svg');
}

.timeline-wrapper .timeline-middle.ltr{
    background-image: url('../../img/mainblocks/timeline-middle-ltr.svg');
    background-repeat: no-repeat;
}

.timeline-wrapper .timeline-middle.rtl{
    background-image: url('../../img/mainblocks/timeline-middle-rtl.svg');
    background-repeat: no-repeat;
}

.timeline-wrapper .timeline-end{
    background-image: url('../../img/mainblocks/timeline-end-ltr.svg');
    background-repeat: no-repeat;
}

.timeline-wrapper .timeline-end.rtl{
    background-image: url('../../img/mainblocks/timeline-end-rtl.svg');
}

.timeline-wrapper .timeline-complete{
    background-image: url('../../img/mainblocks/timeline-complete-ltr.svg');
}

.timeline-wrapper .timeline-complete.rtl{
    background-image: url('../../img/mainblocks/timeline-complete-rtl.svg');
}

.timeline-wrapper .milestone{
    display: inline-block;
    height: 225px;
    position: relative;
    width: calc(33.33% - 3px);
}

.timeline-wrapper .milestone-content{
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
}

.milestone-rel{
    height: 225px;
    position: relative;
    width: 100%;
}

.timeline-wrapper .milestone-content .milestone-inner{
    width: 100%;
}

.timeline-wrapper .milestone-content .milestone-circle{
    background-color: #FFFFFF;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /*border: 8px solid #EFEFEF;*/
    border-radius: 50%;
    left: 50%;
    height: 150px;
    position: absolute;
    transform: translateX(-50%);
    width: 150px;
}

/*.timeline-wrapper .milestone-content .milestone-circle:after{
    border-radius: 50%;
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: #03435B 1px solid;
}*/

.timeline-wrapper .milestone-content .milestone-text{
    font-size: 16px;
    font-weight: 500;
    line-height: 1.618em;
    padding: 155px 50px 0 50px;
    text-align: center;
    width: calc(100% - 100px);
}

.timeline-wrapper .button{
    left: calc(50%);
    margin: 25px auto;
    transform: translateX(-50%);
}

@media screen and (max-width: 1200px){
    .timeline-wrapper .timeline-inner{
        width: 800px;
    }

    .timeline-wrapper .timeline-intro{
        padding: 0 50px;
    }

    .timeline-wrapper .timeline-row{
        height: 163px;
        padding: 0 50px;
        width: calc(100% - 100px);
    }

    .milestone-rel{
        height: 150px;
    }

    .timeline-wrapper .milestone-content .milestone-circle{
        height: 100px;
        width: 100px;
    }

    .timeline-wrapper .milestone-content .milestone-text{
        font-size: 0.85em;
        line-height: 1.2em;
        padding: 110px 20px 0 20px;
        width: calc(100% - 40px);
    }
}

@media screen and (max-width: 850px){
    .timeline-wrapper .timeline-inner{
        width: 660px;
    }

    .timeline-wrapper .timeline-intro{
        padding: 0 50px;
    }

    .timeline-wrapper .timeline-row{
        height: 133px;
        padding: 0 20px;
        width: calc(100% - 40px);
    }

    .milestone-rel{
        height: 150px;
    }

    .timeline-wrapper .milestone-content .milestone-circle{
        border: 4px solid #EFEFEF;
        height: 80px;
        width: 80px;
    }

    .timeline-wrapper .milestone-content .milestone-circle:after{
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
    }

    .timeline-wrapper .milestone-content .milestone-text{
        font-size: 0.80em;
        padding: 93px 10px 0 10px;
        width: calc(100% - 20px);
    }
}

@media screen and (max-width: 750px){

    .timeline-wrapper .timeline-inner{
        width: 100%;
    }

    .timeline-wrapper .timeline-inner-start{
        padding: 50px 0 35px 0;
    }

    .timeline-wrapper .timeline-title{
        font-size: 2.1em;
        line-height: 1.19em;
        font-weight: 700;
        letter-spacing: 0px;
        position: relative;
        margin: 8px 0 0 0;
        padding: 0 20px 50px 20px;
        text-align: center;
    }

    .timeline-wrapper .timeline-intro{
        font-size: 16px;
        line-height: 24px;
    }

    .timeline-wrapper .timeline-row {
        height: auto;
        padding: 0;
        width: 100%;
    }

    .timeline-wrapper .milestone{
        display: block;
        height: auto;
        width: 100%;
    }

    .timeline-wrapper .milestone-content{
        position: relative;
    }

    .timeline-wrapper .milestone-rel{
        height: auto;
    }

    .timeline-wrapper .timeline-start,
    .timeline-wrapper .timeline-start.rtl,
    .timeline-wrapper .timeline-middle.ltr,
    .timeline-wrapper .timeline-middle.rtl,
    .timeline-wrapper .timeline-end,
    .timeline-wrapper .timeline-end.rtl{
        background-image: url('');
    }

    .timeline-wrapper .timeline-start .milestone.left .milestone-inner{
        padding: 75px 0 0 0;
    }

    .timeline-wrapper .timeline-start .milestone.center .milestone-inner,
    .timeline-wrapper .timeline-start .milestone.right .milestone-inner,
    .timeline-wrapper .timeline-middle .milestone.left .milestone-inner,
    .timeline-wrapper .timeline-middle .milestone.center .milestone-inner,
    .timeline-wrapper .timeline-middle .milestone.right .milestone-inner,
    .timeline-wrapper .timeline-end .milestone.left .milestone-inner,
    .timeline-wrapper .timeline-end .milestone.center .milestone-inner{
        padding: 25px 0 0 0;
    }

    .timeline-wrapper .timeline-end .milestone.right .milestone-inner{
        padding: 25px 0 0 0;
    }


    .timeline-wrapper .milestone-content .milestone-circle{
        height: 175px;
        margin: 20px 0 0 0;
        position: relative;
        width: 175px;
    }

    .timeline-wrapper .milestone-content .milestone-text{
        background-color: white;
        color: #03435a;
        font-size: 0.9em;
        height: auto;
        margin: 10px auto 0 auto;
        max-width: calc(100% - 470px);
        padding: 15px;
        width: fit-content;
    }

    .timeline-wrapper .timeline-complete.ltr .milestone.left,
    .timeline-wrapper .timeline-complete.rtl .milestone.left,
    .timeline-wrapper .timeline-start .milestone.left{
        background-image: url('../../img/mainblocks/phone-timeline-start.svg');
        background-position: top center;
        background-repeat: no-repeat;
    }

    .timeline-wrapper .timeline-complete.ltr .milestone.left,
    .timeline-wrapper .timeline-complete.rtl .milestone.left{
           padding: 75px 0 0 0;
    }

    .timeline-wrapper .timeline-start .milestone.center,
    .timeline-wrapper .timeline-start .milestone.right,
    .timeline-wrapper .timeline-middle .milestone.left,
    .timeline-wrapper .timeline-middle .milestone.center,
    .timeline-wrapper .timeline-middle .milestone.right,
    .timeline-wrapper .timeline-end .milestone.left,
    .timeline-wrapper .timeline-end .milestone.center,
    .timeline-wrapper .timeline-end .milestone.right{
        background-image: url('../../img/mainblocks/phone-timeline-middle.svg');
        background-position: top center;
        background-repeat: no-repeat;
    }

    .timeline-wrapper .timeline-end .milestone.right:after{
        background-image: url('../../img/mainblocks/phone-timeline-end_2.svg');
        background-position: top center;
        background-repeat: no-repeat;
        content: '';
        display: block;
        margin: 0;
        height: 120px;
        width: 100%;
    }
}

@media screen and (max-width: 650px){
    .timeline-wrapper .milestone-content .milestone-text{
        max-width: calc(100% - 330px);
    }

    .timeline-wrapper .timeline-intro{
        padding: 0 18px;
    }
}

@media screen and (max-width: 550px){
    .timeline-wrapper .milestone-content .milestone-text{
        max-width: calc(100% - 230px);
    }
}

@media screen and (max-width: 500px){
    .timeline-wrapper .milestone-content .milestone-text{
        max-width: calc(100% - 160px);
    }
}