/* ==========================================================================
   Button classes
   ========================================================================== */

.button {
	display: inline-block;
	background-image: url(../images/main/imagemap.png);
	background-repeat: no-repeat;
	position: relative;
	color: #fff !important;
	text-decoration: none;
	text-align: center;
	text-shadow: 1px 0 3px rgba(0,0,0,.2);
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

button.big.green{
    background-color: #7BAF30;
    border: 1px solid #4C7D17;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    -moz-box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px -1px 1px rgba(166,223,68,1);
    -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px -1px 1px rgba(166,223,68,1);
    box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px -1px 1px rgba(166,223,68,1);
    background-image: -o-linear-gradient(180deg , rgb(156,200,83) 0%, rgb(126,168,55) 100%);
    background-image: -moz-linear-gradient(180deg , rgb(156,200,83) 0%, rgb(126,168,55) 100%);
    background-image: -webkit-linear-gradient(180deg , rgb(156,200,83) 0%, rgb(126,168,55) 100%);
    background-image: -ms-linear-gradient(180deg , rgb(156,200,83) 0%, rgb(126,168,55) 100%);
    background-image: linear-gradient(180deg , rgb(156,200,83) 0%, rgb(126,168,55) 100%);
    color: #fff;
    padding: 10px 18px;
    font-weight: 300;
    text-shadow: 1px 0 3px rgba(0,0,0,.2);
}

.button:after {
	overflow: hidden;
}

.button:hover {
	text-decoration: none;
}

.button.small.blue {
	height: 18px;
	background-position: 0 -661px;
	padding: 4px 0 0 16px;
	line-height: 14px;
	margin-right: 16px;
}

.button.small.blue:active {
	background-position: 0 -687px;
	line-height: 16px !important;
}

.button.small.blue:after {
	width: 15px;
	height: 22px;
	content: " ";
	background: url(../images/main/imagemap.png) no-repeat -385px -661px;
	display: block;
	position: absolute;
	right: -15px;
	bottom: 0px;
}

.button.small.blue:active:after {
	background: url(../images/main/imagemap.png) no-repeat -385px -687px;
}

.button.display.green {
	height: 50px;
	background-position: 0 -713px;
	padding-left: 45px;
	line-height: 48px;
	margin-right: 45px;
}

.button.display.green:hover {
	background-position: 0 -767px;
}

.button.display.green:after {
	width: 46px;
	height: 50px;
	content: " ";
	background: url(../images/main/imagemap.png) no-repeat -355px -713px;
	display: block;
	position: absolute;
	right: -45px;
	bottom: 0px;
	line-height: 50px;
}

.button.display.green:hover:after {
	background: url(../images/main/imagemap.png) no-repeat -355px -767px;
}

.button.display.green:active {
	background-position: 0 -821px;
}

.button.display.green:active:after {
	background: url(../images/main/imagemap.png) no-repeat -355px -821px;
}

.button.display.green.condense {
	padding-left: 30px;
}
.button.display.green.condense:after {
	right: -30px;
	width: 30px;
	background: url(../images/main/imagemap.png) no-repeat -370px -713px;
}
.button.display.green.condense:hover:after {
	background: url(../images/main/imagemap.png) no-repeat -370px -767px;
}
.button.display.green.condense:active:after {
	background: url(../images/main/imagemap.png) no-repeat -370px -821px;
}


.button.small.green {
	height: 25px;
	background-position: 0 -874px;
	padding-left: 25px;
	line-height: 28px;
	font-size: 14px;
	text-shadow: 1px 0 2px rgba(0,0,0,.2);
}

.button.small.green:after {
	width: 25px;
	height: 25px;
	content: " ";
	background: url(../images/main/imagemap.png) no-repeat -375px -874px;
	display: block;
	position: absolute;
	right: -25px;
	bottom: 0px;
}

.button.small.green:hover {
	background-position: 0 -904px;
}

.button.small.green:hover:after {
	background: url(../images/main/imagemap.png) no-repeat -375px -904px;
}

.button.small.green:active {
	background-position: 0 -934px;
}

.button.small.green:active:after {
	background: url(../images/main/imagemap.png) no-repeat -375px -934px;
}

.button.big.green {
	height: 41px;
	background-position: 0 -964px;
	padding-left: 25px;
	line-height: 40px;
	font-size: 18px;
}

#footer .button.big.green {
	font-size: 24px;
}

