.red {
	color: Red;
}
#main_left  {
	padding-right: 20px;
}
.news {
	/*border-left: solid 5px #999;*/
	padding-left: 10px;
}
/** colors ********* ********** **/
/*
:root {
	--bg: #938;
	--fg: #938;
	--txt: #433;
}
*/
:root {
	--bg: #090;
	--fg: #090;
	--txt: #433;
	--fg2: #666;
	--fga: #090;
}
#colorpicker button {
	width: 20px;
	height: 20px;
	border: none;
	margin: 5px;
	border: solid 1px white;
}
body {
	background-color: white;
	color: var(--txt);;
}
.hl {
	color: #3ab;
}
h1,h2 {
	text-transform: uppercase;
}
.deco { border-color: var(--fg); }
a, .a {
	color: var(--fga);
	border-color: var(--fga);
	cursor: pointer;
}
.main,
h1,h2,h3,h4
 {
	color: var(--fg);
	border-color: var(--fg);
	cursor: pointer;
}
a.sel {
	color: #817;
}
.news h2,
#menu,
#footer {
	background-color: var(--bg);
	color:white;
}
#menu a ,
#footer a {
	color: white;
}

h1 {
	border-bottom: solid 2px;
}

@media (max-width: 641px) {
	#menu_opener {
		background-color: var(--bg);
		color: white;
	}
	#menu  {
		background-color: #fff;
	}
	#zone_menu {
		background-color: #fff;
	}
}
/** fonts ********* ********** **/
body {
	/*font-family: Verdana, Arial, Sans-serif;*/
	margin: 0px;
	padding: 0px;
}
h1,h2,h3 {
	/*font-family: roboto;*/
}

/** sizes ********* ********** **/
.h1, .h2, .h3, .h4,
h1,h2, h3, h4 {
	font-weight: 300;
	margin-top: 0.66em;
	margin-bottom: 0.33em;
}
.news h2 { font-size: 1.1rem; }
h1, .h1 { font-size: 1.7rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.3rem; }
h4, .h4 { font-size: 1.2rem; }
body {
	font-size: 16px;
}

#logo {
	height: 150px;
}
#banner_logo_text {
	padding-top: 10px;
	display: flex;
}
#banner_text {
	padding-left: 20px;
}
#banner_text h2 {
	color: white;
	font-size: 50px;
	/*font-family: Roboto;*/
	text-shadow: 0px 0px 3px #000;
}


/** misc ********* ********** **/


img.deco {
	margin: 10px;
	border: solid 1px;
	box-shadow: 3px 3px 3px #aaa;
}
.main,
h1,h2,h3,
a {
	text-decoration: none;
}

#zone_main {
	display: flex;
	flex-wrap: wrap;
}

.flex { display: flex; flex-wrap: wrap; }
.medium ,
.huge ,
.big {
	text-shadow: 0px 0px 3px #333;
}
.huge { font-size: 50px; }
.big { font-size: 30px; }
.medium { font-size: 20px; }
.fondgris {
	background-color: #ddd;
}
.keepnewlines {
	 white-space: pre-line;
}
.clickable {
	cursor: pointer;
}
.dimhover:hover {
	filter: brightness(0.7);
}
a.btn {
	text-decoration: none;
}
.error {
	color: red;
	font-weight: bold;
}
.bordered {
	border: solid 1px #999;;
}
.uppercase {
	text-transform: uppercase;
}
.floater { float: left; }
.right { text-align: right; }
.center { text-align: center; }
.floater.right { float: right; }
.left { text-align: left; }
.padded-tb { padding: 10px 0px; }
.padded { padding: 10px; }
.superpadded { padding: 20px; }
.shadowed {
	box-shadow: 3px 3px 3px #000;
}
.marged {
	margin-right: 40px;
}
.rounded {
	border-radius: 20px;
	border: none;
}
.btn img {
	vertical-align: middle;
}
.btn:hover {
	box-shadow: 0px 0px 4px #000;
}
.btn {
	text-decoration: none;
	box-sizing: border-box;
	background-color: var(--bg);
	color: white;
	display: block;
	padding: 10px;
	width: 100%;
	text-align: center;
	margin: 0px;
	cursor: pointer;
	border: none;
	font-size: 16px;
}
img {
	max-width: 100%;
}
div, input, textarea {
	box-sizing: border-box; 
}
@media (max-width: 1280px) {
	#body { width: 100%; }
}

