/*@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);*/
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/*body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 18px;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  background-color: #f5f5f5;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}*/

.description {
  margin-top: 50px;
  text-align: center;
  color: #999;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.description a {
  color: #4A9DF6;
  text-decoration: none;
}

.btnExam.is-open ~ .description {
  opacity: 0;
}

.btnExam {
  display: block;
  position: relative;
  width: 200px;
  height: 80px;
  -webkit-transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  text-align: center;
    margin: 0px auto; 
}

.btn-front {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 80px;
  /*background-color: #40CFE0;*/
  background-color: #226C75;
  color: #fff;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-front:hover {
  background-color:  #459FAA;;
}

.btn.is-open .btn-front {
  pointer-events: none;
  line-height: 160px;
}

.btn-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #eee;
  color: #222;
  -webkit-transform: translateZ(-2px) rotateX(180deg);
          transform: translateZ(-2px) rotateX(180deg);
  overflow: hidden;
  -webkit-transition: box-shadow 0.8s ease;
  transition: box-shadow 0.8s ease;
}

.btn-back p {
  margin-top: 27px;
  margin-bottom: 25px;
}

.btn-back a {
  padding: 12px 70px;
  width: 30%;
  margin: 0 5px;
  background-color: transparent;
  border: 0;
  border-radius: 2px;
  font-size: 1em;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}
.btn-back a:focus {
  outline: 0;
}
.btn-back a.yes {
  background-color: #0CF;
  color: #fff;
}
.btn-back a.yes:hover {
  background-color: #51adf6;
}
.btn-back a.no {
  color: #2196F3;
}
.btn-back a.no:hover {
  background-color: #ddd;
}

.btnExam.is-open .btn-back {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.btnExam[data-direction="left"] .btn-back,
.btnExam[data-direction="right"] .btn-back {
  -webkit-transform: translateZ(-2px) rotateY(180deg);
          transform: translateZ(-2px) rotateY(180deg);
}

.btnExam.is-open {
  width: 400px;
  height: 160px;
}

.btnExam[data-direction="top"].is-open {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

.btnExam[data-direction="right"].is-open {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.btnExam[data-direction="bottom"].is-open {
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
}

.btnExam[data-direction="left"].is-open {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}



.btn2-front {


  background-color: #6665FE ;

  
}

.btn2-front:hover {
  background-color: #3E3EC9;
}



.btn3-front {


  background-color: #0CF;

  
}

.btn3-front:hover {
  background-color: #33ADCC;
}


.btn2-back a.yes {
    background-color: rgb(0, 204, 255);
color: #FFF;
}


.btn2-back a.yes {
    background-color: #6665FE;
color: #FFF;
}