@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Open+Sans:700");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}




.buttons {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 260px;
  margin-top: -130px;
  margin-left: -250px;
  text-align: center;
}



.btn {
  display: inline-block;
  min-width: 280px;
  margin: 15px 5px;
  padding: 12px 15px 12px;
  font: 700 18px 'Open Sans', sans-serif;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 1px rgba(0, 0, 0, 0.1), inset 0 -10px 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.btn.sec {
  color: #777;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  background: #fff;
}

.btn.sec:hover {
  background: #f5f5f5;
}

.btn.pri {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.set.blue .btn.pri {
  background: #59d;
}

.set.tele .btn.pri {
  background: #1E96C8;
}

.set.green .btn.pri {
  background: #6b6;
}

.btn.sec.ico,
.btn.pri.ico {
  position: relative;
  padding-left: 100px;
  text-align: left;
}

.btn.sec.ico:before,
.btn.pri.ico:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 50px;
  padding: 10px 0 12px;
  font-size: 24px;
  font-family: fontawesome;
  text-align: center;
  border-radius: 3px 0 0 3px;
  background: rgba(0, 0, 0, 0.15);
}

.btn.sec.ico:before {
  background: rgba(0, 0, 0, 0.08);
}

.set.blue .btn.pri.ico:before {
  content: "\f095";
}

.set.green .btn.pri.ico:before {
  content: "\f232";
}

.set.tele .btn.pri.ico:before {
  content: "\f2c6";
}