.sectionTitleArticleElement {
    background: var(--basicColor1);
    color: #fff
}

.sectionTitleArticleElement .title, .sectionTitleArticleElement article .subSubTitle {
    color: var(--basicColor2)
}

.sectionTitleArticleElement article {
    padding: 2em 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

.sectionTitleArticleElement article .disapearElement {
    transform: translateX(-5em);
    opacity: 0;
    transition: 1s
}

.sectionTitleArticleElement article .rightDiv {
    height: 0;
    transition: 1s
}

.sectionTitleArticleElement article .leftDiv {
    width: 0 !important;
    transition: 1s
}

.sectionTitleArticleElement article .appearElement .rightDiv {
    height: 10em
}

.sectionTitleArticleElement article .appearElement .leftDiv {
    width: 10em !important
}

.sectionTitleArticleElement article div.relative {
    transition: 1s;
    transform: translateX(5em);
    opacity: 0
}

.sectionTitleArticleElement article:nth-child(odd) div.relative {
    transform: translateX(-5em);
    opacity: 0
}

.sectionTitleArticleElement article:nth-child(odd) .disapearElement {
    transform: translateX(5em);
    opacity: 0
}

.sectionTitleArticleElement article .appearElement {
    transform: translateX(0) !important;
    opacity: 1 !important
}

.sectionTitleArticleElement .leftDiv {
    background: #fff
}

.sectionTitleArticleElement .pointDiv {
    border-bottom: 1em solid #fff
}

.sectionTitleArticleElement article:nth-child(odd) {
    flex-direction: row-reverse
}

.sectionTitleArticleElement article:nth-child(odd) div, .sectionTitleArticleElement article:nth-child(odd) div p, .sectionTitleArticleElement article:nth-child(odd) p {
    text-align: right
}

.sectionTitleArticleElement article:nth-child(odd) .leftDiv, .sectionTitleArticleElement article:nth-child(odd) .pointDiv, .sectionTitleArticleElement article:nth-child(odd) .rightDiv {
    left: -1em
}

.sectionTitleArticleElement article p {
    text-align: left
}

.sectionTitleArticleElement article .subTitle {
    color: #fff
}

@media screen and (max-width: 1000px) {
    .sectionTitleArticleElement article {
        justify-content: space-between;
        flex-direction: column-reverse !important
    }

    .sectionTitleArticleElement article div.w45 {
        width: 100%;
        margin: 1em 0
    }

    .sectionTitleArticleElement article:nth-child(2n) {
        align-items: flex-end
    }

    .sectionTitleArticleElement article div.articleDiv {
        width: 100%
    }
}

@media screen and (max-width: 700px) {
    .sectionTitleArticleElement article:nth-child(odd) .leftDiv, .sectionTitleArticleElement article:nth-child(odd) .pointDiv, .sectionTitleArticleElement article:nth-child(odd) .rightDiv {
        left: -.5em
    }

    .sectionTitleArticleElement .pointDiv {
        border-bottom: .5em solid #fff
    }

    .sectionTitleArticleElement article .appearElement .rightDiv {
        height: 5em
    }

    .sectionTitleArticleElement article .appearElement .leftDiv {
        width: 5em !important
    }
}

@media screen and (max-width: 600px) {
    .sectionTitleArticleElement .title {
        font-size: 2.5em
    }

    .sectionTitleArticleElement .subTitle {
        font-size: 2em
    }
}

@media screen and (max-width: 300px) {
    .sectionTitleArticleElement .title {
        font-size: 2em
    }

    .sectionTitleArticleElement .subTitle {
        font-size: 1.5em
    }

    .sectionTitleArticleElement .subSubTitle {
        font-size: 1.2em
    }
}