.footerDiv, .footerDiv .presentationDiv ul li a {
    color: #fff
}

.footerDiv {
    background: var(--basicColor1);
    background-repeat: no-repeat;
    background-size: 25%;
    background-position: right bottom;
    padding-bottom: 0
}

.footerDiv .linkDiv:before {
    content: "";
    width: 0;
    position: absolute;
    height: 2px;
    background: #fff;
    transition: 3s;
    top: 50%;
    right: 0
}

.footerDiv ul li a {
    transition: .3s;
    opacity: 1
}

.footerDiv .endDiv a:hover, .footerDiv ul li a:hover {
    opacity: .5
}

.footerDiv .linkDiv img {
    opacity: 0;
    transition: 3s
}

.appearFooter .endDiv p, .appearFooter .linkDiv img {
    opacity: 1 !important
}

.footerDiv .presentationDiv p {
    opacity: 0;
    transform: translateX(-5em);
    transition: 3s;
    padding-right: 2em;
    box-sizing: border-box
}

.appearFooter .presentationDiv p, .footerDiv ul .appearLi {
    transform: translateX(0);
    opacity: 1
}

.appearFooter .linkDiv:before {
    width: 78%
}

.footerDiv img {
    outline: white solid 1px
}

.footerDiv .linkDiv ul li {
    display: inline-block
}

.footerDiv .linkDiv {
    display: flex;
    position: relative;
    justify-content: space-between
}

.footerDiv .endDiv a {
    color: #fff;
    transition: .3s;
    opacity: 1
}

.footerDiv .linkDiv svg {
    font-size: 2em;
    margin-left: .5em
}

.footerDiv .linkDiv svg path{
    fill: white;
}

.footerDiv .presentationDiv p, .footerDiv .presentationDiv ul {
    width: 33%
}

.footerDiv .presentationDiv ul {
    padding: 2em 0 2em 2em;
    position: relative;
    overflow: hidden;
    box-sizing: border-box
}

.footerDiv .presentationDiv ul:before {
    content: "";
    height: 0;
    background: #fff;
    position: absolute;
    width: 2px;
    top: 0;
    display: block;
    left: 0;
    transition: 2s
}

.footerDiv .presentationDiv ul:last-child:before {
    transition-delay: 0.5s
}

.appearFooter .presentationDiv ul:before {
    height: 100%
}

.footerDiv .presentationDiv ul li:before {
    content: "- "
}

.footerDiv .presentationDiv ul li:first-child:before, .footerDiv .presentationDiv ul:last-child li:before {
    content: ""
}

.footerDiv .presentationDiv {
    display: flex
}

.footerDiv li.mediumSpacing {
    padding: 0;
    margin: .5em 0;
    text-align: right;
    display: block
}

.footerDiv ul li {
    transform: translateX(-5em);
    opacity: 0;
    transition: 1s
}

.footerDiv li.hoverBasicEffect svg path, .footerDiv ul li a svg path {
    fill: white
}

.footerDiv .endDiv p img {
    width: 8em;
    vertical-align: middle;
    margin-left: 1em;
    outline: 0
}

.footerDiv .endDiv {
    width: 70%
}

.footerDiv .endDiv p {
    margin-right: 5%;
    width: 100%;
    position: relative;
    padding-top: 1em;
    transition: 3s;
    opacity: 0
}

.footerDiv .endDiv p:before {
    content: "";
    position: absolute;
    height: 2px;
    background: #fff;
    top: 0;
    width: 0;
    transition: 3s
}

.appearFooter .endDiv p:before {
    width: 100%
}

@media screen and (max-width: 1300px) {
    .footerDiv .linkDiv:before {
        width: 73%
    }

    .footerDiv .linkImg {
        width: 25%
    }
}

@media screen and (max-width: 1000px) {
    .footerDiv .linkDiv:before {
        width: 62%
    }

    .footerDiv .linkDiv .linkImg {
        width: 35%
    }

    .footerDiv .presentationDiv p {
        width: 100%
    }

    .footerDiv .presentationDiv {
        flex-wrap: wrap
    }

    .footerDiv .presentationDiv ul {
        width: 50%
    }

    .footerDiv .presentationDiv ul:nth-child(2n+2) {
        border-left: 0
    }
}

@media screen and (max-width: 650px) {
    .footerDiv .linkDiv:before {
        display: none
    }
}

@media screen and (max-width: 550px) {
    .footerDiv .presentationDiv ul {
        width: 100%;
        padding: .5em 0 .5em 1em;
        border-left: 0
    }

    .footerDiv .linkDiv .linkImg {
        width: 50%
    }

    .footerDiv .linkDiv li:first-child a svg {
        margin-left: 0
    }

    .footerDiv .linkDiv {
        flex-direction: column
    }

    .footerDiv .presentationDiv ul li {
        text-align: left
    }
}