/* 
    File: backgrounds.css
    Last update: 06-May-2019
*/

/* Steps 2R */
.container.bg-steps-2r .b1 { 
    text-align: center; 
    background: #ededed;
    z-index: 1;
}
.container.bg-steps-2r .b2 { 
    background: #7373e0; 
    z-index: 3;
}
.container.bg-steps-2r .b1:after { 
    content: "";
    position: absolute; 
    right: -100px; 
    top: -10%; 
    z-index: -1;
    display: block; 
    height: 120%; 
    width: 200px;
    background: #6666dd;
    transform: rotate(10deg);
}

.container.bg-steps-2r .b2:before { 
    content: "";
    position: absolute; 
    left: -50px; 
    top: -10%; 
    z-index: -1;
    display: block; 
    height: 120%; 
    width: 200px;
    background: #7373e0;
    transform: rotate(10deg);
}

/* Steps 2L */

.container.bg-steps-2l .b1 { 
    text-align: center; 
    background: #7373e0;
    z-index: 3;
}
.container.bg-steps-2l .b2 { 
    background: #ededed;  
    z-index: 1;
}
.container.bg-steps-2l .b1:after { 
    content: "";
    position: absolute; 
    right: -100px; 
    top: -10%; 
    z-index: -1;
    display: block; 
    height: 120%; 
    width: 200px;
    background: #6666dd;
    transform: rotate(-10deg);
}

.container.bg-steps-2r .b2 {
    padding: 100px 0;
}

.container.bg-steps-2r .b2:before { 
    content: "";
    position: absolute; 
    left: -50px; 
    top: -10%; 
    z-index: -1;
    display: block; 
    height: 120%; 
    width: 200px;
    background: #7373e0;
    transform: rotate(10deg);
}

/* Steps 3 Default*/

.container.bg-steps-3 .b1,
.container.bg-steps-3 .b3{
    background: #7373e0;
    z-index: 3;
}

.container.bg-steps-3 .b2 {
    background: #dedede;
    z-index: 1;
}

.container.bg-steps-3 .b1:after,
.container.bg-steps-3 .b3:before { 
    background: #6666dd;
    z-index: 2;
}

.container.bg-steps-3 .b1:after,
.container.bg-steps-3 .b3:before {
    content: "";
    position: absolute;
    top: -10%;
    display: block;
    height: 120%;
    width: 75px;
}

.container.bg-steps-3 .b1:after {
    right: -40px;
    transform: rotate(-10deg);
}
.container.bg-steps-3 .b3:before { 
    left: -40px;
    transform: rotate(10deg);
}

/* Steps 3 Invereted */
.container.bg-steps-3i .b1,
.container.bg-steps-3i .b3 { 
    background: #000;
    color: #fff;
}

.bg-solid-primary { background: #6666dd; }
.bg-solid-secondary { background: #7373e0; }

@media(max-width: 991px){
    /* Steps 2r */
    .container.bg-steps-2r .b2:before { 
        left: -10%;
        right: 0; 
        top: -000%;
        height: 75px;
        width: 120%;
        transform: rotate(-5deg);
    }
    .container.bg-steps-2r .b1:after{
        right: -10%; 
        top: 90%; 
        height: 100px; 
        width: 120%;
        transform: rotate(-5deg);
        z-index: -1;
    }
    /*Steps 3 */
    .container.bg-steps-3 .b1 {
        padding-bottom: 75px;
    }
    .container.bg-steps-3 .b1:after {
        top: 90%;
        left: -10%;
        transform: rotate(-5deg);
        width: 120%;
        height: 100px;
    }    
    .container.bg-steps-3 .b3:after {
        content: none;
    }
    .container.bg-steps-3 .b3:before {
        top: -10%;
        left: -10%;
        transform: rotate(-5deg);
        height: 75px;
        width: 120%;
    }

}