@charset "UTF-8";

/* --------------------------------------------
CONTACT
--------------------------------------------- */
form#mailformpro{
	padding : 0;
}
form#mailformpro label{
	margin : 0;
}
form#mailformpro :is( input[type="text"] , input[type="email"] , select , textarea ){
	padding-inline : 1em;
	margin : 0;
	border : 0;
	box-shadow : none;
}
form#mailformpro :is( input[type="text"] , input[type="email"] , select ){
	padding-block : 0;
}
form#mailformpro textarea{
	padding-block : 1em;
}
form#mailformpro .radios label{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : start;
	padding : 0;
	margin : 0;
	background-color : transparent;
	border : 0;
	border-radius : 0;
	box-shadow : none;
}
form#mailformpro .radios input[type="radio"]{
	margin : 0;
}
form#mailformpro .checkboxies label{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : start;
	padding : 0;
	margin : 0;
	background-color : transparent;
	border : 0;
	border-radius : 0;
	box-shadow : none;
}
form#mailformpro .checkboxies input[type="radio"]{
	margin : 0;
}
form#mailformpro button[type="submit"]{
	padding : 0;
	text-shadow : none;
	background : var( --blue );
}
#contact h1{
	width : fit-content;
	margin-inline : auto;
	font-weight : 700;
	color : var( --blue );
	text-align : center;
}
#contact h1::after{
	display : block;
	width : 100%;
	height : calc( 2 * var( --remBase ) );
	font-size : 0;
	content : "";
	background-color : currentColor;
}
#contact .lede{
	font-weight : 500;
}
#contact .formGroup{
	border-bottom : solid 1px #ccc;
}
#contact .formGroup > label{
	font-weight : 500;
}
#contact .formGroup > label span{
	display : block;
}
#contact :is( input[type="text"] , input[type="email"] , select , textarea ){
	width : 100%;
	padding-inline : 1em;
	font-weight : 500;
	color : var( --base );
	outline : solid 1px #ccc;
	outline-offset : -1px;
}
#contact :is( input[type="text"] , input[type="email"] , select , textarea )::placeholder{
	font-weight : 400;
	color : #ccc;
}
#contact .radios{
	display : flex;
	flex-wrap : wrap;
}
#contact .radios input[type="radio"]{
	accent-color : var( --blue );
}
#contact .radios span{
	margin-left : .25em;
}
#contact .birthdays{
	display : grid;
	grid-template-columns : 1fr auto 1fr auto 1fr auto;
	grid-auto-flow : column;
	align-items : baseline;
}
#contact .checkboxies{
	display : flex;
	flex-wrap : wrap;
}
#contact .checkboxies input[type="checkbox"]{
	accent-color : var( --blue );
}
#contact .checkboxies span{
	margin-left : .25em;
}
#contact button[type="submit"]{
	position : relative;
	display : grid;
	place-items : center;
	color : white;
	border : 0;
	border-radius : 100vmax;
	outline : solid 1px var( --blue );
	outline-offset : -1px;
}
#contact button[type="submit"]::before{
	position : absolute;
	top : 50%;
	content : "▶";
	translate : 0 -50%;
}
@media screen and ( width <= 750px ){
	#contact{
		padding-top : calc( 120 * var( --remBase ) );
		padding-bottom : calc( 200 * var( --remBase ) );
	}
	#contact h1{
		font-size : calc( 36 * var( --remBase ) );
		line-height : 1.2;
	}
	#contact h1::after{
		margin-top : calc( 8 * var( --remBase ) );
	}
	#contact .lede{
		margin-top : calc( 48 * var( --remBase ) );
		font-size : calc( 24 * var( --remBase ) );
		line-height : 1.75;
	}
	#contact form{
		margin-top : calc( 48 * var( --remBase ) );
	}
	#contact .formGroup{
		padding-block : calc( 32 * var( --remBase ) );
		padding-inline : calc( 20 * var( --percentBase ) );
	}
	#contact .formGroup > label{
		font-size : calc( 24 * var( --remBase ) );
		line-height : 1.4;
	}
	#contact .formGroup > label span{
		font-size : calc( 20 * var( --remBase ) );
	}
	#contact .formGroup > div{
		margin-top : calc( 12 * var( --remBase ) );
	}
	#contact :is( input[type="text"] , input[type="email"] , select , textarea ){
		font-size : calc( 24 * var( --remBase ) );
		line-height : 1.5;
		border-radius : calc( 8 * var( --remBase ) );
	}
	#contact :is( input[type="text"] , input[type="email"] , select ){
		height : calc( 64 * var( --remBase ) );
	}
	#contact .names input[type="text"] + input[type="text"]{
		margin-top : calc( 12 * var( --remBase ) );
	}
	#contact .radios{
		column-gap : calc( 20 * var( --percentBase ) );
	}
	#contact .radios label span{
		font-size : calc( 24 * var( --remBase ) );
		line-height : 1.5;
	}
	#contact .birthdays{
		column-gap : calc( 20 * var( --percentBase ) );
	}
	#contact .birthdays span{
		font-size : calc( 20 * var( --remBase ) );
	}
	#contact textarea{
		height : calc( 320 * var( --remBase ) );
	}
	#contact .checkboxies{
		column-gap : calc( 20 * var( --percentBase ) );
	}
	#contact .checkboxies label span{
		font-size : calc( 24 * var( --remBase ) );
		line-height : 1.5;
	}
	#contact .buttons{
		margin-top : calc( 80 * var( --remBase ) );
	}
	#contact button[type="submit"]{
		width : calc( 480 * var( --percentBase ) );
		height : calc( 84 * var( --remBase ) );
		margin-inline : auto;
		font-size : calc( 24 * var( --remBase ) );
	}
	#contact button[type="submit"]::before{
		right : calc( 48 * 100% / 480 );
		font-size : calc( 16 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#contact{
		padding-top : calc( 120 * var( --remBase ) );
		padding-bottom : calc( 200 * var( --remBase ) );
	}
	#contact h1{
		font-size : calc( 28 * var( --remBase ) );
		line-height : 1.2;
	}
	#contact h1::after{
		margin-top : calc( 4 * var( --remBase ) );
	}
	#contact .lede{
		display : grid;
		align-items : start;
		justify-content : center;
		margin-top : calc( 48 * var( --remBase ) );
		font-size : calc( 18 * var( --remBase ) );
		line-height : 1.4;
	}
	#contact form{
		width : calc( 720 * var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 48 * var( --remBase ) );
	}
	#contact .formGroup{
		display : grid;
		grid-template-columns : calc( 220 * 100% / 720 ) 1fr;
		column-gap : calc( 20 * 100% / 720 );
		align-items : center;
		padding-block : calc( 24 * var( --remBase ) );
	}
	#contact .formGroup > label{
		font-size : calc( 16 * var( --remBase ) );
		line-height : 1.4;
	}
	#contact .formGroup > label span{
		font-size : calc( 12 * var( --remBase ) );
	}
	#contact .names{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 230 * 100% / 480 ) );
		column-gap : calc( 20 * 100% / 480 );
		align-items : center;
		justify-content : start;
	}
	#contact :is( input[type="text"] , input[type="email"] , select , textarea ){
		font-size : calc( 16 * var( --remBase ) );
		line-height : 1.5;
		border-radius : calc( 4 * var( --remBase ) );
	}
	#contact :is( input[type="text"] , input[type="email"] , select ){
		height : calc( 40 * var( --remBase ) );
	}
	#contact .radios{
		column-gap : calc( 20 * 100% / 480 );
	}
	#contact .radios label span{
		font-size : calc( 16 * var( --remBase ) );
		line-height : 1.5;
	}
	#contact .birthdays{
		column-gap : calc( 20 * 100% / 480 );
	}
	#contact .birthdays span{
		font-size : calc( 16 * var( --remBase ) );
	}
	#contact textarea{
		height : calc( 320 * var( --remBase ) );
	}
	#contact .checkboxies{
		column-gap : calc( 20 * 100% / 480 );
	}
	#contact .checkboxies label span{
		font-size : calc( 16 * var( --remBase ) );
		line-height : 1.5;
	}
	#contact .buttons{
		margin-top : calc( 80 * var( --remBase ) );
	}
	#contact button[type="submit"]{
		width : calc( 320 * 100% / 720 );
		height : calc( 72 * var( --remBase ) );
		margin-inline : auto;
		font-size : calc( 18 * var( --remBase ) );
	}
	#contact button[type="submit"]::before{
		right : calc( 48 * 100% / 320 );
		font-size : calc( 12 * var( --remBase ) );
	}
}
#contact .privacyBox{
	overflow-y : auto;
	border : solid 1px #ccc;
	border-top : 0;
}
#contact .privacyBox h3{
	font-weight : 500;
	text-align : center;
}
#contact .privacyBox dt , #contact .privacyBox dd{
	float : none;
	width : 100%;
	padding : 0;
	margin : 0;
	clear : none;
	text-align : left;
	border : 0;
}
#contact .privacyBox dl dl > div{
	display : grid;
	grid-auto-flow : column;
	column-gap : .5em;
	align-items : start;
	justify-content : start;
}
@media screen and ( width <= 750px ){
	#contact .privacyBox{
		height : calc( 320 * var( --remBase ) );
		padding-block : calc( 40 * var( --remBase ) );
		padding-inline : calc( 20 * var( --percentBase ) );
	}
	#contact .privacyBox h3{
		font-size : calc( 20 * var( --remBase ) );
	}
	#contact .privacyBox > dl{
		margin-top : calc( 32 * var( --remBase ) );
	}
	#contact .privacyBox > dl > div + div{
		margin-top : calc( 12 * var( --remBase ) );
	}
	#contact .privacyBox > dl > div > dd{
		padding-left : .75em;
	}
	#contact .privacyBox dt , #contact .privacyBox dd{
		font-size : calc( 18 * var( --remBase ) );
		line-height : 1.5;
	}
}
@media print , screen and ( width > 750px ){
	#contact .privacyBox{
		height : calc( 280 * var( --remBase ) );
		padding-block : calc( 32 * var( --remBase ) );
		padding-inline : calc( 24 * var( --percentBase ) );
	}
	#contact .privacyBox h3{
		font-size : calc( 16 * var( --remBase ) );
	}
	#contact .privacyBox > dl{
		margin-top : calc( 28 * var( --remBase ) );
	}
	#contact .privacyBox > dl > div + div{
		margin-top : calc( 8 * var( --remBase ) );
	}
	#contact .privacyBox > dl > div > dd{
		padding-left : .75em;
	}
	#contact .privacyBox dt , #contact .privacyBox dd{
		font-size : calc( 14 * var( --remBase ) );
		line-height : 1.5;
	}
}
#contact #mfp_phase_confirm h4{
	padding : 0;
	font-weight : 500;
	text-align : center;
}
#contact #mfp_phase_confirm #mfp_confirm_table{
	display : block;
	width : 100%;
}
#contact #mfp_phase_confirm #mfp_confirm_table tbody{
	display : block;
	width : 100%;
}
#contact #mfp_phase_confirm #mfp_confirm_table tbody tr{
	background-color : transparent;
	background-repeat : 0;
	border-top : 0;
	border-bottom : solid 1px #ccc;
	border-left : 0;
}
#contact #mfp_phase_confirm #mfp_confirm_table tbody th , #contact #mfp_phase_confirm #mfp_confirm_table tbody td{
	padding : 0;
	background-color : transparent;
	border : 0;
}
#contact #mfp_phase_confirm #mfp_confirm_table tbody th{
	font-weight : 500;
}
#contact #mfp_phase_confirm #mfp_confirm_table tbody td{
	font-weight : 400;
}
#contact #mfp_phase_confirm .mfp_buttons{
	padding : 0;
}
#contact #mfp_phase_confirm #mfp_button_send{
	position : relative;
	display : grid;
	place-items : center;
	padding : 0;
	color : white;
	text-shadow : none;
	background : var( --blue );
	border : 0;
	border-radius : 100vmax;
	outline : solid 1px var( --blue );
	outline-offset : -1px;
}
#contact #mfp_phase_confirm #mfp_button_send::before{
	position : absolute;
	top : 50%;
	content : "▶";
	translate : 0 -50%;
}
#contact #mfp_phase_confirm #mfp_button_cancel{
	position : relative;
	display : grid;
	place-items : center;
	padding : 0;
	color : var( --base );
	text-shadow : none;
	background : white;
	border : 0;
	border-radius : 100vmax;
	outline : solid 1px #ccc;
	outline-offset : -1px;
}
#contact #mfp_phase_confirm #mfp_button_cancel::before{
	position : absolute;
	top : 50%;
	content : "◀";
	translate : 0 -50%;
}
@media screen and ( width <= 750px ){
	#contact #mfp_phase_confirm h4{
		margin-top : calc( 48 * var( --remBase ) );
		font-size : calc( 24 * var( --remBase ) );
		line-height : 1.75;
	}
	#contact #mfp_phase_confirm #mfp_confirm_table{
		margin-top : calc( 48 * var( --remBase ) );
	}
	#contact #mfp_phase_confirm #mfp_confirm_table tr{
		display : block;
		width : 100%;
		padding-block : calc( 32 * var( --remBase ) );
		padding-inline : calc( 20 * var( --percentBase ) );
	}
	#contact #mfp_phase_confirm #mfp_confirm_table tr > tr{
		margin-top : calc( 12 * var( --remBase ) );
	}
	#contact #mfp_phase_confirm #mfp_confirm_table tr th , #contact #mfp_phase_confirm #mfp_confirm_table tr td{
		font-size : calc( 24 * var( --remBase ) );
		line-height : 1.4;
	}
	#contact #mfp_phase_confirm #mfp_confirm_table tr th span , #contact #mfp_phase_confirm #mfp_confirm_table tr td span{
		font-size : calc( 20 * var( --remBase ) );
	}
	#contact #mfp_phase_confirm #mfp_confirm_table tr td{
		padding-inline : 1em;
		margin-top : calc( 12 * var( --remBase ) );
	}
	#contact #mfp_phase_confirm .mfp_buttons{
		display : grid;
		grid-template-columns : 1fr;
		grid-auto-flow : row;
		row-gap : calc( 20 * var( --remBase ) );
		justify-content : center;
		margin-top : calc( 80 * var( --remBase ) );
	}
	#contact #mfp_phase_confirm #mfp_button_cancel{
		grid-row : 1;
		grid-column : 1;
		width : calc( 480 * var( --percentBase ) );
		height : calc( 84 * var( --remBase ) );
		margin-inline : auto;
		font-size : calc( 24 * var( --remBase ) );
	}
	#contact #mfp_phase_confirm #mfp_button_cancel::before{
		left : calc( 48 * 100% / 480 );
		font-size : calc( 16 * var( --remBase ) );
	}
	#contact #mfp_phase_confirm #mfp_button_send{
		grid-row : 3;
		grid-column : 1;
		width : calc( 480 * var( --percentBase ) );
		height : calc( 84 * var( --remBase ) );
		margin-inline : auto;
		font-size : calc( 24 * var( --remBase ) );
	}
	#contact #mfp_phase_confirm #mfp_button_send::before{
		right : calc( 48 * 100% / 480 );
		font-size : calc( 16 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#contact #mfp_phase_confirm h4{
		margin-top : calc( 48 * var( --remBase ) );
		font-size : calc( 18 * var( --remBase ) );
		line-height : 1.4;
	}
	#contact #mfp_phase_confirm #mfp_confirm_table{
		width : calc( 720 * var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 48 * var( --remBase ) );
	}
	#contact #mfp_phase_confirm #mfp_confirm_table tr{
		display : grid;
		grid-template-columns : calc( 240 * 100% / 720 ) 1fr;
		align-items : center;
		padding-block : calc( 12 * var( --remBase ) );
	}
	#contact #mfp_phase_confirm #mfp_confirm_table tr + .tr{
		margin-top : calc( 12 * var( --remBase ) );
	}
	#contact #mfp_phase_confirm #mfp_confirm_table tr th , #contact #mfp_phase_confirm #mfp_confirm_table tr td{
		font-size : calc( 16 * var( --remBase ) );
		line-height : 1.4;
	}
	#contact #mfp_phase_confirm #mfp_confirm_table tr th span , #contact #mfp_phase_confirm #mfp_confirm_table tr td span{
		font-size : calc( 12 * var( --remBase ) );
	}
	#contact #mfp_phase_confirm .mfp_buttons{
		display : grid;
		grid-template-columns : calc( 320 * var( --percentBase ) ) auto calc( 320 * var( --percentBase ) );
		column-gap : calc( 12 * var( --percentBase ) );
		align-items : center;
		justify-content : center;
		margin-top : calc( 80 * var( --remBase ) );
	}
	#contact #mfp_phase_confirm #mfp_button_cancel{
		grid-row : 1;
		grid-column : 1;
		height : calc( 72 * var( --remBase ) );
		font-size : calc( 18 * var( --remBase ) );
	}
	#contact #mfp_phase_confirm #mfp_button_cancel::before{
		left : calc( 48 * 100% / 320 );
		font-size : calc( 12 * var( --remBase ) );
	}
	#contact #mfp_phase_confirm #mfp_button_send{
		grid-row : 1;
		grid-column : 3;
		height : calc( 72 * var( --remBase ) );
		font-size : calc( 18 * var( --remBase ) );
	}
	#contact #mfp_phase_confirm #mfp_button_send::before{
		right : calc( 48 * 100% / 320 );
		font-size : calc( 12 * var( --remBase ) );
	}
}
#contact .mfp_err{
	padding : 0;
	padding-left : 1.5em;
	margin : 0;
	background-position : left center;
}
@media screen and ( width <= 750px ){
	#contact .mfp_err{
		padding-block : calc( 6 * var( --remBase ) );
		font-size : calc( 16 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#contact .mfp_err{
		padding-block : calc( 4 * var( --remBase ) );
		font-size : calc( 12 * var( --remBase ) );
	}
}

