/*--------------------------------------------------------------------------*\
	Background width svg shape as background
\*--------------------------------------------------------------------------*/

.bg-shape {
    /*box*/
    position:relative;
}

.bg-shape::before {
    /*box*/
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;

    /*background*/
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;

    /*text*/
    content: '';
}

/*--------------------------------------------------------------------------*\
        Shapes > rounded down
\*--------------------------------------------------------------------------*/

.bg-shape--rounded-down-pink::before {
    /*background*/
    background-image: url('../../images/shapes/rounded_down_pink.svg');
}

.bg-shape--rounded-down-blue::before {
    /*background*/
    background-image: url('../../images/shapes/rounded_down_blue.svg');
}

/*--------------------------------------------------------------------------*\
        Shapes > rounded top
\*--------------------------------------------------------------------------*/

.bg-shape--rounded-top-pink::before {
    /*background*/
    background-image: url('../../images/shapes/rounded_top_pink.svg');
}

.bg-shape--rounded-top-blue::before {
    /*background*/
    background-image: url('../../images/shapes/rounded_top_blue.svg');
}

/*--------------------------------------------------------------------------*\
        Shapes > wave
\*--------------------------------------------------------------------------*/

.bg-shape--wave-pink::before {
    /*background*/
    background-image: url('../../images/shapes/wave_pink.svg');
}

.bg-shape--wave-blue::before {
    /*background*/
    background-image: url('../../images/shapes/wave_blue.svg');
}