
#shape_contain {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    background: linear-gradient(0deg, rgba(7, 47, 46, 0.8) 0%, rgba(255, 252, 226, 0.5) 100%), url(../images/portland.jpg) no-repeat center center;
    /*border: 20px solid rgb(255, 254, 244);
    box-sizing: border-box;*/
    background-size: cover;
    /*            background-blend-mode: multiply;*/
}
#circle {
    width: 80vh;
    height: 80vh;
    border-radius: 80%;
    background: rgba(136, 239, 231, 0.3);
    position: absolute;
    top: 7vh;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.3);
}
#tri1 {
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    width: 100vh;
    height: 88vh;
    background: url(../images/sugar2code.jpg) no-repeat bottom center;
    background-size: cover;
    position: absolute;
    top: 10vh;
    left: 50%;
    transform: translate3d(-50%, 0, 0) scaleX(-1);
    /*filter: hue-rotate(310deg) contrast(140%);*/
    -webkit-filter: grayscale(90%); /* Safari 6.0 - 9.0 */
    filter:  grayscale(90%);
    opacity: 0.8;
}
#tri2 {
    -webkit-clip-path: polygon(50% 0, 0% 100%, 9% 100%, 50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%, 100% 100%, 50% 0);
    clip-path: polygon(50% 0, 0% 100%, 9% 100%, 50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%, 100% 100%, 50% 0);
    width: 80vh;
    height: 70vh;
    background: url(../images/clouds.jpg) no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 10vh;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    filter: hue-rotate(90deg) contrast(140%);
    background-blend-mode: color-dodge;
    opacity: 0.5;
}
#tri3 {
    -webkit-clip-path: polygon(50% 0, 0% 100%, 9% 100%, 50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%, 100% 100%, 50% 0);
    clip-path: polygon(50% 0, 0% 100%, 9% 100%, 50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%, 100% 100%, 50% 0);
    width: 80vh;
    height: 70vh;
    background: rgba(0, 113, 110, 0.2);
    position: absolute;
    top: 20vh;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
}
.strip {
    position: absolute;
    background: linear-gradient(0deg, rgba(164, 0, 217, 0) 0%, rgba(164, 0, 217, 0.3) 35%, rgba(255, 67, 134, 0.3) 65%, rgba(255, 67, 134, 0) 100%);
}
#strip1 {
    width: 20vh;
    height: 120vh;
    left: 50%;
    transform: translate3d(-175%, -15%, 0) rotateZ(30deg);
}
#strip2 {
    width: 5vh;
    height: 90vh;
    left: 50%;
    transform: translate3d(60vh, -15%, 0) rotateZ(30deg);
}
#strip3 {
    width: 5vh;
    height: 90vh;
    left: 50%;
    transform: translate3d(-70vh, 25%, 0) rotateZ(30deg);
}