/* --------------------------------------------
THANKS
--------------------------------------------- */
#thanks h1{
	width : fit-content;
	margin-inline : auto;
	font-weight : 700;
	color : var( --blue );
	text-align : center;
}
#thanks h1::after{
	display : block;
	width : 100%;
	height : calc( 2 * var( --remBase ) );
	font-size : 0;
	content : "";
	background-color : currentColor;
}
#thanks p{
	font-weight : 500;
	text-align : center;
}
#thanks p + p{
	margin-top : 1lh;
}
#thanks p a{
	display : block;
	width : fit-content;
	margin-inline : auto;
	margin-top : 1em;
	margin-bottom : .25em;
	font-weight : 700;
	line-height : 1;
	text-align : center;
	text-indent : .01em;
	letter-spacing : .01em;
	text-box : trim-both cap alphabetic;
}
@media screen and ( width <= 750px ){
	#thanks{
		padding-top : calc( 120 * var( --remBase ) );
		padding-bottom : calc( 200 * var( --remBase ) );
	}
	#thanks h1{
		font-size : calc( 36 * var( --remBase ) );
		line-height : 1.2;
	}
	#thanks h1::after{
		margin-top : calc( 8 * var( --remBase ) );
	}
	#thanks p{
		font-size : calc( 24 * var( --remBase ) );
		line-height : 1.75;
	}
	#thanks p a{
		font-size : calc( 68 * var( --remBase ) );
	}
	#thanks h1 + p{
		margin-top : calc( 48 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#thanks{
		padding-top : calc( 120 * var( --remBase ) );
		padding-bottom : calc( 200 * var( --remBase ) );
	}
	#thanks h1{
		font-size : calc( 28 * var( --remBase ) );
		line-height : 1.2;
	}
	#thanks h1::after{
		margin-top : calc( 4 * var( --remBase ) );
	}
	#thanks p{
		display : grid;
		align-items : start;
		justify-content : center;
		font-size : calc( 18 * var( --remBase ) );
		line-height : 1.7;
	}
	#thanks p a{
		font-size : calc( 52 * var( --remBase ) );
	}
	#thanks h1 + p{
		margin-top : calc( 48 * var( --remBase ) );
	}
}