/* buttons */
.btn {
  -webkit-appearance: none;
  background: transparent;
  border: .1rem solid #5764c6;
  border-radius: .3rem;
  color: #5764c6;
  cursor: pointer;
  display: inline-block;
  font-size: 1.4rem;
  height: 3.2rem;
  line-height: 1.6rem;
  min-width:120px;
  outline: 0;
  padding: .7rem 1.5rem;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}
.btn:focus {
  background: #f3f4fb;
}
.btn:hover {
  background: #5764c6;
  border-color: #4452c0;
  color: #fff;
}
.btn:active,
.btn.active {
  background: #4452c0;
  border-color: #3b49af;
  color: #fff;
}
.btn.btn-primary {
  background: #5764c6;
  border-color: #4452c0;
  color: #fff;
}
.btn.btn-primary:focus {
  background: #4f5dc3;
}
.btn.btn-primary:hover {
  background: #4452c0;
  border-color: #3b49af;
  color: #fff;
}
.btn.btn-primary:active,
.btn.btn-primary.active {
  background: #3b49af;
  border-color: #35419c;
  color: #fff;
}
.btn.btn-primary.loading::after {
  border-color: #fff;
  border-right-color: transparent;
  border-top-color: transparent;
}
.btn.btn-link {
  background: transparent;
  border-color: transparent;
  color: #5764c6;
}
.btn.btn-link:hover,
.btn.btn-link:focus {
  color: #35419c;
}
.btn.btn-link:active,
.btn.btn-link.active {
  color: #283176;
}
.btn.btn-sm {
  border-radius: .2rem;
  font-size: 1.2rem;
  height: 2.4rem;
  line-height: 1.4rem;
  padding: .4rem 1rem;
}
.btn.btn-lg {
  border-radius: .4rem;
  font-size: 1.8rem;
  height: 4.2rem;
  line-height: 2rem;
  padding: 1rem 1.8rem;
}
.btn.btn-block {
  display: block;
  width: 100%;
}
.btn.btn-clear {
  background: transparent;
  border: 0;
  color: #666;
  height: 2rem;
  margin-left: .3rem;
  opacity: .45;
  padding: 0;
}
.btn.btn-clear:hover {
  opacity: .85;
}
.btn.btn-clear::before {
  content: "\00d7";
  font-size: 2rem;
}
/* --- figure SVG --*/
.figure2{
    width:100%;
    height:100%;/*420px;*/
}
.figtxt{
    font-style:normal;
    font-size:30px;
    line-height:100%;
    fill:#333333;
}
.figtxt2{
    font-style:normal;
    font-size:25px;
    line-height:100%;
    fill:#545454;
}
.figtxt3{
    font-style:normal;
    font-size:22px;
    line-height:100%;
    fill:#333333;
}
.figcir{
    stroke:#373536;
    stroke-width:2;
    rx:19;
    ry:19;
    r:19;
    fill:#fcfffa;
}

.fcolor1{
    fill:#019299;
}
.fcolor2{
    fill:#0000ff;
}
.fcolor3{
    fill:#fd0000;
}

#btn1 {
	top:100px;
	float:right;
}
.fx-order{
	position:relative;
	top:-120px;
    left:29%;
	width: 8%;
	height:300px;
	border-radius:10px;
	border:2px solid #4BBABA;
	color:red;
	z-index:2;
	display:none;
}

#btn1:hover ~ div[for="btn1"] {
	display:block;
	-webkit-transform-origin:left center;
	-moz-transform-origin: left center;
	transform-origin: left center;
	-webkit-animation: bounce-in-left 1.1s both .5s;
	-moz-animation: bounce-in-left 1.1s both .5s;
	animation: bounce-in-left 1.1s both .5s;
}

@-webkit-keyframes bounce-in-left {
    0% {
        -webkit-transform: translateX(-600px);
        transform: translateX(-600px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    38% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1
    }

    55% {
        -webkit-transform: translateX(-68px);
        transform: translateX(-68px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    72% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    81% {
        -webkit-transform: translateX(-28px);
        transform: translateX(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    90% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    95% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes bounce-in-left {
    0% {
        -webkit-transform: translateX(-600px);
        transform: translateX(-600px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    38% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1
    }

    55% {
        -webkit-transform: translateX(-68px);
        transform: translateX(-68px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    72% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    81% {
        -webkit-transform: translateX(-28px);
        transform: translateX(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    90% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    95% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}


#img2:hover ~ div[for="img2"] {
	display:block;
	-webkit-transform-origin:left center;
	-moz-transform-origin: left center;
	transform-origin: left center;
	-webkit-animation: tracking-in-expand-fwd-top 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both .5s;
	-moz-animation: tracking-in-expand-fwd-top 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both .5s;
	animation: tracking-in-expand-fwd-top 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both .5s;
}

.fixed-rate{
    position:relative;
    top:-400px;
    height:0;
    color:#3e3e3e;
    font-size:32px;
    text-align:center;
    z-index:2;
    display:none;
/*	-webkit-animation: tracking-in-expand-fwd-top 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both 3s;
	-moz-animation: tracking-in-expand-fwd-top 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both 3s;
	animation: tracking-in-expand-fwd-top 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both 3s;
	*/
}
.massiv-fx{
    position:relative;
    top:-460px;
    height:0;
    color:#3e3e3e;
    font-size:14px;
    text-align:center;
    z-index:2;
    display:none;    
}
.color_em{
    color:#2307FA;
    font-size:24px;   
}

#img1:hover ~ div[for="img1"],
#img2:hover ~ div[for="img2"] {
    display:block;
	-webkit-animation: tracking-in-expand-fwd-top 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both .3s;
	-moz-animation: tracking-in-expand-fwd-top 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both .3s;
	animation: tracking-in-expand-fwd-top 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both .3s;
}

@-webkit-keyframes tracking-in-expand-fwd-top {
    0% {
        letter-spacing: -.5em;
        -webkit-transform: translateZ(-700px) translateY(-500px);
        transform: translateZ(-700px) translateY(-500px);
        opacity: 0
    }

    40% {
        opacity: .6
    }

    to {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1
    }
}

@keyframes tracking-in-expand-fwd-top {
    0% {
        letter-spacing: -.5em;
        -webkit-transform: translateZ(-700px) translateY(-500px);
        transform: translateZ(-700px) translateY(-500px);
        opacity: 0
    }

    40% {
        opacity: .6
    }

    to {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1
    }
}