/* css button */

a.btn {
	background:#fff;
	color:#333;
	cursor:pointer;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;text-align:center;
	height:30px;line-height:30px;padding-left:10px;padding-right:10px;
	transition: 500ms ease all;
	border:1px solid #cbcbcb;
}
a.btn:hover {
	border:1px solid #bbbbbb;
	background:#f0f0f0;
	transition: 500ms ease all;
}

a.btn_gray {
	background:#868e96;
	color:#fff;
	cursor:pointer;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;text-align:center;
	height:30px;line-height:30px;padding-left:10px;padding-right:10px;
	transition: 500ms ease all;
}
a.btn_gray:hover {
	background:#727b84;
	transition: 500ms ease all;
}

a.btn_blue {
	background:#007bff;
	color:#fff;
	cursor:pointer;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;text-align:center;
	height:30px;line-height:30px;padding-left:10px;padding-right:10px;
	transition: 500ms ease all;
}
a.btn_blue:hover {
	background:#0069d9;
	transition: 500ms ease all;
}

a.btn_green {
	background:#28a745;
	color:#fff;
	cursor:pointer;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;text-align:center;
	height:30px;line-height:30px;padding-left:10px;padding-right:10px;
	transition: 500ms ease all;
}
a.btn_green:hover {
	background:#218838;
	transition: 500ms ease all;
}

a.btn_cyan {
	background:#17a2b8;
	color:#fff;
	cursor:pointer;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;text-align:center;
	height:30px;line-height:30px;padding-left:10px;padding-right:10px;
	transition: 500ms ease all;
}
a.btn_cyan:hover {
	background:#138496;
	transition: 500ms ease all;
}

a.btn_yellow {
	background:#ffc107;
	color:#fff;
	cursor:pointer;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;text-align:center;
	height:30px;line-height:30px;padding-left:10px;padding-right:10px;
	transition: 500ms ease all;
}
a.btn_yellow:hover {
	background:#e0a800;
	transition: 500ms ease all;
}

a.btn_red {
	background:#dc3545;
	color:#fff;
	cursor:pointer;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;text-align:center;
	height:30px;line-height:30px;padding-left:10px;padding-right:10px;
	transition: 500ms ease all;
}
a.btn_red:hover {
	background:#c82333;
	transition: 500ms ease all;
}

a.btn_black {
	background:#343a40;
	color:#fff;
	cursor:pointer;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;text-align:center;
	height:30px;line-height:30px;padding-left:10px;padding-right:10px;
	transition: 500ms ease all;
}
a.btn_black:hover {
	background:#23272b;
	transition: 500ms ease all;
}



a.btn_more {
	background:#343a40;
	color:#fff;
	cursor:pointer;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;text-align:center;
	width:100%;height:40px;line-height:40px;font-size:14px;font-weight:bold;
	transition: 500ms ease all;
}
a.btn_more:hover {
	background:#23272b;
	transition: 500ms ease all;
}

/*************************************/

input[type=button].btn {
	background:#fff;
	color:#333;
	cursor:pointer;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;text-align:center;
	height:30px;
	transition: 500ms ease all;
	border:1px solid #cbcbcb;
}
input[type=button].btn:hover {
	border:1px solid #bbbbbb;
	background:#f0f0f0;
	transition: 500ms ease all;
}

input[type=button].btn_gray {
	background:#868e96;
	color:#fff;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;cursor:pointer;
	height:30px;
	transition: 500ms ease all;
}
input[type=button].btn_gray:hover {
	background:#727b84;
	transition: 500ms ease all;
}

input[type=button].btn_blue {
	background:#007bff;
	color:#fff;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;cursor:pointer;
	height:30px;
	transition: 500ms ease all;
}
input[type=button].btn_blue:hover {
	background:#0069d9;
	transition: 500ms ease all;
}

input[type=button].btn_green {
	background:#28a745;
	color:#fff;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;cursor:pointer;
	height:30px;
	transition: 500ms ease all;
}
input[type=button].btn_green:hover {
	background:#218838;
	transition: 500ms ease all;
}

input[type=button].btn_cyan {
	background:#17a2b8;
	color:#fff;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;cursor:pointer;
	height:30px;
	transition: 500ms ease all;
}
input[type=button].btn_cyan:hover {
	background:#138496;
	transition: 500ms ease all;
}

input[type=button].btn_yellow {
	background:#ffc107;
	color:#fff;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;cursor:pointer;
	height:30px;
	transition: 500ms ease all;
}
input[type=button].btn_yellow:hover {
	background:#e0a800;
	transition: 500ms ease all;
}

input[type=button].btn_red {
	background:#dc3545;
	color:#fff;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;cursor:pointer;
	height:30px;
	transition: 500ms ease all;
}
input[type=button].btn_red:hover {
	background:#c82333;
	transition: 500ms ease all;
}

input[type=button].btn_black {
	background:#343a40;
	color:#fff;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;cursor:pointer;
	height:30px;
	transition: 500ms ease all;
}
input[type=button].btn_black:hover {
	background:#23272b;
	transition: 500ms ease all;
}

/*******************************/

input[type=submit].btn {
	background:#fff;
	color:#333;
	cursor:pointer;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;text-align:center;
	height:30px;
	transition: 500ms ease all;
	border:1px solid #cbcbcb;
}
input[type=submit].btn:hover {
	border:1px solid #bbbbbb;
	background:#f0f0f0;
	transition: 500ms ease all;
}


input[type=submit].btn_gray {
	background:#868e96;
	color:#fff;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;cursor:pointer;
	height:30px;
	transition: 500ms ease all;
}
input[type=submit].btn_gray:hover {
	background:#727b84;
	transition: 500ms ease all;
}