.pad5 {
	padding: 5px;
}

.aligncenter * { text-align: center; }
.alignright * { text-align: right; }

/** responsive-ness des blocs de taille selectionnable **/

.size16 ,
.size20 ,
.size25 ,
.size30 ,
.size33 ,
.size40 ,
.size50 ,
.size66 ,
.size75 ,
.size100 { margin: 0px; box-sizing: border-box;  }

.size16 { width: 16.666%; }
.size20 { width: 20%; }
.size25 { width: 25%; }
.size30 { width: 30%; }
.size33 { width: 33.333%; }
.size40 { width: 40%; }
.size50 { width: 50%; }
.size66 { width: 66.666%; }
.size75 { width: 75%; }
.size100 { width: 100%; }
.sizerectangle { width: 33%; }
@media (max-width: 640px) {
	.mobile100 { width: 100%; display: block; }
	.mobile0 { display: none; }
	.size16 { width: 50%; }
	.size20 { width: 50%; }
	.size25 { width: 50%; }
	.size30 { width: 100%; }
	.size33 { width: 100%; }
	.size40 { width: 100%; }
	.size50 { width: 100%; }
	.size66 { width: 100%; }
	.size75 { width: 100%; }
	.size100 { width: 100%; }
	.sizerectangle { width: 50%; }
}


@media print {
	#zone_main {
		display: block;
	}
	#pieddepage { display: none; }
	#menu { display: none; }
	#entete {
		break-after: avoid; 
		page-break-after: avoid;
	}
	#body {
		width: 650px; 
	}
	#main {
		page-break-inside: auto;
		page-break-before: avoid;
		width: 100%; 
		box-sizing: content-box; 
	}
	.mobile100 { width: 100%; display: block; }
	.mobile0 { display: none; }
	.size16 { width: 50%; }
	.size20 { width: 50%; }
	.size25 { width: 50%; }
	.size30 { width: 100%; }
	.size33 { width: 100%; }
	.size40 { width: 100%; }
	.size50 { width: 100%; }
	.size66 { width: 100%; }
	.size75 { width: 100%; }
	.size100 { width: 100%; }
}

/*** BRICOLE POUR WEBQUICK ***/
.wq_menu {
	z-index: 1000;
}

/*** GENERIC ***/
.icon_rfloat {
	float: right;
}
.gros {
	font-weight: bold;
}
.alert {
	padding: 20px;
	border-radius: 10px;
	margin: 10px;
	background-color: #ddd;
}
.alert-danger {
	background-color: #faa;
	color: red;
	font-weight: bold;
}


/**** FIX pour bxSlider *****/

