/*******************************************/
/* S+C Flat Buttons                        */
/* Oliver 2016-07-03                       */
/*******************************************/

/*S+C Colors
sc-blue:  #0069b3;
sc-light-blue:  #a4bde3;
sc-grey: #4b4a4d;
sc-grey-light: #e3e3e3;
sc-white: #ffffff;
*/

/*=== Background S+C Blue ===*/

.cm-volcano .flat-btn {
	color: #ffffff;
	background-color: #00ca4c;
	border-color: #ffffff;
}
.cm-volcano .flat-btn:hover {
	color: #0069b3;
	background-color: #ffffff;
	border-color: #ffffff;
	opacity: 1;
}
.cm-volcano .flat-btn:active {
	color: #0069b3;
	background-color: #ffffff;
	border-color: #ffffff;
	opacity: 1;

}
.cm-volcano .flat-btn:focus {
	color: #fffff;
	opacity: .85;
}

/*=== Background S+C Blue / Negative ===*/

.cm-volcano .flat-btn.negative {
	color: #0069b3;
	background-color: #ffffff;
	border-color: #ffffff;
}
.cm-volcano .flat-btn.negative:hover {
	color: #ffffff;
	background-color: #00ca4c;
	border-color: #ffffff;
	opacity: 1;
}
.cm-volcano .flat-btn.negative:active {
	color: #ffffff;
	background-color: #00ca4c;
	border-color: #ffffff;
	opacity: 1;

}
.cm-volcano .flat-btn.negative:focus {
	border-color: #ffffff;
	opacity: 1;
}


.flat-btn {
	font-family: 'Roboto Condensed', sans-serif;
	text-transform: uppercase;
	font-weight: 400;
	border: 1px solid;
	text-align: center;

	margin-bottom: 15px;
	margin-right: 13px;
	
	-webkit-transition: all 0.2s ease-out 0s;
	-moz-transition: all 0.2s ease-out 0s;
	-ms-transition: all 0.2s ease-out 0s;
	-o-transition: all 0.2s ease-out 0s;
	transition: all 0.2s ease-out 0s;
}

.flat-btn:hover {
	/*outline: none;/*color:#7f8689;*/
	/*transition: all 60ms ease;*/
}
.flat-btn:focus {
	outline: none;/*color:#7f8689;*/
}
.flat-btn:active {
	/*outline: none;/*color:#7f8689;*/
	/*transition: all 60ms ease;*/
}

/*---------------------------------------------------*/
/* --- Button Größen  ------------------------------ */
/* --- XL, LG, M, S, XS  --------------------------- */
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/* --- Button Class XL ------------------------------ */
/*---------------------------------------------------*/

.flat-btn-xl {	
	font-size: 20px;
	min-width: 200px;
	padding: 10px 30px 10px 30px;

}

.flat-btn-xl:hover {}

.flat-btn-xl:active {
}
.flat-btn-xl:focus {
}

/*---------------------------------------------------*/
/* --- Button Class LG ------------------------------ */
/*---------------------------------------------------*/

.flat-btn-lg {
	font-size: 17px;
	min-width: 180px;
	padding: 8px 25px 8px 25px;
}

.flat-btn-lg:hover {}

.flat-btn-lg:active {
}
.flat-btn-lg:focus {
}

/*---------------------------------------------------*/
/* --- Button Class M ---------------------------- -- */
/*---------------------------------------------------*/
.flat-btn-m {
	font-size: 16px;
	min-width: 160px;
	padding: 5px 20px 5px 20px;
}

.flat-btn-m:hover {}

.flat-btn-m:active {
}
.flat-btn-m:focus {
}

/*---------------------------------------------------*/
/* --- Button Class S  ------------------------------ */
/*---------------------------------------------------*/
.flat-btn-s {
	font-size: 14px;
	min-width: 140px;
	padding: 2px 10px 2px 10px;
}

.flat-btn-s:hover {}

.flat-btn-s:active {
}
.flat-btn-s:focus {
}

/*---------------------------------------------------*/
/* --- Button Class XS ------------------------------ */
/*---------------------------------------------------*/

.flat-btn-xs {
	font-size: 10px;
	width: 120px;
	padding: 5px 60px 5px 10px;
}
.flat-btn-xs:hover {
}
.flat-btn-xs:active {
}
.flat-btn-xs:focus {
}

/*----------------------------------------------------*/
/* --- Rounded Buttons ------------------------------ */
/*----------------------------------------------------*/
.default {
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;/*border: 0px;*/
}

.rounded {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
.simple {
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

/*----------------------------------------------------*/
/* --- Simple Buttons ------------------------------- */
/*----------------------------------------------------*/

/*----------------------------------------------------*/
/* --- Circle Buttons ------------------------------- */
/*----------------------------------------------------*/

.circle_lg {
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	min-height: 0px;
	min-width: 0px;
	height: 50px;
	width: 50px;
}

.circle_m {
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	min-height: 0px;
	min-width: 0px;
	height: 40px;
	width: 40px;
}

.circle_s {
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	min-height: 0px;
	min-width: 0px;
	height: 25px;
	width: 25px;
}

/*----------------------------------------------------*/
/* --- Square Buttons ------------------------------- */
/*----------------------------------------------------*/
.square_lg {
	min-height: 0px;
	min-width: 0px;
	height: 50px;
	width: 50px;
}

.square_m {
	min-height: 0px;
	min-width: 0px;
	height: 40px;
	width: 40px;
}

.square_s {
	min-height: 0px;
	min-width: 0px;
	height: 25px;
	width: 25px;
}


/*----------------------------------------------------*/
/* --- Buttons Colours ------------------------------ */
/*----------------------------------------------------*/
 /*=== weiss ===*/

.color_1 {
	color: #7f8689;
	background-color: #ffffff;
}
.color_1:hover {
	color: #ffffff;
	background-color: #00ca4c;
}
.color_1:active {
	color: #ffffff;
	background-color: #00ca4c;/*box-shadow:  1px 1px 0px 0px #cf402d inset;*/

}
.color_1:focus {
/*color:#7f8689;*/	
}

/*=== Green ===*/

.color_2 {
	color: #fffff;
	background-color: #00ca4c;
}
.color_2:hover {
	color: #333333;
	background-color: #00ca4c;
}
.color_2:active {
	color: #333333;
	background-color: #ffffff;/*box-shadow:  1px 1px 0px 0px #3fa66f inset;*/

}
.color_2:focus {
	color: #fffff;
}
/*=== cm-volcano-4percent ===*/

.color_3 {
	color: #7f8689;
	background-color: #f7f7f7;
}
.color_3:hover {
	color: #ffffff;
	background-color: #00ca4c;
}
.color_3:active {
	color: #ffffff;
	background-color: #00ca4c;/*box-shadow:  1px 1px 0px 0px #cf402d inset;*/

}
.color_3:focus {
/*color:#7f8689;*/	

}