/* BUTTONS */

/* met hoekje af (geel of zwart) */
.btn {
	font-size: 12px;
    color: #000000;
    padding: 0.5em 1.2em 0.5em 0.8em;
    position: relative;
    border: none;
    text-decoration: none;
    background: #FFD20A;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
}
.btn:hover {color: #4C4C4C;}
.btn.black {color: #fff;background: #000;}
.btn.black:hover {color: #eee;}
.btn.no_action {color: #000; cursor: default;}

.cssgradients .btn {
    background: -webkit-linear-gradient(225deg, transparent 7px, #FFD20A 7px);
    background: -moz-linear-gradient(225deg, transparent 7px, #FFD20A 7px);
    background: -o-linear-gradient(225deg, transparent 7px, #FFD20A 7px);
    background: linear-gradient(-135deg, transparent 7px, #FFD20A 7px);
}
.cssgradients .btn.black {
    background: -webkit-linear-gradient(225deg, transparent 7px, #000 7px);
    background: -moz-linear-gradient(225deg, transparent 7px, #000 7px);
    background: -o-linear-gradient(225deg, transparent 7px, #000 7px);
    background: linear-gradient(-135deg, transparent 7px, #000 7px);
}

/*red button*/
.redbutton {
	font-family: 'Open Sans Condensed', Arial,sans-serif;
	color:#FFF;
	text-transform: uppercase;
	text-decoration: none;
	font-size:16px;
	/*padding:15px 30px;*/
	/*padding:15px 30px 14px;*/
	margin:20px 0;
	padding:14px 30px 0;
	position:relative;
	border-right:1px solid #EBA7AA;
	height:32px;
	display:inline-block;
	font-weight:400;
}
.win .redbutton {
	/*padding:15px 30px 12px;*/
}

.redbutton:after {
	width:36px;
	height:46px;
	display:block;
	content:"";
	position: absolute;
	right:-38px;
	top:0;	
	border-left:1px solid #7B2A25;			
}	

.redbutton {background: url('../img/buttons/red/png/buttons_red_bg_left.png');}
.redbutton:hover {background: url('../img/buttons/red/png/buttons_red_bg_left_hover.png');}
.redbutton:hover:after {background: transparent url('../img/buttons/red/png/buttons_red_bg_right_hover.png') no-repeat top left;}
.redbutton:after {background: transparent url('../img/buttons/red/png/buttons_red_bg_right.png') no-repeat top left;}

/*shadow*/
.shadow {
	-webkit-filter: drop-shadow(1px 3px 5px rgba(0,0,0,0.5));
	filter: url(../img/shadow.svg#drop-shadow);
}
.shadow_large {
	filter: drop-shadow(4px 6px 5px rgba(0,0,0,0.6));
}

.redbutton:active.shadow,.blackbutton:active.shadow {
	-webkit-filter: drop-shadow(1px 3px 5px rgba(0,0,0,0.0));
	filter: url(../img/no-shadow.svg#drop-shadow);
}


/*black button*/		
.blackbutton {
	font-family: Arial,sans-serif;
	color:#FFF;
	text-transform: uppercase;
	text-decoration: none;
	font-size:14px;
	/*padding:13px 30px 13px 30px;*/
	padding:12px 30px 0;
	margin:20px 0;
	display:inline-block;
	height:30px;
	position:relative;
	font-weight:bold;
	background: url('../img/buttons/black/png/buttons_black_bg_middle.png') no-repeat top left;
}

.blackbutton:before {
	width:36px;
	height:44px;
	display:block;
	content:"";
	position: absolute;
	left:0;
	top:0;
	background: url('../img/buttons/black/png/buttons_black_bg_left.png') no-repeat top left;	
}

.blackbutton:after {
	width:36px;
	height:44px;
	display:block;
	content:"";
	position: absolute;
	right:-34px;
	top:0;
	background: url('../img/buttons/black/png/buttons_black_bg_right.png') no-repeat top left;				
}		

/*Hover states*/
.blackbutton:hover.blackbutton:before {background: url('../img/buttons/black/png/buttons_black_bg_left_hover.png') no-repeat top left;}
.blackbutton:hover.blackbutton:after {background: url('../img/buttons/black/png/buttons_black_bg_right_hover.png') no-repeat top left;}
.blackbutton:hover {background: url('../img/buttons/black/png/buttons_black_bg_middle_hover.png') no-repeat top left;}		



/* BUTTONS new style */
.btn-white,
.btn-black,
.btn-yellow {
	display: inline-block;
	background-color: #fff;
	color: #111;
	text-transform: uppercase;
	padding: 1rem 2rem;
	font-weight: bold;
	text-decoration: none;
	font-size: 1rem;
	cursor: pointer;
	outline: none;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}
.btn-white:hover {
	background-color: #eee;
}

.btn-black {color: #fff; background-color: #111;}
.btn-black:hover {color: #111; background-color: #fff;}

.btn-yellow {color: #111; background-color: #FFD20A;}
.btn-yellow:hover {color: #FFD20A; background-color: #111;}