<style>
    /*--- Splash ---*/
  	.bx-page {
        position: relative;
  	}
    .bx-splash-block {
        position: relative;
        display: -webkit-flex;
        display: flex;
      	-webkit-align-items: center;
        align-items: center;
    }
    .bx-spl-preload {
        position: absolute;

        top: 0px;
        left: 0px;
        width: 1px;
        height: 1px;

        overflow: hidden;
    }
    .bx-spl-line {
      	position: relative;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: stretch;
        align-items: stretch;
    }
  	.bx-media-phone .bx-spl-line {
      	-webkit-flex-direction: column;
      	flex-direction: column;
    }
  	.bx-spl-cell {
      	position: relative;
  	}
  	.bx-media-phone .bx-spl-cell {
      	-webkit-basis: 100% !important; 
      	flex-basis: 100% !important;
      	width: 100% !important;
  	}
    .bx-spl-line.bx-spl-l1 .bx-spl-cell {
      	display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
    }
  	.bx-spl-line.bx-spl-l1 .bx-spl-cell.bx-spl-c1 {
        -webkit-flex: 1 1 70%; 
        flex:  1 1 70%;
      	width: 70%;
    }
  	.bx-media-phone .bx-spl-line.bx-spl-l1 .bx-spl-cell.bx-spl-c1 {
      	text-align: center;
  	}
  	.bx-spl-line.bx-spl-l1 .bx-spl-cell.bx-spl-c2 {
        -webkit-flex: 0 0 30%; 
        flex:  0 1 30%;
      	-webkit-justify-content: center;
        justify-content: center;
      	width: 30%;
    }
    .bx-spl-line.bx-spl-l1 .bx-spl-image {
      	max-width: 100%;
    }
    .bx-spl-line.bx-spl-l2 .bx-spl-cell {
        -webkit-flex: 1 1 33%; 
        flex:  1 1 33%;
      	width: 33%;
    }
  	.bx-media-phone .bx-spl-line.bx-spl-l2 .bx-spl-cell {
      	text-align: center;
  	}
    .bx-spl-line.bx-spl-l2 .bx-spl-cicon {
		position: relative;
      	display: -webkit-flex;
        display: flex;
        -webkit-align-items: flex-start;
        align-items: flex-start;
      	justify-content: flex-start;
      	-webkit-justify-content: flex-start;
    }
    .bx-media-phone .bx-spl-line.bx-spl-l2 .bx-spl-cicon {
      	justify-content: center;
      	-webkit-justify-content: center;
    }
    .bx-spl-line.bx-spl-l2 .bx-spl-cicon .animation {
        width: 4.25rem;
        height: 4.25rem;
    }
</style>
<div class="bx-page bx-def-color-bg-page">
  <div class="bx-splash-block">
      <div class="bx-splash-cnt bx-def-page-width bx-def-centered bx-def-padding-leftright">
          <div class="bx-spl-preload">
            <img src="<bx_image_url:spl-image-main.svg />">
          </div>
          <div class="bx-spl-line bx-spl-l1">
            <div class="bx-spl-cell bx-spl-c1">
              <div class="bx-spl-ccnt bx-def-padding">
                <div class="bx-spl-title bx-def-font-h1 bx-def-font-semibold"><bx_text:_sys_txt_splash_title /></div>
                <div class="bx-spl-slogan bx-def-padding-sec-top bx-def-padding-bottom bx-def-font-grayed"><bx_text:_sys_txt_splash_slogan /></div>
                <div class="bx-spl-image bx-def-padding-top">
                  <img class="bx-spl-image" src="<bx_image_url:spl-image-main.svg />" />
                </div>
              </div>
            </div>
            <div class="bx-spl-cell bx-spl-c2 bx-hide-when-logged-in">
              <div class="bx-spl-ccnt bx-def-padding">__join_form_in_box__</div>
            </div>
          </div>
          <div class="bx-spl-line bx-spl-l2 bx-def-padding">
            <div class="bx-spl-cell bx-spl-c1">
              <div class="bx-spl-ccnt bx-def-padding">
                <div class="bx-spl-cicon connect"><div class="animation"></div></div>
                <div class="bx-spl-ctitle bx-def-padding-sec-topbottom bx-def-font-h2"><bx_text:_sys_txt_splash_connect /></div>
                <div class="bx-spl-ctext bx-def-font-grayed"><bx_text:_sys_txt_splash_connect_text /></div>
              </div>
            </div>
            <div class="bx-spl-cell bx-spl-c2">
              <div class="bx-spl-ccnt bx-def-padding">
                <div class="bx-spl-cicon share"><div class="animation"></div></div>
                <div class="bx-spl-ctitle bx-def-padding-sec-topbottom bx-def-font-h2"><bx_text:_sys_txt_splash_share /></div>
                <div class="bx-spl-ctext bx-def-font-grayed"><bx_text:_sys_txt_splash_share_text /></div>
              </div>
            </div>
            <div class="bx-spl-cell bx-spl-c3">
              <div class="bx-spl-ccnt bx-def-padding">
                <div class="bx-spl-cicon create"><div class="animation"></div></div>
                <div class="bx-spl-ctitle bx-def-padding-sec-topbottom bx-def-font-h2"><bx_text:_sys_txt_splash_create /></div>
                <div class="bx-spl-ctext bx-def-font-grayed"><bx_text:_sys_txt_splash_create_text /></div>
              </div>
            </div>
          </div>
      </div>
  </div>
</div>
<script>
  var animConnect = bodymovin.loadAnimation({
    container: $('.bx-spl-cicon.connect .animation').get(0),
    path: '<bx_image_url:spl-icon-connect.json />',
    renderer: 'svg',
    loop: true,
    autoplay: true,
  });
  var animShare = bodymovin.loadAnimation({
    container: $('.bx-spl-cicon.share .animation').get(0),
    path: '<bx_image_url:spl-icon-share.json />',
    renderer: 'svg',
    loop: true,
    autoplay: true,
  });
  var animCreate = bodymovin.loadAnimation({
    container: $('.bx-spl-cicon.create .animation').get(0),
    path: '<bx_image_url:spl-icon-create.json />',
    renderer: 'svg',
    loop: true,
    autoplay: true,
  });
</script>