/* Needs to be smaller in french to fit words */
.i18n-fr #footer .button.big.green {
	font-size: 18px;
}

.button.big.green:after {
	width: 20px;
	height: 41px;
	content: " ";
	background: url(../images/main/imagemap.png) no-repeat -380px -964px;
	display: block;
	position: absolute;
	right: -20px;
	bottom: 0px;
}

.button.big.blue {
	height: 41px;
	background-position: 0 -1009px;
	padding-left: 25px;
	line-height: 40px;
	font-size: 19px;
	margin-right: 20px;
}

#footer .button.big.blue {
	font-size: 24px;
}

/* Needs to be smaller in french to fit words */
.i18n-fr #footer .button.big.blue {
	font-size: 18px;
}

.button.big.blue:after {
	width: 20px;
	height: 41px;
	content: " ";
	background: url(../images/main/imagemap.png) no-repeat -380px -1009px;
	display: block;
	position: absolute;
	right: -20px;
	bottom: 0px;
}

.button.submit.green {
	height: 39px;
	background-position: 0 -1054px;
	padding-left: 20px;
	margin-right: 20px;
	line-height: 38px;
	font-size: 19px;
	min-width: 95px;
	text-align: center;
}

.button.submit.green:after {
	width: 20px;
	height: 39px;
	content: " ";
	background: url(../images/main/imagemap.png) no-repeat -380px -1054px;
	display: block;
	position: absolute;
	right: -20px;
	bottom: 0px;
}

.button.submit.green:active {
	background-position: 0 -1097px;
}

.button.submit.green:active:after {
	background: url(../images/main/imagemap.png) no-repeat -380px -1097px;
}

/* ==========================================================================
   .btn

   CSS button
   ========================================================================== */

.btn,
a.btn {
	display: inline-block;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 4px 25px 1px;
	border-radius: 60px;
	color: #ffffff;
	font-size: 14px;
	text-shadow: 1px 0 2px rgba(0,0,0,.2);
	cursor: pointer;
}

.btn:hover,
a.btn:hover { text-decoration: none; }

.btn_brand {
	box-shadow: inset 0px -1px 4px rgba(255,255,255,.2);
	border: 1px solid #617576;
	background: #234f53;
	background: -webkit-gradient(linear,top left,bottom left,from(#3e666a),color-stop(50%,#345b5e),to(#234f53));
	background: -webkit-linear-gradient(top,#3e666a,#345b5e,#234f53);
	background: linear-gradient(to bottom,#3e666a,#345b5e,#234f53);
}

.btn_brand:hover {
	box-shadow: inset 0px 2px 9px rgba(255,255,255,.2);
	background: #345b5e;
	background: -webkit-gradient(linear,top left,bottom left,from(#234f53),color-stop(50%,#345b5e),to(#3e666a));
	background: -webkit-linear-gradient(top,#234f53,#345b5e,#3e666a);
	background: linear-gradient(to bottom,#234f53,#345b5e,#3e666a);
}

.btn_brand:active {
	box-shadow: inset 0px -2px 9px rgba(255,255,255,.2);
	background: #18383b;
	background: -webkit-gradient(linear,top left,bottom left,from(#18383b),color-stop(50%,#345b5e),to(#3e666a));
	background: -webkit-linear-gradient(top,#18383b,#345b5e,#3e666a);
	background: linear-gradient(to bottom,#18383b,#345b5e,#3e666a);
}