.bx-wrapper .bx-viewport {
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

.bx-wrapper { 
 margin-bottom: 38px !important; 
} 
 
.bx-wrapper .bx-viewport { 
  left: 0px !important;   
  border: 0px !important; 
} 
.bx-wrapper .bx-loading { 
  z-index: 1 !important; 
} 
 
.bx-wrapper .bx-controls-direction a { 
  z-index: 1 !important; 
}








/** **************************************************
  * snippets
  * *************************************************/


/*  ************** .news  **************  */

.news h2 {
	padding: 10px;
}

/*  **************  revue_de_presse  **************  */

.revue_de_presse {
	width: 75%;
}
.article {
	width: 100%;
	border-bottom: solid 1px var(--fg);
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.article .titre {
	color: var(--fg);
	font-size: 18px;
}
.article .journal_date {
	margin-top: 5px;
	font-style: italic;
	color: #666;
	font-size: 0.9em;
}




/* ** lien_fichier ******************************/
.fichier,
.lien_fichier {
/*
	display: list-item;
	margin-left: 20px;
	list-style-type: square;
	padding: 5px;
	color: var(--fg);
	*/
}
.style1 .lien_fichier_thingy { background-color: #a00; }
.style2 .lien_fichier_thingy { background-color: #389; }
.style3 .lien_fichier_thingy { background-color: #893; }

.lien_fichier_thingy {
	max-width: 14px;
	min-width: 14px;
	min-height: 80px;
}
.lien_fichier_contener {
	width: 100%;
	padding: 15px;
	display: flex;
}
.lien_fichier {
	text-align:center;
	color: #fff;
	min-height: 120px;
	background-color: #eee;
	flex-grow: 1;
	display: flex;
	align-items: center;
}
.lien_fichier a {
	color: #333;
}
.lien_fichier a {
	padding: 10px;
	display:flex;
	width: 100%;
	height: 100%;
	align-items: center;
}
.lien_fichier a .link_content {
	text-align: center;
	width: 100%;
}
.style1 .lien_fichier:hover a { color: white; }
.style1 .lien_fichier:hover { background-color: #a00; color: white; }
.style2 .lien_fichier:hover a { color: white; }
.style2 .lien_fichier:hover { background-color: #389; color: white; }
.style3 .lien_fichier:hover a { color: white; }
.style3 .lien_fichier:hover { background-color: #893; color: white; }

/* ** cellules_boutons ******************************/

.cellule_boutons_item img {
	vertical-align: middle;
}
.cellule_boutons_item:hover {
	text-decoration: none;
	opacity: 0.9;
	box-shadow: 0px 0px 3px #000;
}
.cellule_boutons_item {
	width: 100%;
	margin: 5px 0px;
	text-align: center;
	display: block;
	text-decoration: none;
	padding: 10px;
	border-radius: 5px;
	box-sizing: border-box;
}

.sc_cellule_boutons {
	display: flex;
	align-items: stretch;
}
.snippet_cellule_boutons {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	display: flex;
	background-repeat: no-repeat;
	background-position: center center;
	padding: 5px;
	margin: 1px;
	align-items: stretch;
}

/* ** cellules **************************************/

.sc_cellule {
	display: flex;
	align-items: stretch;
}
.snippet_cellule {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	/*display: flex;*/
	background-repeat: no-repeat;
	background-position: center center;
	padding: 5px;
	margin: 1px;
	align-items: stretch;
}
.snippet_cellule_image {
	padding: 0px;
}
.barre_couleur {
	margin-right: 0px;
	width: 15px;
}
.cellule_bouton_cta:hover {
	opacity: 1.0;
	box-shadow: 0px 0px 3px #333;
}
.cellule_bouton_cta {
	position: absolute;
	bottom: 3px;
	right: 3px;
	padding: 7px;
	font-weight: bold;
	font-size: 12px;
	border-radius: 3px;
	opacity: 0.8;
}
@media (max-width: 640px) {
	.snippet_cellule.hasbackground {
		min-height: 200px;
	}
}


/* ** footer **************************************/


/* ** header **************************************/


/* ***************** menu ************ */

#plan_du_site_div {
	display: none;
}

#zone_menu_footer {
	padding: 20px;
}
#zone_menu_footer li {
	padding: 5px;
}
#zone_menu_footer ul {
	margin: 0px;
	list-style: none;
	padding: 0px;
}

#zone_menu_footer > ul {
	display: flex;
}
#zone_menu_footer > ul > li  {
	margin: 0px;
	padding: 0px;
	margin-right: 10px;
	padding-right: 10px;
}
#zone_menu_footer > ul > li > a {
	border-bottom: solid 1px #198;
}
#zone_menu_footer > ul > li:last-child {
}