input[type=submit].btn_blue {
	background:#007bff;
	color:#fff;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;cursor:pointer;
	height:30px;
	transition: 500ms ease all;
}
input[type=submit].btn_blue:hover {
	background:#0069d9;
	transition: 500ms ease all;
}

input[type=submit].btn_green {
	background:#28a745;
	color:#fff;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;cursor:pointer;
	height:30px;
	transition: 500ms ease all;
}
input[type=submit].btn_green:hover {
	background:#218838;
	transition: 500ms ease all;
}

input[type=submit].btn_cyan {
	background:#17a2b8;
	color:#fff;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;cursor:pointer;
	height:30px;
	transition: 500ms ease all;
}
input[type=submit].btn_cyan:hover {
	background:#138496;
	transition: 500ms ease all;
}

input[type=submit].btn_yellow {
	background:#ffc107;
	color:#fff;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;cursor:pointer;
	height:30px;
	transition: 500ms ease all;
}
input[type=submit].btn_yellow:hover {
	background:#e0a800;
	transition: 500ms ease all;
}

input[type=submit].btn_red {
	background:#dc3545;
	color:#fff;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;cursor:pointer;
	height:30px;
	transition: 500ms ease all;
}
input[type=submit].btn_red:hover {
	background:#c82333;
	transition: 500ms ease all;
}

input[type=submit].btn_black {
	background:#343a40;
	color:#fff;
	display:inline-block;
	position: relative;
	vertical-align:middle;border:none;font-size: 100%;cursor:pointer;
	height:30px;
	transition: 500ms ease all;
}
input[type=submit].btn_black:hover {
	background:#23272b;
	transition: 500ms ease all;
}

/*******************************/




/******* line btn black **************/
a.linebtn_black {
	/*background: #f16b6f;*/
	background: #333;
	color: #fff;
	cursor:pointer;
	border: 0;
	position: relative;
	height: auto;
	font-size: 100%;
	padding: .4em 1em;
	transition: 500ms ease all;
	outline: 0;
	display: inline-block;
	text-decoration: none;
	margin: 0;
	border-radius: inherit;
}
a.linebtn_black:hover {
	background: #fff;
	/*color: #f16b6f;*/
	color: #333;
	border: none;
}
a.linebtn_black:before,
a.linebtn_black::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 2px;
	width: 0;
	/*background: #f16b6f;*/
	background: #333;
	transition: 400ms ease all;
	margin-right: 0;
}
a.linebtn_black::after {
	right: inherit;
	top: inherit;
	left: 0;
	bottom: 0
}
a.linebtn_black:hover:before,
a.linebtn_black:hover::after {
	width: 100%;
	transition: 500ms ease all
}


/******* line btn blue **************/
a.linebtn_blue {
	/*background: #f16b6f;*/
	background: #6ba1f1;
	color: #fff;
	cursor:pointer;
	border: 0;
	position: relative;
	height: auto;
	font-size: 100%;
	padding: .4em 1em;
	transition: 500ms ease all;
	outline: 0;
	display: inline-block;
	text-decoration: none;
	margin: 0;
	border-radius: inherit;
}
a.linebtn_blue:hover {
	background: #fff;
	/*color: #f16b6f;*/
	color: #6ba1f1;
	border: none;
}
a.linebtn_blue:before,
a.linebtn_blue::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 2px;
	width: 0;
	/*background: #f16b6f;*/
	background: #6ba1f1;
	transition: 400ms ease all;
	margin-right: 0;
}
a.linebtn_blue::after {
	right: inherit;
	top: inherit;
	left: 0;
	bottom: 0
}
a.linebtn_blue:hover:before,
a.linebtn_blue:hover::after {
	width: 100%;
	transition: 500ms ease all
}


/******* line btn red **************/
a.linebtn_red {
	/*background: #f16b6f;*/
	background: #d60000;
	color: #fff;
	cursor:pointer;
	border: 0;
	position: relative;
	height: auto;
	font-size: 100%;
	padding: .4em 1em;
	transition: 500ms ease all;
	outline: 0;
	display: inline-block;
	text-decoration: none;
	margin: 0;
	border-radius: inherit;
}
a.linebtn_red:hover {
	background: #fff;
	/*color: #f16b6f;*/
	color: #d60000;
	border: none;
}
a.linebtn_red:before,
a.linebtn_red::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 2px;
	width: 0;
	/*background: #f16b6f;*/
	background: #d60000;
	transition: 400ms ease all;
	margin-right: 0;
}
a.linebtn_red::after {
	right: inherit;
	top: inherit;
	left: 0;
	bottom: 0
}
a.linebtn_red:hover:before,
a.linebtn_red:hover::after {
	width: 100%;
	transition: 500ms ease all
}


/******* line btn yellow **************/
a.linebtn_red {
	background: #ffbd0d;
	width:240px;
	height:40px;
	line-height:40px;
	color: #231815;
	border: 0;
	position: relative;
	font-size: 22px;
	font-weight:bold;
	padding: .4em 1em;
	transition: 800ms ease all;
	outline: 0;
	display: inline-block;
	text-decoration: none;
	margin: 0;
	/*border-radius: inherit;*/
	/*border-radius: 10px;*/
}
a.linebtn_red:hover {
	background: #fff;
	/*color: #f16b6f;*/
	color: #231815;
	border: none;
}
a.linebtn_red:before,
a.linebtn_red::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 4px;
	width: 0;
	/*background: #f16b6f;*/
	background: #ffbd0d;
	transition: 400ms ease all;
	margin-right: 0;
}
a.linebtn_red::after {
	right: inherit;
	top: inherit;
	left: 0;
	bottom: 0
}
a.linebtn_red:hover:before,
a.linebtn_red:hover::after {
	width: 100%;
	transition: 800ms ease all
}