* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    margin:0;
    position: relative;
}
#main {
    overflow: hidden;
}
.container {
    width:100%;
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.container .content {
    margin:0 auto;
    width:100%;
    max-width:1200px;
    min-width: 320px;
    padding:0 20px;
}

#main .background {
    background-color:#E9DFDB;
    height:600px;
    width:100%;
    position: absolute;
    z-index: 1;
    left:0;
    top:0;
    overflow: hidden;
}
#main .background .shape {
    width:100%;
    position: absolute;
    bottom:0;
    left:0;
    height:200px;
    border-top:100px solid transparent;
    border-bottom:100px solid #fff;
    border-left-color:transparent;
    border-left-style:solid;
    border-right-color:#fff;
    border-right-style:solid;
    z-index:2;
}
#main .background:before,
#main .background:after {
    content:'';
    display: block;
    position: absolute;
    height:inherit;
    width:200px;
    top:0;
    background-position: center;
    background-repeat:no-repeat;
}
#main .background:before {
    left:0;
    background-image:url('../images/background-left.svg');
}
#main .background:after {
    right:0;
    background-image:url('../images/background-right.svg');
    background-position: center bottom;
}
@media (max-width:1024px) {


    #main .background {
        height:500px;
    }
    #main .background .shape {
        height:100px;
        border-top:50px solid transparent;
        border-bottom:50px solid #fff;
    }
}
@media (max-width:770px) {
    .container .content {
        padding:0 10px;
    }
    #main .background .shape {
        height:300px;
    }
    #main .background:before,
    #main .background:after {
        background-size:auto 100%;
        height: 200px;
        width: 100px;
    }
}