#menu, 
#zone_menu {
	min-height: 37px;
	color: black;
	border-top: solid 0px black;
}
#zone_menu a {
	color: white;
	/*font-family: roboto;*/
}
#zone_menu ul {
	list-style: none;
	position: relative;
	margin:0;
	margin-top: 3px;
	padding:0;
}
@media (min-width: 640px) {

	#zone_menu ul a:hover {
		border-bottom: solid 2px white;
	}

	#zone_menu ul a {
		border-bottom: solid 2px transparent;
		display:block;
		text-decoration:none;
		line-height:32px;
		padding:0 10px;
	}

	#zone_menu ul li {
		position:relative;
		float:left;
		margin:0;
		padding:0;
		text-align: left;
	}
	#zone_menu ul ul {
		text-align: left;
		display:none;
		position:absolute;
		top:31px;
		left:0%;
		padding:0;
		background: #eee;
		width: auto;
		min-width: 200px;
		z-index: 100000;
	}

	#zone_menu ul ul li:hover {
		background: #ccc;
	}
	#zone_menu ul ul li {
		float:none;
		width: auto;
	}

	#zone_menu ul ul a {
		line-height:120%;
		padding:10px 15px;
		color: var(--fg);
	}
	#zone_menu ul ul ul {
		top:0;
		left:100%
	}
	#zone_menu ul li:hover > ul {
		display:block
	}
	#zone_menu {
		float: left;
	}
	#menu_opener {
		display: none;
		color: #27b;
	}
	#zone_menu {
		text-align: right;
	}
}
#menu_line {
	display: flex;
	padding: 10px;
	align-items: flex-end;
}
#menu_logo {
	height: 80px;
}
#banner_logo {
	display: none;
}
#zone_menu {
	padding-top: 20px;
}
#menu_social_box {
	flex-grow: 1;
	text-align: right;
	color: white;
	font-size: 20px;
	padding-top: 10px;
	padding-bottom: 5px;
}
#banner_text {
	display: none;
}
#banner {
	box-shadow: 0px 3px 3px #999;
	z-index: 200;
}
@media (max-width: 641px) {
	#menu_opener {
		display: block;
		width: 100%;
		border-bottom: solid 1px #27b;
		padding: 10px;
		text-transform: uppercase;
		cursor: pointer;
		font-size: 1.1em;
	}
	#zone_menu {
		border-bottom: solid 1px #666;
	}
	#menu  {
		position: sticky;
		top: 0px;
		z-index: 10000;
	}
	#logo_box,
	#menu_logo,
	#menu_line {
		display: none;
	}
	#zone_menu ul li {
		padding: 6px;
	}
	#zone_menu ul li.li_0 {
		border-bottom: solid 1px #ccf;
	}
	#menu ,
	#zone_menu ,
	#zone_menu ul ul li,
	#zone_menu ul li,
	#zone_menu ul ul {
		width: 100%;
	}
	#zone_menu ul ul {
		position: relative;
		display: block;
	}
	#zone_menu ul ul li {
		padding-left: 25px;
		font-size: 0.9em;
	}
}
#zone_menu a {
	text-transform:uppercase;
	text-decoration: none;
	padding-left: 10px;
	padding-right: 10px;
}

#zone_menu .sc {
	display: inline-block;
	width: auto;
}
	
@media (max-width: 640px) {
	#zone_menu .sc {
		width: 100%;
	}
}

/* ***************** formulaires ************ */

.form_line { width: 100%; display: flex; flex-wrap: wrap;}
.form_label { width: 100%; }
.form_input { width: 100%; }
.form_input textarea, 
.form_input input {
	width: 100%;
	margin: 10px 0px;
	padding: 5px;
}
@media (max-width: 640px) {
	.form_line { width: 100%; }
	.form_label { width: 100%; }
	.form_input { width: 100%; }
}


/** template ************* *************** */

#zone_sidebar {
	padding: 10px;
padding-top: 48px;
}

#main_left { width: 75%; }
#main_right { width: 25%; }
@media (max-width: 640px) {
	#main_left { width: 100%; }
	#main_right { display: none; }
}
#main_wide { width: 100%; }
#main_right_wide { width: 100%; }
#main_inside { display: flex; flex-wrap: wrap; }

.sitebuilding { display: none; }

#menu_inside,
#footer_inside,
#banner_inside,
#main_inside { border: none; }

#footer {
	background-image: url(/res/city-skyline-white.png);
	background-position: bottom;
	background-repeat: repeat-x;
	background-size: 300px;
}

