/* font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Robot, Oxygen,
    Ubuntu, Camtarell, "Open Sans", "Helvetica Neue", sans-serif; */
    @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600");

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html,
    body {
      height: 100%;
    }
    
    a {
      display: block;
      text-decoration: none;
      color: inherit;
      /* background: tomato; */
      /* padding: 20px; */
      /* margin: 20px; */
    }
    
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Robot, Oxygen,
        Ubuntu, Camtarell, "Open Sans", "Helvetica Neue", sans-serif;
    }
    
    .back {
      width: 200px;
      height: 50px;
      float: left;
      background-color: #eeeeee;
      border: 10px;
      border-color: #ffffff;
      border-style: solid;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      counter-increment: bc;
      padding: 0px 5px 5px 5px;
      margin-right: 10px;
    }
    
    .back:before {
      content: counter(bc) "_";
      position: absolute;
      padding: 10px;
    }
    
    .button_base {
      margin: 0;
      border: 0;
      font-size: 18px;
      position: relative;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -100px;
      width: 200px;
      height: 50px;
      text-align: center;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-user-select: none;
      cursor: default;
    }
    
    .button_base:hover {
      cursor: pointer;
    }
    
    .b03_skewed_slide_in {
      overflow: hidden;
      border: #000000 solid 1px;
    }
    
    .b03_skewed_slide_in div {
      position: absolute;
      text-align: center;
      width: 100%;
      height: 50px;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      padding: 10px;
    }
    
    .b03_skewed_slide_in div:nth-child(1) {
      color: #fff;
      background-color: #6138f6;
    }
    
    .b03_skewed_slide_in div:nth-child(2) {
      opacity: 0.5;
      background-color: #fff;
      width: 30px;
      transition: all 0.2s ease;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      transform: translate(-250px, 0px) skewX(-30deg);
      -webkit-transform: translate(-164%, 0px) skewX(-30deg);
      -moz-transform: translate(-250px, 0px) skewX(-30deg);
    }
    
    .b03_skewed_slide_in:hover div:nth-child(2) {
      transition: all 0.5s ease;
      width: 80px;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      transform: translate(-15px, 0px) skewX(-30deg);
      -webkit-transform: translate(213px, 0px) skewX(-30deg);
      -moz-transform: translate(-15px, 0px) skewX(-30deg);
    }
    
    
    .b03_skewed_slide_in div:nth-child(3) {
      color: #000;
      left: -200px;
      transition: left 0.2s ease;
      -webkit-transition: left 0.2s ease;
      -moz-transition: left 0.2s ease;
    }
    
    .b03_skewed_slide_in:hover div:nth-child(3) {
      left: 0px;
      transition: left 0.30000000000000004s ease;
      -webkit-transition: left 0.30000000000000004s ease;
      -moz-transition: left 0.30000000000000004s ease;
    }
    
    
    
    /* 04 button */
    .b04_skewed_slide_in {
      overflow: hidden;
      border: #000000 solid 1px;
    }
    
    .b04_skewed_slide_in div {
      position: absolute;
      text-align: center;
      width: 100%;
      height: 50px;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      padding: 10px;
    }
    
    .b04_skewed_slide_in div:nth-child(1) {
      color: #000000;
      background-color: #ffffff;
    }
    
    .b04_skewed_slide_in div:nth-child(2) {
      background-color: #000000;
      width: 230px;
      transition: all 0.2s ease;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      transform: translate(-250px, 0px) skewX(-30deg);
      -webkit-transform: translate(-250px, 0px) skewX(-30deg);
      -moz-transform: translate(-250px, 0px) skewX(-30deg);
    }
    
    .b04_skewed_slide_in div:nth-child(3) {
      color: #ffffff;
      left: -200px;
      transition: left 0.2s ease;
      -webkit-transition: left 0.2s ease;
      -moz-transition: left 0.2s ease;
    }
    
    .b04_skewed_slide_in:hover div:nth-child(2) {
      transition: all 0.5s ease;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      transform: translate(-15px, 0px) skewX(-30deg);
      -webkit-transform: translate(-15px, 0px) skewX(-30deg);
      -moz-transform: translate(-15px, 0px) skewX(-30deg);
    }
    
    .b04_skewed_slide_in:hover div:nth-child(3) {
      left: 0px;
      transition: left 0.30000000000000004s ease;
      -webkit-transition: left 0.30000000000000004s ease;
      -moz-transition: left 0.30000000000000004s ease;
    }
    
    
    .b05_skewed_slide_in {
      color: #fff;
      /* transition: 1s; */
      background: #b92b27;
      /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #1565C0, #b92b27);
      /* Chrome 10-25, Safari 5.1-6 */
      background-image: linear-gradient(to right, #1565C0, #b92b27);
      /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
      background-image: linear-gradient(
        to right,
        #f37734 0%,
        #f9c331 51%,
        #f37734 100%
      );
      transition: 0.5s ease-in-out;
      background-size: 200%;
    }
    
    .b05_skewed_slide_in:hover {
      background-size: 5%;
      /* background-position: right center; */
      /* animation: backgrounsChange 0.5s ease-in-out; */
    }
    
    .b05_skewed_slide_in div {
      width: 200px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* @keyframes backgrounsChange {
      0% {
        background: linear-gradient(to right, #1565C0, #b92b27);
      }
      100% {
        background: linear-gradient(to right, #b92b27, #1565C0);
      }
    } */
    
    /* @keyframes test {
      0% {transform: scale(1)}
      100%{transform: scale(1.3)}
    } */