.overlay_container
{
    background-position: center center;
    background-size: cover;
    height: 900px;
    background-image:url("../images/retail.jpg")

}
.overlay_container.up
{
    background-image:url("../images/retailup.jpg")
}
.overlay_container.register
{
    background-image:url("../images/popup-pix.jpg");
    height: fit-content;
    height: -webkit-fill-available;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.overlay_container
{
    position: relative;
    padding: 40px 0px 100px 0px;
}
.orange_overlay {
    background-color: transparent;
    background-image: radial-gradient(at top left, #DE4711 34%, #E9A426 100%);
    opacity: 0.7;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

.grey_overlay {
    background-color: #000000;
    opacity: 0.18;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

.register_overlay {
    background-color: #DE4711;
    opacity: 1;
    mix-blend-mode: multiply;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

.white_cut {


    overflow: hidden;
    position: absolute;
    left: 0;
    width: 100%;
    line-height: 0;
    direction: ltr;

}

.white_cut .cut {
    fill: #F4F4F4;
}

.white_cut svg {
    height: 85px;
    display: block;
    width: calc(100% + 1.3px);
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.white_cut.top
{
    top: -1px;

}

.white_cut.bottom
{
    /*
    z-index: -1;
    */
    -webkit-transform: rotate(
            180deg
    );
    -ms-transform: rotate(180deg);
    transform: rotate(
            180deg
    );
    bottom: -1px;
}

.white_cut.top svg
{
    height: 50px;
    transform: translateX(-50%) rotateY(
            180deg
    );
}

.cadre_clip {
    clip-path: polygon(2vmax 0%, calc(100% - 3vmax) 2vmax, 100% calc(100% - 2vmax), 0% 100%);
    webkit-clip-path: polygon(2vmax 0%, calc(100% - 3vmax) 2vmax, 100% calc(100% - 2vmax), 0% 100%);
    background-color: transparent;
    background-image: linear-gradient(130deg, #DE4711 0%, #E58A20 100%);
    padding: 30px 15px 50px 40px;
    color: white;
}
.cadre_clip .content
{
    padding: 0px 30px 0px 15px;
}