#banner {
	background-size: cover;
	background-position: center top;
	height: 400px;
}
@media (max-width: 960px) { #banner { height : 300px; } }
@media (max-width: 640px) { #banner { height : 200px; } }

#menu,
#footer,
#banner,
#main,
body { border: none; }

#menu,
#footer,
#banner,
#main,
body { width: 100%; }

#menu_inside,
#footer_inside,
#banner_inside,
#main_inside {
	width: 100%;
	max-width: 1280px;
	margin: auto;
}



/** edition ************* *************** */

#thetable #zone_menu a {
	color: var(--fg);
}

@media (max-width: 641px) {
	#logo { height: 150px; min-width: 150px;  }
	#banner_text h2 { font-size: 30px; max-width: 150px; }
	#zone_menu a { color: var(--bg); }
	.revue_de_presse { width: 100%; }
	#main_inside { padding: 10px; }
}





/** snippet membres ************* *************** */

.membres.conseil_de_fondation {
	padding: 5px;
}
.membres.conseil_de_fondation .membre {
	padding: 8px 10px;
	/*font-size: 1.3rem;*/
	
}
.membres.conseil_de_fondation .titre_membre {
	font-size: 1.0rem;
	color: #666;
}

.membres.professeurs .membre {
	display: flex;
}

/** snippet membres professeurs ************* *************** */

.membres.professeurs  {
	display: flex;
	flex-wrap: wrap;
}
.membres.professeurs .membre {
	margin-bottom: 20px;
	padding: 15px;
}
.membres.professeurs .membre .photo {
	min-width: 250px;
	max-width: 250px;
	overflow: hidden;
	/*height: 200px;*/
	/*box-shadow: 3px 3px 3px #666;*/

}
.membres.professeurs .membre .photo img{
	width: 100%;
}
.membres.professeurs .membre .nom {
	color: var(--fg);
	font-size: 1.4rem;
	margin-bottom: 10px;
}
.membres.professeurs .membre .txt {
	padding-left: 10px;

}

.membre {
	display-flex;
	flex-wrap: wrap;
}
.membre .txt {
	max-width: 600px;
}

.bottompadded {
	padding-bottom: 60px;
}
@media (max-width: 641px) {
	.bottompadded {
		padding-bottom: 10px;
	}
}


.membres.professeurs  {
	display: flex;
	flex-wrap: wrap;
}
.membres.professeurs .membre {
	margin-bottom: 20px;
	padding: 15px;
}
.membres.professeurs .membre .photo {
	min-width: 250px;
	max-width: 250px;
	overflow: hidden;
	/*height: 200px;*/
	/*box-shadow: 3px 3px 3px #666;*/

}
.membres.professeurs .membre .photo img{
/*
	width: 100%;
	*/
	width: 250px;
	height: 333px;
	object-fit: cover;
}
.membres.professeurs .membre .nom {
	color: var(--fg);
	font-size: 1.4rem;
	margin-bottom: 10px;
}
.membres.professeurs .membre .txt {
	padding-left: 10px;

}

.membre {
	display-flex;
	flex-wrap: wrap;
}
.membre .txt {
	max-width: 600px;
}

.bottompadded {
	padding-bottom: 60px;
}
@media (max-width: 641px) {
	.bottompadded {
		padding-bottom: 10px;
	}
}

/** snippet membres diplomés ************* *************** */
.diplomes {
	padding: 5px;
}
.diplome {
	padding: 5px;
	color: var(--fg2);
}

/** events **/

.event .description {
	display: none;
	opacity: 0.85;
	padding-left: 10px;
}
.event {
	margin-bottom: 15px;
}

.message {
	padding: 20px;
	margin: 10px;
	font-weight: bold;
	border: solid 1px;
}
.message_ok {
	background-color: #dfe;
	border-color: #090;
	color: #090;
}

input[type=checkbox] { width: auto; }
#form_line_div_checkbox .form_label { display: none; }
.button_connexion, 
.button_inscription {
		border-radius: 5px;
		background-color: var(--color-2);
		border: none;
		color: white;
		padding: 10px 20px;
		font-size: 16px;
		margin: 10px;
}
.event h4 {
	font-size: 20px;
	color: var(--fga);
	border-bottom: solid 1px var(--fga);
}