/**
    Steps Guide
 */
.nest-sg {}
.nest-sg-box {
    position: relative;
    width: 100%;
    padding: 16px;
    text-align: center;
}

.nest-sg-box-list {
    overflow: hidden;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    position: relative;
}

.nest-sg-box-image {
    margin: 0 auto;
    width: 80%;
    padding-top: 80%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.nest-sg-box-header {
    position: relative;
    font-family: Butler;
    font-size: 80px;
    font-weight: 300;
    line-height: 1;
    padding: 6px 0 6px 0;
}

.nest-sg-box-addon {
    margin-top: 12px;
    padding: 6px 10px 6px 10px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 400;
    width: calc(100% + 16px);
    margin-left: -8px;
}

.nest-sg-box-prev,
.nest-sg-box-next {
    display: block;
    position: absolute;
    width: 70%;
    height: 100px;
    top: 50%;
    right: -40%;
}

.nest-sg-box-prev {
    right: unset;
    left: -40%;
    top: -50%;
    display: none;
}

.nest-sg-box-prev span,
.nest-sg-box-next span {
    display: block;
    position: absolute;
    width: 50%;
    height: 50%;
}

.nest-sg-box-prev span:nth-child(1),
.nest-sg-box-next span:nth-child(1) {
    top: 0;
    left: 0;
    border-top-right-radius: 100%;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
}

.nest-sg-box-prev span:nth-child(2),
.nest-sg-box-next span:nth-child(2) {
    top: 50%;
    left: calc(50% - 1px);
    border-bottom-left-radius: 100%;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
}

.nest-sg-box-prev::before,
.nest-sg-box-next::before {
    content: '';
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    right: 0;
    bottom: 0;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: skew(60deg);
}

.nest-sg-box-prev::after,
.nest-sg-box-next::after {
    content: '';
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    right: 0;
    bottom: -4px;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    transform: skew(-60deg);
}

@media (max-width: 767px) {
    .nest-sg-box-prev {
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .nest-sg-box {
        width: 50%;
    }

    .nest-sg-box-addon {
        font-size: 12px
    }

    .nest-sg-box:nth-of-type(odd) {
        margin-top: 25px
    }

    .nest-sg-box:nth-of-type(even) {
        margin-top: 120px
    }

    .nest-sg-box:nth-of-type(odd) .nest-sg-box-prev {
        display: block;
    }
}

@media (min-width: 992px) and (max-width: 1279px) {
    .nest-sg-box-addon {
        font-size: 12px
    }

    .nest-sg-box-list-md-2 .nest-sg-box {
        width: 50%;
    }

    .nest-sg-box-list-md-3 .nest-sg-box {
        width: 33.3333%;
    }

    .nest-sg-box-list-md-4 .nest-sg-box {
        width: 25%;
    }

    .nest-sg-box:nth-of-type(odd) {
        margin-top: 25px
    }

    .nest-sg-box:nth-of-type(even) {
        margin-top: 120px
    }

    .nest-sg-box:nth-of-type(even):not(.nest-sg-box-last-in-row-md) .nest-sg-box-next {
        transform: scaleY(-1) translateY(100%);
    }

    .nest-sg-box-first-in-row-md .nest-sg-box-prev {
        display: block;
    }
}

@media (min-width: 1280px) and (max-width: 1799px) {
    .nest-sg-box-addon {
        font-size: 13px
    }

    .nest-sg-box-list-lg-2 .nest-sg-box {
        width: 50%;
    }

    .nest-sg-box-list-lg-3 .nest-sg-box {
        width: 33.3333%;
    }

    .nest-sg-box-list-lg-4 .nest-sg-box {
        width: 25%;
    }

    .nest-sg-box-list-lg-5 .nest-sg-box {
        width: 20%;
    }

    .nest-sg-box-list-lg-6 .nest-sg-box {
        width: 16.6666%;
    }

    .nest-sg-box:nth-of-type(odd) {
        margin-top: 25px
    }

    .nest-sg-box:nth-of-type(even) {
        margin-top: 120px
    }

    .nest-sg-box:nth-of-type(even):not(.nest-sg-box-last-in-row-lg) .nest-sg-box-next {
        transform: scaleY(-1) translateY(100%);
    }

    .nest-sg-box-first-in-row-lg .nest-sg-box-prev {
        display: block;
    }
}

@media (min-width: 1800px) {
    .nest-sg-box-addon {
        font-size: 13px
    }

    .nest-sg-box-list-xl-2 .nest-sg-box {
        width: 50%;
    }

    .nest-sg-box-list-xl-3 .nest-sg-box {
        width: 33.3333%;
    }

    .nest-sg-box-list-xl-4 .nest-sg-box {
        width: 25%;
    }

    .nest-sg-box-list-xl-5 .nest-sg-box {
        width: 20%;
    }

    .nest-sg-box-list-xl-6 .nest-sg-box {
        width: 16.6666%;
    }

    .nest-sg-box-list-xl-7 .nest-sg-box {
        width: 14.2857%;
    }

    .nest-sg-box-list-xl-8 .nest-sg-box {
        width: 12.5%;
    }

    .nest-sg-box:nth-of-type(odd) {
        margin-top: 25px
    }

    .nest-sg-box:nth-of-type(even) {
        margin-top: 120px
    }

    .nest-sg-box:nth-of-type(even):not(.nest-sg-box-last-in-row-xl) .nest-sg-box-next {
        transform: scaleY(-1) translateY(100%);
    }

    .nest-sg-box-first-in-row-xl .nest-sg-box-prev {
        display: block;
    }
}