/****************************************************
				RESPONSIVE 1024 <-> 1279
****************************************************/

@media only screen and (min-width: 1024px) and (max-width: 1279px) {

html { font-size: 15px; }

/*********************	/fin	*********************/ }




/****************************************************
				RESPONSIVE 768 <-> 1023
****************************************************/

@media only screen and (min-width: 768px) and (max-width: 1023px) { 

html { font-size: 14px; }

/*********************	/fin	*********************/ }




/****************************************************
				RESPONSIVE -> 767
****************************************************/

@media only screen and (max-width: 767px) {

:root {
	--height-header: 		auto;
	--height-header-shrink: auto;
    --color-red-lighter:	#f33;
    --color-red-light:		#f00;
    --color-red:			#d22;
    --color-red-dark:		#a21;
}
html { font-size: 12px; }

main a { font-weight: bold;}

.grid { display: block; overflow: auto; }

/*	header */
header {
	grid-template-columns: 1fr 1fr; 
	grid-template-rows: 60px 200px; 
	gap: 0px 0px; 
	grid-template-areas: 
    "map_button lang_selector"
    "logo logo";
	margin-bottom: 2rem;
}

header #logo a { display: inline-block; text-align: center;}
#map_button {
	justify-self: start;
	padding-left: 1.5rem;
}
#lang_selector {
	justify-self: end;
	padding-right: 1.5rem;
}
#lang_selector ul {
	font-size: 1.25rem;
}

#map_button, #lang_selector { }

/*	main	*/
main { padding: 2rem 0; }

/*	footer	*/
footer section { text-align: center; margin-bottom: 4rem; }
footer div.container { max-width: 90%; }
.grid_logos { 
	display: inline-block;
	text-align: center;
}

/*********************	/fin	*********************/ }