.particles-js-canvas-el {position:absolute; top: 0px; z-index:0;}

/* background  ------------------------------------------------------------------------------ */
.background_fixed  { width: 100%; height:100vh; position:fixed; top:0; left: 0; overflow:hidden; z-index:-1;}

.bg_white       {background: #ffffff}
.bg_black       {background: #000000}
.bg_grey        {background: #4e4e4e}

.background   { width:100vw; height:100vh; position:fixed; top:0; left:0; opacity:0.6; z-index:-100;}

.bg_m_0       { background: linear-gradient(45deg, #ecc86e, #62d5d1, #afc885, #3eacd5, #6fce9e, #6af2e7);
                    background-size: 1200% 1200%;

                    -webkit-animation: bg_m_0 59s ease infinite;
                    -moz-animation: bg_m_0 59s ease infinite;
                    animation: bg_m_0 59s ease infinite;
                  }

                    @-webkit-keyframes bg_m_0 {
                        0%{background-position:0% 94%}
                        50%{background-position:100% 7%}
                        100%{background-position:0% 94%}
                    }
                    @-moz-keyframes bg_m_0 {
                        0%{background-position:0% 94%}
                        50%{background-position:100% 7%}
                        100%{background-position:0% 94%}
                    }
                    @keyframes bg_m_0 {
                        0%{background-position:0% 94%}
                        50%{background-position:100% 7%}
                        100%{background-position:0% 94%}
                    }


.bg_m_1       { background: linear-gradient(45deg, #cdec6e, #6afffa, #d3ff88, #66d1f9, #7ff5b9, #f9a569);
                    background-size: 1200% 1200%;

                -webkit-animation: bg_m_1 59s ease infinite;
                -moz-animation: bg_m_1 59s ease infinite;
                animation: bg_m_1 59s ease infinite;
                }

                @-webkit-keyframes bg_m_1 {
                    0%{background-position:0% 23%}
                    50%{background-position:100% 78%}
                    100%{background-position:0% 23%}
                }
                @-moz-keyframes bg_m_1 {
                    0%{background-position:0% 23%}
                    50%{background-position:100% 78%}
                    100%{background-position:0% 23%}
                }
                @keyframes bg_m_1 {
                    0%{background-position:0% 23%}
                    50%{background-position:100% 78%}
                    100%{background-position:0% 23%}
                }

.bg_m_2       { background: linear-gradient(45deg, #cdec6e, #6afffa, #d3ff88, #66d1f9, #7ff5b9, #f9a569);
                background-size: 1200% 1200%;


                -webkit-animation: bg_m_2 59s ease infinite;
                -moz-animation: bg_m_2 59s ease infinite;
                animation: bg_m_2 59s ease infinite;
                }

                @-webkit-keyframes bg_m_2 {
                    0%{background-position:92% 0%}
                    50%{background-position:9% 100%}
                    100%{background-position:92% 0%}
                }
                @-moz-keyframes bg_m_2 {
                    0%{background-position:92% 0%}
                    50%{background-position:9% 100%}
                    100%{background-position:92% 0%}
                }
                @keyframes bg_m_2 {
                    0%{background-position:92% 0%}
                    50%{background-position:9% 100%}
                    100%{background-position:92% 0%}
                }

.bg_m_3       { background: linear-gradient(45deg, #cdec6e, #6afffa, #d3ff88, #66d1f9, #7ff5b9, #f9a569);
                background-size: 1200% 1200%;


                -webkit-animation: bg_m_3 59s ease infinite;
                -moz-animation: bg_m_3 59s ease infinite;
                animation: bg_m_3 59s ease infinite;
                }

                @-webkit-keyframes bg_m_3 {
                    0%{background-position:92% 0%}
                    50%{background-position:9% 100%}
                    100%{background-position:92% 0%}
                }
                @-moz-keyframes bg_m_3 {
                    0%{background-position:92% 0%}
                    50%{background-position:9% 100%}
                    100%{background-position:92% 0%}
                }
                @keyframes bg_m_3 {
                    0%{background-position:92% 0%}
                    50%{background-position:9% 100%}
                    100%{background-position:92% 0%}
                }


.bg_s_0       { background: linear-gradient(45deg, #ecc86e, #ecc86e);
                background-size: 1200% 1200%;
              }


.bg_yellowish { background: linear-gradient(45deg, #feffc0, #fffcd78c);
                background-size: 400% 400%;
              }

.bg_greenish { background: linear-gradient(45deg, #feffc0, #36bb0c26);
                background-size: 400% 400%;
              }

.bg_bluish {
            background: -moz-linear-gradient(45deg, #5fa8e9 0%, #5ec2e1 45%, #5cdbd9 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(45deg, #5fa8e9 0%,#5ec2e1 45%,#5cdbd9 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(45deg, #5fa8e9 0%,#5ec2e1 45%,#5cdbd9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fa8e9', endColorstr='#5cdbd9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
           }

.bg_lightbluish {
            background: -moz-linear-gradient(45deg, #daedff 0%,#9ae7ff 45%,#aefffe 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(45deg, #daedff 0%,#9ae7ff 45%,#aefffe 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(45deg, #daedff 0%,#9ae7ff 45%,#aefffe 100%);/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#daedff', endColorstr='#daedff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
           }

.bg_blackish {
            background: -moz-linear-gradient(45deg, #6bb4f5 0%,#76b9f591 45%,#67efec8c 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(45deg, #6bb4f5 0%,#76b9f591 45%,#67efec8c 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(45deg, #6bb4f5 0%,#76b9f591 45%,#67efec8c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fa8e9', endColorstr='#5cdbd9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
           }




.bg_wave_yellow {
  opacity: .2;
  position: absolute;
  top: 60%;
  left: -500px;
  background: #ff9b0099;
  width: 3000px;
  height: 3000px;
  transform-origin: 50% 48%;
  border-radius: 43%;
  animation: drift 13000ms infinite linear;
}

.bg_wave_yellow.-two {
  animation: drift 21000ms infinite linear;
  opacity: .1;
  background: yellow;
}

.bg_wave_yellow.-three {
  animation: drift 17000ms infinite linear;
}




.bg_wave_blue {
  opacity: .2;
  position: absolute;
  bottom: 60%;
  left: -500px;
  background: #25bfe491;
  width: 3000px;
  height: 3000px;
  transform-origin: 50% 48%;
  border-radius: 43%;
  animation: drift 13000ms infinite linear;
}

.bg_wave_blue.-two {
  animation: drift 21000ms infinite linear;
  opacity: .1;
  background: blue;
}

.bg_wave_blue.-three {
  animation: drift 17000ms infinite linear;
}





.bg_tri_yellow {
  opacity: .07;
  position: absolute;
  bottom: 60%;
  left: -500px;
  background: #ff9b0099;
  width: 3000px;
  height: 3000px;
  transform-origin: 50% 48%;
  border-radius: 0%;
  animation: drift 50000ms infinite linear;
}

.bg_tri_yellow.-two {
  animation: drift 70000ms infinite linear;
  opacity: .05;
  background: yellow;
}

.bg_tri_yellow.-three {
  animation: drift 80000ms infinite linear;
}


.bg_tri_blue {
  opacity: .07;
  position: absolute;
  bottom: 60%;
  left: -500px;
  background: #5fa8e9;
  width: 3000px;
  height: 3000px;
  transform-origin: 50% 48%;
  border-radius: 0%;
  animation: drift 50000ms infinite linear;
}

.bg_tri_blue.-two {
  animation: drift 70000ms infinite linear;
  opacity: .05;
  background: blue;
}

.bg_tri_blue.-three {
  animation: drift 80000ms infinite linear;
}



.bg_tri_green {
  opacity: .07;
  position: absolute;
  top: 60%;
  left: -500px;
  background: #36bb0c91;
  width: 3000px;
  height: 3000px;
  transform-origin: 50% 48%;
  border-radius: 0%;
  animation: drift 50000ms infinite linear;
}

.bg_tri_green.-two {
  animation: drift 70000ms infinite linear;
  opacity: .05;
  background: green;
}

.bg_tri_green.-three {
  animation: drift 80000ms infinite linear;
}





@keyframes drift {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}