/* Teams */
.teams-visual {
    position: relative;
}

.teams-visual__container {
    position: relative;
    height: 100%;
    /* height: calc(400px * 0.5); */
    /* margin: 0px auto; */
    /* max-width: 1200px; */
}

.teams-visual__wrap {
    height: 100%;
    width: 100%;
    /* width: 100%; */
    /* transform: scale(.5); */
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    position: absolute;
    /* left: 50%; */
    /* margin-left: -400px; */
}

.teams-visual__item {
    display: inline-flex;
    position: absolute;
    left: calc(50% - 30px);
    top: calc(50% - 30px);
    transition: transform 0.5s ease;
}

.teams-visual__item-triangle {
    background-color: #000;
    text-align: left;
    transform: rotate(18deg) skewX(-30deg) scale(1, .866);
    position: absolute;
    left: -5px;
    top: -10px;
}

.teams-visual__item-triangle::before,
.teams-visual__item-triangle::after {
    content: '';
    position: absolute;
    background-color: inherit;
}

.teams-visual__item-triangle,
.teams-visual__item-triangle::before,
.teams-visual__item-triangle::after {
    width: 10px;
    height: 10px;
    border-top-right-radius: 30%;
}

.teams-visual__item-triangle::before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
}

.teams-visual__item-triangle::after {
    transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}

.teams-visual__avatar {
    width: 60px;
    height: 60px;
}

.teams-visual__label {
    padding: 10px 20px;
    background: var(--action-color);
    color: #fff;
    border-radius: 25px;
    font-size: 20px;
    font-weight: 500;
    left: calc(50% - 80px);
}

.teams-visual__item--1 {
    margin: 140px 0 0 -20%;
    background: #825ee4;
    background: linear-gradient(-45deg, #5e72e4, #825ee4);
}

.teams-visual__item--1 .teams-visual__item-triangle {
    background: #825ee4;
}

.teams-visual__item--2 {
    margin: -90px 0 0 30%;
    background: #fbb140;
    background: linear-gradient(-45deg, #fb6340, #fbb140);
}

.teams-visual__item--2 .teams-visual__item-triangle {
    background: #fbb140;
}

.teams-visual__item--3 {
    /* margin: 10% 0 0 0; */
    top: 37%;
    left: 73%;
    background: #1d976c;
    background: linear-gradient(-45deg, #93f9b9, #1d976c);
}

.teams-visual__item--3 .teams-visual__item-triangle {
    background: #1d976c;
}

.teams-visual__item--4 {
    /* margin: 30% 0 0 5%; */
    top: 68%;
    left: 62%;
    background: #1488cc;
    background: linear-gradient(-45deg, #2b32b2, #1488cc);
}

.teams-visual__item--4 .teams-visual__item-triangle {
    background: #1488cc;
}

.teams-visual__item--5 {
    /* margin: 0% 0 0 -40%; */
    top: 55%;
    left: 10%;
    background: #f56036;
    background: linear-gradient(-45deg, #f5365c, #f56036);
}

.teams-visual__item--5 .teams-visual__item-triangle {
    background: #f56036;
}

.teams-visual__item--6 {
    margin: -120px 0 0 -22%;
    background: #b79891;
    background: linear-gradient(-45deg, #94716b, #b79891);
}

.teams-visual__item--6 .teams-visual__item-triangle {
    background: #b79891;
}

.teams-visual__item--7 {
    margin: 160px 0 0 28%;
    background: #f56036;
    background: linear-gradient(to right, #f5365c, #f56036);
}

.teams-visual__item--7 .teams-visual__item-triangle {
    background: #f56036;
}

.teams-visual__item--8 {
    margin: 10px 0 0 22%;
}

.teams-visual__item--9 {
    margin: -20px 0 0 -12%;
}

.teams-visual__item--10 {
    margin: -120px 0 0 45%;
}

.teams-visual__item--11 {
    margin: 170px 0 0 0;
}

@media (min-width: 992px) {
    .teams-visual__container {
        position: relative;
        /* height: 400px; */
        /* margin: 0px auto; */
        /* max-width: 1200px; */
    }

    .teams-visual__wrap {
        width: 100%;
        height: 100%;
        transform: none;
        position: relative;
        left: 0;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .teams-visual__container {
        display: none;
    }
}

@media (max-width: 900px) {
    .main .container {
        padding-right: 0px;
    }

    .main {
        background: url(/static/aidlab.jpg) center 50px no-repeat;
        background-size: 350px;
        height: 900px;
    }
}

@media (max-width: 767px) {

    /* Now video is clickable */
    .modal-backdrop {
        visibility: hidden;
    }

    .main {
        background-size: 250px;
        height: 800px;
    }

    .overlay {
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1;
        position: relative;
    }
}