@charset "UTF-8";





a.btn_27 {
	/*display: block; */ 
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 500px;
	margin: auto;
	padding: 1rem 4rem;
	color: #fff;
	font-weight: bold;
	background: #27acd9;
	position: relative;
	transition: 0.3s ease-in-out;
}
a.btn_27:hover {
    background: #fff;
    color: #27acd9;
}
a.btn_27:before, a.btn_27:after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
a.btn_27:before {
  top: 0;
  left: 0;
}
a.btn_27:after {
  bottom: 0;
  right: 0;
}
a.btn_27:hover:before, a.btn_27:hover:after {
  width: 100%;
  height: 100%;
}
a.btn_27:hover:before {
  border-top-color: #27acd9;
  border-right-color: #27acd9;
  transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}
a.btn_27:hover:after {
  border-bottom-color: #27acd9;
  border-left-color: #27acd9;
  transition: border-color 0s ease-out 0.2s, width 0.15s ease-out 0.2s, height 0.15s ease-out 0.3s;
}







@media screen and (min-width:660px){



.btn_27 a{
	/*display: block; */ 
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 500px;
	margin: auto;
	padding: 1rem 4rem;
	color: #fff;
	font-weight: bold;
	background: #27acd9;
	position: relative;
	transition: 0.3s ease-in-out;
}
.btn_27 a:hover {
    background: #fff;
    color: #27acd9;
}
.btn_27 a::before, .btn_27 a::after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.btn_27 a::before {
  top: 0;
  left: 0;
}
.btn_27 a::after {
  bottom: 0;
  right: 0;
}
.btn_27 a:hover:before, .btn_27 a:hover:after {
  width: 100%;
  height: 100%;
}
.btn_27 a:hover:before {
  border-top-color: #27acd9;
  border-right-color: #27acd9;
  transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}
.btn_27 a:hover:after {
  border-bottom-color: #27acd9;
  border-left-color: #27acd9;
  transition: border-color 0s ease-out 0.2s, width 0.15s ease-out 0.2s, height 0.15s ease-out 0.3s;
}