body {
  background-color: #191919;
  font-family: 'Open Sans', sans-serif; }

.text {
  opacity: 0;
  position: absolute;
  z-index: 7;
  text-align: left;
  /*margin: -50px 0 0 -150px;*/
  width: 300px;
  height: 100px;
  top: 50%;
  left: 50%;
  font-size: 48px;
  font-weight: 700;
  -webkit-animation: on .6s ease-in-out 4.2s forwards;
  -moz-animation: on .6s ease-in-out 4.2s forwards;
  -o-animation: on .6s ease-in-out 4.2s forwards;
  animation: on .6s ease-in-out 4.2s forwards; }
  .text p {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    -webkit-animation: type .3s steps(60, end) 3.7s;
    -moz-animation: type .3s steps(60, end) 3.7s;
    -o-animation: type .3s steps(60, end) 3.7s;
    animation: type .3s steps(60, end) 3.7s; }
  .text p:nth-child(2) {
    -webkit-animation: type2 .5s steps(60, end) 3.7s;
    -moz-animation: type2 .5s steps(60, end) 3.7s;
    -o-animation: type2 .5s steps(60, end) 3.7s;
    animation: type2 .5s steps(60, end) 3.7s; }
  .text button {
    border: 0;
    opacity: 0;
    background: #191919;
    color: #f5f5f5;
    border: 1px solid #191919;
    letter-spacing: 2px;
    padding: .5rem 2.5rem;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: color 0.5s, background-color 0.5s;
    -moz-transition: color 0.5s, background-color 0.5s;
    -ms-transition: color 0.5s, background-color 0.5s;
    -o-transition: color 0.5s, background-color 0.5s;
    transition: color 0.5s, background-color 0.5s;
    -webkit-animation: on .6s ease-in-out 4s forwards;
    -moz-animation: on .6s ease-in-out 4s forwards;
    -o-animation: on .6s ease-in-out 4s forwards;
    animation: on .6s ease-in-out 4s forwards; }
    .text button:hover {
      background: #f5f5f5;
      color: #191919;
      border: 1px solid #191919; }
  .text .end_logo {
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    background-image: url("../img/splash/smcs_logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 140px 140px;
    transform: translateY(-50%) translateX(-50%);
    -webkit-animation: off .9s ease-in-out 6.2s forwards;
    -moz-animation: off .9s ease-in-out 6.2s forwards;
    -o-animation: off .9s ease-in-out 6.2s forwards;
    animation: off .9s ease-in-out 6.2s forwards; }

.splash {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden; }
  .splash_logo {
    position: absolute;
    top: 50%;
    z-index: 5;
    left: 50%;
    width: 150px;
    text-align: center;
    height: 60px;
    font-size: 26px;
    font-weight: 600;
    color: #ffffff;
    opacity: 1;
    will-change: opacity;
    background-image: url("../img/splash/sm_white_logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 150px 60px;
    transform: translateY(-50%) translateX(-50%);
    -webkit-animation: logo .3s ease-in 1.5s forwards, off .6s ease-in-out 3.2s forwards;
    -moz-animation: logo .3s ease-in 1.5s forwards, off .6s ease-in-out 3.2s forwards;
    -o-animation: logo .3s ease-in 1.5s forwards, off .6s ease-in-out 3.2s forwards;
    animation: logo .3s ease-in 1.5s forwards, off .6s ease-in-out 3.2s forwards; }
    .splash_logo .line1 {
      display: block;
      position: absolute;
      left: -10px;
      bottom: -20px;
      width: 15px;
      height: 1px;
      background-color: #757474;
      content: "";
      opacity: 0;
      -webkit-animation: on 0.1s ease-in 0.4s forwards, off .3s ease-in 1.5s forwards;
      -moz-animation: on 0.1s ease-in 0.4s forwards, off .3s ease-in 1.5s forwards;
      -o-animation: on 0.1s ease-in 0.4s forwards, off .3s ease-in 1.5s forwards;
      animation: on 0.1s ease-in 0.4s forwards, off .3s ease-in 1.5s forwards; }
    .splash_logo .line2 {
      display: block;
      position: absolute;
      left: -10px;
      bottom: -20px;
      width: 1px;
      height: 15px;
      background-color: #757474;
      content: "";
      opacity: 0;
      -webkit-animation: on 0.1s ease-in 0.3s forwards, off .3s ease-in 1.5s forwards;
      -moz-animation: on 0.1s ease-in 0.3s forwards, off .3s ease-in 1.5s forwards;
      -o-animation: on 0.1s ease-in 0.3s forwards, off .3s ease-in 1.5s forwards;
      animation: on 0.1s ease-in 0.3s forwards, off .3s ease-in 1.5s forwards; }
    .splash_logo .line3 {
      display: block;
      position: absolute;
      left: -10px;
      top: -15px;
      width: 15px;
      height: 1px;
      background-color: #757474;
      content: "";
      will-change: width;
      opacity: 0;
      -webkit-animation: on 0.1s ease-in 0.1s forwards, off .3s ease-in 1.5s forwards;
      -moz-animation: on 0.1s ease-in 0.1s forwards, off .3s ease-in 1.5s forwards;
      -o-animation: on 0.1s ease-in 0.1s forwards, off .3s ease-in 1.5s forwards;
      animation: on 0.1s ease-in 0.1s forwards, off .3s ease-in 1.5s forwards; }
    .splash_logo .line4 {
      display: block;
      position: absolute;
      left: -10px;
      top: -15px;
      width: 1px;
      height: 15px;
      background-color: #757474;
      content: "";
      will-change: width;
      opacity: 0;
      -webkit-animation: on 0.1s ease-in 0.2s forwards, off .3s ease-in 1.5s forwards;
      -moz-animation: on 0.1s ease-in 0.2s forwards, off .3s ease-in 1.5s forwards;
      -o-animation: on 0.1s ease-in 0.2s forwards, off .3s ease-in 1.5s forwards;
      animation: on 0.1s ease-in 0.2s forwards, off .3s ease-in 1.5s forwards; }
    .splash_logo .line5 {
      display: block;
      position: absolute;
      left: 145px;
      bottom: -20px;
      width: 15px;
      height: 1px;
      background-color: #757474;
      content: "";
      opacity: 0;
      -webkit-animation: on 0.1s ease-in 0.5s forwards, off .3s ease-in 1.5s forwards;
      -moz-animation: on 0.1s ease-in 0.5s forwards, off .3s ease-in 1.5s forwards;
      -o-animation: on 0.1s ease-in 0.5s forwards, off .3s ease-in 1.5s forwards;
      animation: on 0.1s ease-in 0.5s forwards, off .3s ease-in 1.5s forwards; }
    .splash_logo .line6 {
      display: block;
      position: absolute;
      left: 160px;
      bottom: -20px;
      width: 1px;
      height: 15px;
      background-color: #757474;
      content: "";
      opacity: 0;
      -webkit-animation: on 0.1s ease-in 0.6s forwards, off .3s ease-in 1.5s forwards;
      -moz-animation: on 0.1s ease-in 0.6s forwards, off .3s ease-in 1.5s forwards;
      -o-animation: on 0.1s ease-in 0.6s forwards, off .3s ease-in 1.5s forwards;
      animation: on 0.1s ease-in 0.6s forwards, off .3s ease-in 1.5s forwards; }
    .splash_logo .line7 {
      display: block;
      position: absolute;
      left: 145px;
      top: -15px;
      width: 15px;
      height: 1px;
      background-color: #757474;
      content: "";
      will-change: width;
      opacity: 0;
      -webkit-animation: on 0.1s ease-in 0.8s forwards, off .3s ease-in 1.5s forwards;
      -moz-animation: on 0.1s ease-in 0.8s forwards, off .3s ease-in 1.5s forwards;
      -o-animation: on 0.1s ease-in 0.8s forwards, off .3s ease-in 1.5s forwards;
      animation: on 0.1s ease-in 0.8s forwards, off .3s ease-in 1.5s forwards; }
    .splash_logo .line8 {
      display: block;
      position: absolute;
      left: 160px;
      top: -15px;
      width: 1px;
      height: 15px;
      background-color: #757474;
      content: "";
      will-change: width;
      opacity: 0;
      -webkit-animation: on 0.1s ease-in 0.7s forwards, off .3s ease-in 1.5s forwards;
      -moz-animation: on 0.1s ease-in 0.7s forwards, off .3s ease-in 1.5s forwards;
      -o-animation: on 0.1s ease-in 0.7s forwards, off .3s ease-in 1.5s forwards;
      animation: on 0.1s ease-in 0.7s forwards, off .3s ease-in 1.5s forwards; }
  .splash_svg {
    position: relative;
    margin: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    right: 0; }
    .splash_svg svg {
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: visible;
      backface-visibility: visible; }
      .splash_svg svg rect {
        width: 100%;
        height: 100%;
        fill: #f5f5f5;
        stroke: 0;
        -webkit-clip-path: polygon(40vw 40vh, 60vw 40vh, 60vw 60vh, 40vw 60vh);
        clip-path: polygon(40vw 40vh, 60vw 40vh, 60vw 60vh, 40vw 60vh);
        -webkit-animation: expand .7s ease-in forwards 2.7s;
        -moz-animation: expand .7s ease-in forwards 2.7s;
        -o-animation: expand .7s ease-in forwards 2.7s;
        animation: expand .7s ease-in forwards 2.7s; }
  .splash_minimize {
    position: absolute;
    margin: auto;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 4; }
    .splash_minimize svg {
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: visible;
      backface-visibility: visible; }
      .splash_minimize svg rect {
        width: 100%;
        height: 100%;
        -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
        clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
        -webkit-animation: scale .2s ease-out forwards 1s, hide 1.3s ease-out forwards 1.2s;
        -moz-animation: scale .2s ease-out forwards 1s, hide 1.3s ease-out forwards 1.2s;
        -o-animation: scale .2s ease-out forwards 1s, hide 1.3s ease-out forwards 1.2s;
        animation: scale .2s ease-out forwards 1s, hide 1.3s ease-out forwards 1.2s; }

@-webkit-keyframes scale {
  100% {
    -webkit-clip-path: polygon(40vw 40vh, 60vw 40vh, 60vw 60vh, 40vw 60vh);
    clip-path: polygon(40vw 40vh, 60vw 40vh, 60vw 60vh, 40vw 60vh); } }

@-moz-keyframes scale {
  100% {
    -webkit-clip-path: polygon(40vw 40vh, 60vw 40vh, 60vw 60vh, 40vw 60vh);
    clip-path: polygon(40vw 40vh, 60vw 40vh, 60vw 60vh, 40vw 60vh); } }

@-o-keyframes scale {
  100% {
    -webkit-clip-path: polygon(40vw 40vh, 60vw 40vh, 60vw 60vh, 40vw 60vh);
    clip-path: polygon(40vw 40vh, 60vw 40vh, 60vw 60vh, 40vw 60vh); } }

@keyframes scale {
  100% {
    -webkit-clip-path: polygon(40vw 40vh, 60vw 40vh, 60vw 60vh, 40vw 60vh);
    clip-path: polygon(40vw 40vh, 60vw 40vh, 60vw 60vh, 40vw 60vh); } }

@-webkit-keyframes hide {
  100% {
    fill: transparent; } }

@-moz-keyframes hide {
  100% {
    fill: transparent; } }

@-o-keyframes hide {
  100% {
    fill: transparent; } }

@keyframes hide {
  100% {
    fill: transparent; } }

@-webkit-keyframes off {
  100% {
    opacity: 0; } }

@-moz-keyframes off {
  100% {
    opacity: 0; } }

@-o-keyframes off {
  100% {
    opacity: 0; } }

@keyframes off {
  100% {
    opacity: 0; } }

@-webkit-keyframes on {
  100% {
    opacity: 1; } }

@-moz-keyframes on {
  100% {
    opacity: 1; } }

@-o-keyframes on {
  100% {
    opacity: 1; } }

@keyframes on {
  100% {
    opacity: 1; } }

@-webkit-keyframes logo {
  100% {
    color: #292929;
    background-image: url("../img/splash/sm_logo.png"); } }

@-moz-keyframes logo {
  100% {
    color: #292929;
    background-image: url("../img/splash/sm_logo.png"); } }

@-o-keyframes logo {
  100% {
    color: #292929;
    background-image: url("../img/splash/sm_logo.png"); } }

@keyframes logo {
  100% {
    color: #292929;
    background-image: url("../img/splash/sm_logo.png"); } }

@-webkit-keyframes type {
  0% {
    width: 0; } }

@-moz-keyframes type {
  0% {
    width: 0; } }

@-o-keyframes type {
  0% {
    width: 0; } }

@keyframes type {
  0% {
    width: 0; } }

@-webkit-keyframes type2 {
  0% {
    width: 0; }
  50% {
    width: 0; }
  100% {
    width: 100; } }

@-moz-keyframes type2 {
  0% {
    width: 0; }
  50% {
    width: 0; }
  100% {
    width: 100; } }

@-o-keyframes type2 {
  0% {
    width: 0; }
  50% {
    width: 0; }
  100% {
    width: 100; } }

@keyframes type2 {
  0% {
    width: 0; }
  50% {
    width: 0; }
  100% {
    width: 100; } }

@-webkit-keyframes expand {
  0% { }
  25% {
    -webkit-clip-path: polygon(0vw 0vh, 55vw 40vh, 55vw 58vh, 45vw 58vh);
    clip-path: polygon(0vw 0vh, 55vw 40vh, 55vw 60vh, 45vw 60vh);
    fill: white; }
  50% {
    -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 45vw 60vh);
    clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 45vw 60vh);
    fill: #f5f5f5; }
  75% {
    -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 0vw 100vh);
    clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 0vw 100vh);
    fill: white; }
  100% {
    -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
    clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
    fill: #f5f5f5; } }

@-moz-keyframes expand {
  0% { }
  25% {
    -webkit-clip-path: polygon(0vw 0vh, 55vw 40vh, 55vw 58vh, 45vw 58vh);
    clip-path: polygon(0vw 0vh, 55vw 40vh, 55vw 60vh, 45vw 60vh);
    fill: white; }
  50% {
    -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 45vw 60vh);
    clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 45vw 60vh);
    fill: #f5f5f5; }
  75% {
    -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 0vw 100vh);
    clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 0vw 100vh);
    fill: white; }
  100% {
    -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
    clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
    fill: #f5f5f5; } }

@-o-keyframes expand {
  0% { }
  25% {
    -webkit-clip-path: polygon(0vw 0vh, 55vw 40vh, 55vw 58vh, 45vw 58vh);
    clip-path: polygon(0vw 0vh, 55vw 40vh, 55vw 60vh, 45vw 60vh);
    fill: white; }
  50% {
    -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 45vw 60vh);
    clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 45vw 60vh);
    fill: #f5f5f5; }
  75% {
    -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 0vw 100vh);
    clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 0vw 100vh);
    fill: white; }
  100% {
    -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
    clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
    fill: #f5f5f5; } }

@keyframes expand {
  0% { }
  25% {
    -webkit-clip-path: polygon(0vw 0vh, 55vw 40vh, 55vw 58vh, 45vw 58vh);
    clip-path: polygon(0vw 0vh, 55vw 40vh, 55vw 60vh, 45vw 60vh);
    fill: white; }
  50% {
    -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 45vw 60vh);
    clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 45vw 60vh);
    fill: #f5f5f5; }
  75% {
    -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 0vw 100vh);
    clip-path: polygon(0vw 0vh, 100vw 0vh, 55vw 60vh, 0vw 100vh);
    fill: white; }
  100% {
    -webkit-clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
    clip-path: polygon(0vw 0vh, 100vw 0vh, 100vw 100vh, 0vw 100vh);
    fill: #f5f5f5; } }