/*--------------------------------------------------*/
/*	OVERRIDE
/*--------------------------------------------------*/

.locale,
.locale .switch,
.locale .switch label,
.locale .switch input ~ label:before,
.locale .switch input ~ label:after {
	width: 100%;
	height: 50px;

	margin: 0;
	border: 0;
	border-radius: 0;
}

.locale .switch input ~ label:before,
.locale .switch input ~ label:after {
	z-index: 3;
	display: block;

	content: " ";
	position: absolute;

	top: 0;

	padding: 16px 32px;

	line-height: 18px;
	font-weight: bold;
	font-size: 110%;
/*
	color: var(--text);
*/

	-webkit-transition: all 0.2s;
       -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
         -o-transition: all 0.2s;
            transition: all 0.2s;
}

.locale .switch input ~ label:before {
	background: linear-gradient(-120deg, #00000000  50px, #00000060  51px, #00000060  69px, #292F36 70px) !important;
	content: "Francais";
	left: 100%;

	text-align: left;
}

.locale .switch input ~ label:after {
	background: linear-gradient( 120deg, #00000000  50px, #00000060  51px, #00000060  69px, #292F36 70px) !important;
	content: "English";
	left: 0;

	text-align: right;
}

.locale .switch input ~ label,
.locale .switch input:checked ~ label {
	background: #00000000;
}

.locale .switch input:checked ~ label:before,
.locale .switch input:checked ~ label:after {
	transform: translateX(-100%);
}

.locale .switch input ~ label:focus,
.locale .switch input ~ label:hover {
	border: 0;
}

/*--------------------------------------------------*/
/*	GENERAL
/*--------------------------------------------------*/

.locale .switch input ~ label,
.locale .switch input:checked ~ label {
	background-repeat: no-repeat;

	-webkit-background-position: 0% 0%, 100% 0%;
	   -moz-background-position: 0% 0%, 100% 0%;
	    -ms-background-position: 0% 0%, 100% 0%;
	     -o-background-position: 0% 0%, 100% 0%;
	        background-position: 0% 0%, 100% 0%;

	-webkit-background-size: contain;
	   -moz-background-size: contain;
	    -ms-background-size: contain;
	     -o-background-size: contain;
	        background-size: contain;
}

.locale .switch input ~ label,
.locale .switch input:checked ~ label {
	background-image:
		url("/locale/en_CA/flag"),
		url("/locale/fr_CA/flag")
	!important;
}

.locale .en,
.locale .fr {
	display: none;
}