.brick-materials-1 .wrapper {
    padding: 0 81px 0 67px;
}
.brick-materials-1 .brick-in {
    padding: 56px 0 44px 0;
}
.materials-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.materials-content .col.content {
    max-width: 420px;
    padding: 2rem 2rem 2rem 0;
    margin-right: 1rem;
}

.vectors {
    width: 300px;
}

.vectors svg {
    overflow: visible;
}

.vectors svg > g {
    transition: transform 500ms ease;
    transition-delay: 200ms;
}

.materials-heading {
    font-weight: 700;
    font-size: 18px;
    line-height: 18px;
}

.material {
    display: flex;
    align-items: center;
    padding-bottom: 1rem;
}

.material:hover .bullet-bg {
    transform: scale(1.5);
    background-color: var(--green);

}
.material:hover .bullet-content {
    color: white;
}

.material .bullet {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width:25px;
    height: 25px;
    margin-right: 1rem;
}

.material .bullet-bg {
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 50%;
    transition: transform 300ms ease;
    box-shadow: inset 0 0 0 1px var(--green);
}

.material .bullet-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--green);
    pointer-events: none;
}

.material .name {
    pointer-events: none;
    font-weight: 500;
    font-size: 19px;
    line-height: 21px;
}

g.highlight {
    transform: translateY(-200px);
}

g.show {

    animation-duration: 500ms;
    animation-delay: 200ms;
    animation-fill-mode: both;
}
g.hide {
    animation-duration: 500ms;
    animation-delay: 200ms;
    animation-fill-mode: both;
}

#h.show {
    animation-name: scaleUpH;
}
#h.hide {
    animation-name: scaleDownH;
}

#j.show {
    animation-name: scaleUpJ;
}
#j.hide {
    animation-name: scaleDownJ;
}

#f.show {
    animation-name: scaleUpF;
}
#f.hide {
    animation-name: scaleDownF;
}
#e.show {
    animation-name: showE;
}
#e.hide {
    animation-name: hideE;
}

#h, #j, #f {
    transform: scale(0);
}



#h {
    transform-origin: 650px 250px;
}
#j {
    transform-origin: 650px 50px;
}
#f {
    transform-origin: 650px 450px;
}
#e {
    transform-origin: 650px -50px;
    transform: translate(-200px, -450px);
}


@keyframes scaleUpH {
    0%   {transform: translate(-400px, -250px) scale(0)}
    100% {transform: translate(-400px, -250px) scale(1.5)}
}
@keyframes scaleDownH {
    0%   {transform: translate(-400px, -250px) scale(1.5)}
    100% {transform: translate(-400px, -250px) scale(0)}
}

@keyframes scaleUpJ {
    0%   {transform: translate(-150px, -140px) scale(0)}
    100% {transform: translate(-150px, -140px) scale(1.5)}
}
@keyframes scaleDownJ {
    0%   {transform: translate(-150px, -140px) scale(1.5)}
    100% {transform: translate(-150px, -140px) scale(0)}
}

@keyframes scaleUpF {
    0%   {transform: translate(-160px, -140px) scale(0)}
    100% {transform: translate(-160px, -140px) scale(1.5)}
}
@keyframes scaleDownF {
    0%   {transform: translate(-160px, -140px) scale(1.5)}
    100% {transform: translate(-160px, -140px) scale(0)}
}

@keyframes showE {
    0%   {transform: translate(-200px, -450px)}
    100% {transform: translate(25px, -450px)}
}
@keyframes hideE {
    0%   {transform: translate(25px, -450px)}
    100% {transform: translate(-200px, -450px)}
}

@media (max-width: 992px) {

    .materials-content {
        flex-direction: column-reverse;
    }

    .materials-content .col.materials {
        display: none;
    }
    .materials-content .col.content {
        margin-right: 0;
    }
    .materials-content .col.animation {
        margin-bottom: 2rem;
    }
}

/* Materials Small Version */
.materials-small-row {
    display: flex;
}

.materials-small-row > .col {
    flex: 1 1 50%;
}

@media (max-width: 1224px) {
    .materials-small-content .col.materials {
        display: none;
    }

    .materials-small-content .col.animation {
        padding-right: 0;
        padding-left: 9px;
    }

    .materials-small-content .vectors {
        width: 100%;
    }
}