.bg-circle {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    width: 150px;
    height: 150px;
    max-width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 240px
}

.bg-circle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #394d96;
    opacity: .7
}

.bg-circle img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

.breadcrumb a * {
    transition: all .25s
}

.breadcrumb svg {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.breadcrumb .active svg .svg-circle,
.breadcrumb a:hover svg .svg-circle {
    fill: #6a70ba
}

.breadcrumb .active svg *:not(.svg-circle),
.breadcrumb a:hover svg *:not(.svg-circle) {
    fill: #fff
}

/* competence */
.vertical-text {
    writing-mode: vertical-lr; 
    text-align: center;       
    vertical-align: middle;    
    white-space: nowrap;
    font-size: 14px;   
}

.bgs-cover {
    background-size: cover;
}

@keyframes rotate {
    0% {
        transform: rotateY(0deg)
    }

    100% {
        transform: rotateY(360deg)
    }
}

.swiper-outer {
    padding: 1rem;
    background-color: #cccfe7;
    border: 2px solid #6a70ba;
    border-radius: 1rem;
    max-width: 100%;
    margin: 0 auto
}

.breadcrumb {
    padding-bottom: 0
}

/* bis */
.bis .swiper-pagination-bullets {
    bottom: 0;
}

@media (min-width: 576px) {
    .swiper-outer {
        padding: 2rem;
        max-width: 80%;
        border-radius: 1rem 1rem 0 0
    }

    .lap {
        display: block;
        height: 2rem;
        border: 2px solid #6a70ba;
        border-radius: 0 0 4rem 4rem;
        position: relative;
        top: -2px;
        background-color: #fff
    }

    .change-parent-style {
        pointer-events: none
    }

    .change-parent-style:hover img {
        animation: rotate 3s linear infinite
    }

    .change-parent-style a {
        pointer-events: auto
    }
}

@media (max-width: 767px) {
    #module .breadcrumb {
        position: static;
        -webkit-position: static
    }

    #cross .d-flex>div {
        z-index: 2
    }

    #cross .d-flex:nth-child(odd)>:last-child,
    #cross .d-flex:nth-child(even)>:first-child {
        z-index: 1;
        position: absolute;
        top: 1rem;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .1;
        overflow: hidden
    }

    .img-md-bg {
        height: 100%
    }

    .supmenu svg {
        display: none
    }
}

[data-fancybox]>img:hover {
    opacity: .7
}