.devices-wrapper {
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    position: absolute;
    top: 45%;
    left: 15%;
    width: 56.25rem;
    height: 56.25rem
}

@media(min-width: 576px) {
    .devices-wrapper {
        left: 30%;
        width: 50.25rem;
        height: 50.25rem;
        top: 44%;
    }
}

@media(min-width: 768px) {
    .devices-wrapper {
        left: 30%;
        width: 75rem;
        height: 75rem
    }
}

@media(min-width: 992px) {
    .devices-wrapper {
        left: 40%;
        width: 68.75rem;
        height: 68.75rem
    }
}

@media(min-width: 1200px) {
    .devices-wrapper {
        left: 30%;
        width: 75rem;
        height: 75rem
    }
}

@media(min-width: 1400px) {
    .devices-wrapper {
        left: 30%;
        width: 100rem;
        height: 100rem
    }
}

.devices-wrapper .device {
    width: 100% !important;
    border-radius: .5rem;
    border: .25rem solid rgba(225, 225, 225, .15);
    -webkit-box-shadow: .125rem .125rem 1.25rem 0 rgba(0, 0, 0, .3);
    box-shadow: .125rem .125rem 1.25rem 0 rgba(0, 0, 0, .3);
    width: 6.25rem;
    -webkit-transition: -webkit-transform 2s cubic-bezier(0.77, 0, 0.18, 1);
    transition: -webkit-transform 2s cubic-bezier(0.77, 0, 0.18, 1);
    transition: transform 2s cubic-bezier(0.77, 0, 0.18, 1);
    transition: transform 2s cubic-bezier(0.77, 0, 0.18, 1), -webkit-transform 2s cubic-bezier(0.77, 0, 0.18, 1)
}

.devices-wrapper .small {
    width: 10%;
    position: absolute
}

.devices-wrapper .medium-small {
    width: 29.5%;
    position: absolute
}

.devices-wrapper .medium {
    width: 28%;
    position: absolute
}

.devices-wrapper .small-medium {
    width: 21%;
    position: absolute
}

.devices-wrapper .large {
    width: 44%;
    position: absolute
}

.devices-wrapper .floating-element-9 {
    left: 55%;
    top: 0%
}

.devices-wrapper .floating-element-11 {
    left: 42%;
    top: 93%
}

.devices-wrapper .floating-element-12 {
    left: 76%;
    top: 93%
}

.devices-wrapper .floating-element-10 {
    left: 88%;
    top: 63%
}

.devices-wrapper .floating-element-2 {
    left: 8%;
    top: 40%
}

.devices-wrapper .floating-element-4 {
    left: 39%;
    top: 40%
}

.devices-wrapper .floating-element-7 {
    left: 70%;
    top: 40%
}

.devices-wrapper .floating-element-8  {
    left: 69%;
    top: 10%
}

.devices-wrapper .floating-element-1 {
    left: 42%;
    top: 62%
}

.devices-wrapper .floating-element-6 {
    left: 22%;
    top: 8%
}