/* vim:set ts=4 sts=4 sw=4 bs=2 ai si noet nu ff=dos ft=css: */
/* $Id$ */
/* Last Change: 30-September-2019 18:11:48. */


.pc .button_base {
    margin: 0;
    border: 0;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -120px;
    width: 240px;
    height: 120px;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-user-select: none;
    cursor: default;
}

.pc .button_base:hover {
    cursor: pointer;
}

/* ### ### ### 07 */
.pc .b07_3d_double_roll {
    perspective: 500px;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
/* 	box-shadow: #aaa 4px 4px 4px; */
}

.pc .b07_3d_double_roll div {
    position: absolute;
    text-align: center;
    padding: 50px;
    border: gray solid 1px;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.pc .b07_3d_double_roll div:nth-child(1) {
    color: #2f97d8;
    background-color: #ffffff;
    z-index: 0;
    width: 100%;
    height: 120px;
    clip: rect(0px, 120px, 120px, 0px);
    position: absolute;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform-origin: 50% 50% -60px;
    -webkit-transform-origin: 50% 50% -60px;
    -moz-transform-origin: 50% 50% -60px;
}

.pc .b07_3d_double_roll div:nth-child(2) {
    color: #2f97d8;
    background-color: #2f97d8;
    z-index: -1;
    width: 100%;
    height: 120px;
    clip: rect(0px, 120px, 120px, 0px);
    position: absolute;
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -60px;
    -webkit-transform-origin: 50% 50% -60px;
    -moz-transform-origin: 50% 50% -60px;
}

.pc .b07_3d_double_roll div:nth-child(3) {
    color: #2f97d8;
    background-color: #ffffff;
    z-index: 0;
    width: 100%;
    height: 120px;
    clip: rect(0px, 240px, 120px, 120px);
    position: absolute;
    transition: all 0.2s ease 0.1s;
    -webkit-transition: all 0.2s ease 0.1s;
    -moz-transition: all 0.2s ease 0.1s;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform-origin: 50% 50% -60px;
    -webkit-transform-origin: 50% 50% -60px;
    -moz-transform-origin: 50% 50% -60px;
}

.pc .b07_3d_double_roll div:nth-child(4) {
    color: #2f97d8;
    background-color: #2f97d8;
    z-index: -1;
    width: 100%;
    height: 120px;
    clip: rect(0px, 240px, 120px, 120px);
    position: absolute;
    transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transition: all 0.2s ease 0.1s;
    -webkit-transition: all 0.2s ease 0.1s;
    -moz-transition: all 0.2s ease 0.1s;
    transform-origin: 50% 50% -60px;
    -webkit-transform-origin: 50% 50% -60px;
    -moz-transform-origin: 50% 50% -60px;
}

.pc .b07_3d_double_roll:hover div:nth-child(1) {
    background-color: #2f97d8;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
}

.pc .b07_3d_double_roll:hover div:nth-child(2) {
    color: #ffffff;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
}

.pc .b07_3d_double_roll:hover div:nth-child(3) {
    background-color: #2f97d8;
    transition: all 0.2s ease 0.1s;
    -webkit-transition: all 0.2s ease 0.1s;
    -moz-transition: all 0.2s ease 0.1s;
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
}

.pc .b07_3d_double_roll:hover div:nth-child(4) {
    color: #ffffff;
    transition: all 0.2s ease 0.1s;
    -webkit-transition: all 0.2s ease 0.1s;
    -moz-transition: all 0.2s ease 0.1s;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
}

.bubble div {
  display: block;
/*   height: 100%; */
  -webkit-animation: hue-rotate 10s linear infinite;
          animation: hue-rotate 10s linear infinite;
}

.button {
  -webkit-font-smoothing: antialiased;
/*   background-color: #222; */
  background-color: #44fd82;
  border: none;
  color: #fff;
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 100;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  letter-spacing: 1px;
  color: white;
  padding: 20px 40px;
  text-transform: uppercase;
  transition: all 0.1s ease-out;
}
.button:hover {
  background-color: #90feb5;
  color: #fff;
}
.button:active {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}
.button--bubble {
  position: relative;
  z-index: 2;
  color: white;
  background: none;
}
.button--bubble:hover {
  background: none;
}
.button--bubble:hover + .button--bubble__effect-container .circle {
  background: #44fd82;
}
.button--bubble:hover + .button--bubble__effect-container .button {
  background: #44fd82;
}
.button--bubble:active + .button--bubble__effect-container {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}
.button--bubble__container {
  position: relative;
  display: inline-block;
}
.button--bubble__container .effect-button {
  position: absolute;
  width: 50%;
  height: 25%;
  top: 50%;
  left: 25%;
  z-index: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
/*   background: #ccc; */
  background: #2f97d8;
  transition: background 0.1s ease-out;
  border-radius: 10px;
}

.button--bubble__effect-container {
  position: absolute;
  display: block;
  width: 200%;
  height: 400%;
  top: -150%;
  left: -50%;
  -webkit-filter: url("#goo");
  filter: url("#goo");
  transition: all 0.1s ease-out;
  pointer-events: none;
}
.button--bubble__effect-container .circle {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 15px;
  background: #222;
  transition: background 0.1s ease-out;
}
.button--bubble__effect-container .circle.top-left {
  top: 40%;
  left: 27%;
}
.button--bubble__effect-container .circle.bottom-right {
  bottom: 40%;
  right: 27%;
}

.goo {
  position: absolute;
  visibility: hidden;
  width: 1px;
  height: 1px;
}

html, body {
  width: 100%;
  height: 100%;
}

.button--bubble__container {
  top: 50%;
  margin-top: -25px;
}

@-webkit-keyframes hue-rotate {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

@keyframes hue-rotate {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0);
  }
  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

.buttons-coll {
/*   width: 300px; */
/*   margin: 50px auto; */
  text-align: center;
  position: relative;
  z-index: 1;
}
button {
/*   margin: 20px; */
		box-shadow: #999 4px 4px 4px;
}
.custom-btn {
	width: 225px;
	height: 100px;
/*   padding: 10px 25px; */
  padding: 1em;
  font-size: 1.2em;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  background: transparent;
	background-color: white;
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  color: #2f97d8;
}
/**** BTN No. 1 ****/
.btn-1 {
  border: 2px solid #2f97d8;
}
.btn-1:hover {
  background: #2f97d8;
  color: #fff;
}
.btn-1:active {
  top: 2px;
}

/**** BTN No. 7 ****/
.btn-7 {
/*   border: 2px solid #000; */
  border: 2px solid #2f97d8;
  transition: all 0.3s ease;
  background: white;
}
.btn-7:before {
  position: absolute;
  content: "";
  display: block;
  z-index: -1;
  width: 25%;
  top: 50%;
  left: -15%;
  height: 2px;
  background: #2f97d8;
  transition: all 0.3s ease;
}
.btn-7:hover {
/*   background: #000; */
  background: #2f97d8;
  color: #fff;
/*   border-color: #000; */
  border-color: #2f97d8;
  padding-left: 30px;
  padding-right: 20px;
}
.btn-7:hover:before {
  left: -10%;
}