:root {
  --myblue: rgba(144,15,115,1);
  --myblue: rgba(238,188,64,1);
  --myblue: rgba(44,54,154,1);
  --myblueCanard: rgba(38,133,130,1);
  --myblue: rgba(255,212,121,1);
  --mycolor: rgba(238,188,64,1);
  --mycolor: rgba(76,126,196,1);
  --linkcolor: rgba(44,54,154,1); /*rgba(7,96,160,1);*/
  --white: #ffffff; 
  --mygold: rgba(255,212,121,1);
}

a {
  color: var(--mycolor);
}

html
{
	max-width: 1200px;
	margin: auto;
	padding: 0;
	padding-bottom: 30px;
}

body
{ 
	font-family: 'EB Garamond', Georgia, Droid Serif, Verdana, Geneva, Garamond, sans-serif;
	font-size:14pt;
	font-weight: 400;
	margin: 0;
	padding: 0;
	/*border-top: 5px solid #050000;*/
}


#main
{
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	padding: 0 5px;
	background: white;
}

@media only screen and (max-width: 1000px) 
{
   #main {
	width: 96%;
	margin-left: 2%;
	margin-right: 2%;
	padding: 0 0px;
   }
}


header
{
	color: var(--mycolor); /*#0760A0;*/
	background: url("Images/Background.png");
	height: 150px;
	background-position: 50% 62%;
}


h1#name 
{
	margin-left: 10px;
	font-weight: 800;
	text-decoration: underline;
	/*border-bottom: 2px solid #2C369A;*/
	/*border-bottom: 4px solid Snow;*/
}



#navigationBar
{
	color: var(--myblue);
	background-color: rgba(0,0,0,0);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: center;
	position: -webkit-sticky;
	position: sticky;
	top: 1px;
	margin-top: -50px;
	height: 50px;
}

@media only screen and (max-width: 1000px) 
{
   #navigationBar {
	margin-left: -2%;
	margin-right: -2%;
   }
}


	
.navigationBar-sticky {
	background-color: var(--mycolor) !important;
	color: var(--mycolor)  !important;
}



#navigationBar a
{
	color: var(--mycolor);
	background-color: rgba(255,255,255,0.75);
	font-weight: 600;
	flex-basis: 0;
	text-align: center;

	height: 30px;
	border: 2px solid var(--mycolor);
	border-radius: 15px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.navigationBar-sticky a {
	background-color: var(--mycolor) !important;
	color: rgba(255,255,255,1) !important;
	border: 2px solid var(--mycolor) !important;
}

#greetings
{
	margin-top: 20px;
	text-align: center;
	font-weight: 800;
	font-size: 28pt; 
}

#intro
{
	margin-left: 100px;
	margin-right: 100px;
	text-align: justify;
  	text-justify: inter-word;
}
@media only screen and (max-width: 1000px) 
{
   #intro {
	margin-left: 10px;
	margin-right: 10px;
   }
}

#announcement
{
	margin-left: 100px;
	margin-right: 100px;
	text-align: center;
	border: 2px solid var(--myblue); /*#0760A0;*/
	border-radius: 15px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: white;
	margin-bottom: 20px;
}
@media only screen and (max-width: 1000px) 
{
   #announcement {
	margin-left: 10px;
	margin-right: 10px;
   }
}

@keyframes blink { 
   50% { border-color: var(--mycolor); }
   /*50% { border-color: #BA3330; } */
}
#announcement{ /*or other element you want*/
    animation-name: blink ;
    animation-duration: 5s ;
    animation-timing-function: step-end ;
    animation-iteration-count: infinite ;
    animation-direction: alternate ;
}

h2::before { 
  display: block; 
  content: " "; 
  margin-top: -70px; 
  height: 70px; 
  visibility: hidden; 
  pointer-events: none;
}





h2
{
	font-weight: 600;
	/*border: 2px solid green;*/
	margin-bottom: 5px;
}




#people  /* flex container */
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: flex-start;
	margin-bottom: 0px;
	padding-bottom: 0px;
	margin-top: 20px;
	/*border: 2px solid red;*/
}

#alumni  /* flex container */
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: flex-start;
	margin-bottom: 0px;
	padding-bottom: 0px;
	margin-top: 20px;
	/*border: 2px solid red;*/
}

.member /* flex items = flex children */
{
	/*border: 2px solid blue;*/
	flex-basis: 25%;
	text-align: center;
	min-width: 200px;
	min-height: 230px;
}



img
{
	border-radius: 50%;
}


.smiley
{
	margin: auto;
	margin-bottom: 10px;
	height: 150px;
	width: 150px;
	min-height: 150px;
	min-width: 150px;
	background: none;
	text-align: center;
}

.face {
 background-color: none;
 border: 2px solid var(--mycolor);
 width: 150px;
 height: 150px;
 border-radius: 100%;
}

.mouth {
  margin: auto;
  margin-top: 50px;
  background-color: none;
  border: 2px solid var(--mygold);
  width: 80px;
  height: 25px;
  border-radius: 7px 7px 40px 40px;
}

.eye-section {
  margin: auto;
  margin-top: 25px;
  border: solid red 0px;
  width: 80px;
  height: 24px;
  margin: none;
  padding: none;
}

.left-eye, .right-eye {
  display: inline-block;
  border: 2px solid var(--mygold);
  width: 20px;
  height: 24px;
  border-radius: 20px;
  margin-left:0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.right-eye {
  animation: blinkingEye 7s linear 20s infinite;
}

@keyframes blinkingEye {
    0% {    height: 24px;   margin: 0;  }
    58% {   height: 24px;   margin: 0;  }
    60% {   height: 0px;    margin: 12px 0; }
    66% {   height: 24px;   margin: 0;  }
    100% {  height: 24px;   margin: 0;  }
}

#contact  /* flex container */
{
	/*border: 2px solid red;*/
	margin-top: 0px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}


.contactItem /* flex items = flex children */
{
	flex-basis: 30%;
	text-align: top;
	/*border: 3px solid green;*/
	padding-top: 0;
	margin-bottom:0;
}


#affiliation
{
	flex-grow: 2;
}

h4
{
	color: black;
	font-weight: bold;
	text-align: left;
	margin: 0px;
	padding: 0px;
	/*border: 2px solid green;*/
}

.contactItem p
{
	margin: 0;
	padding: 0;
	padding-top: 5px;
}



#publications
{
	/*border: 2px solid red;*/
	margin-top: 0px;
	line-height: 1.5;
}

#publications li
{
	margin-bottom: 10px;
}


.article-title
{
	color: var(--mycolor); /*#0760A0; /*#000000; /*#9b0247; /* #d20360; /*#750236; /* #b20352; /* #0870DF; */
	font-style: normal;
	font-weight: 800;
	background-color: none;
}

.pdf
{
	color: #E21A1C;
}

.higlight
{
	margin-top: 2px;
}

.higlight-list
{
	display: inline-table;
	list-style-type: none;
	white-space: nowrap;
	margin: 0;
	padding: 0;
	line-height: 100%;
}



cite { 
    font-style: normal;
}






h3 p
{
	display: inline;
}

#conferences
{
	line-height: 1.5;
	
}

#conferences a {
  color: black;
}

#illustration
{
	float: right;
	margin-left: 5%;
	margin-right: 5%;
}




/*
a:hover, a:focus
{
    color: #2A6496;
    text-decoration: underline;
}

a:active, a:hover {
    outline: 0px none;
}
a
{
    color: #0760A0;
    text-decoration: none;
}

*/

.abstractlink {color: #050000;
    text-decoration: underline;}
.abstractlink + .abstract {display:none;}
.abstractlink:focus + .abstract {display:block; margin-top: 10px; margin-bottom: 20px;}
.abstractlink:active {pointer-events:none;}


.dl-horizontal dt
{
	float: left;
}

.dl-horizontal dd
{
	padding-left: 20px;
}



#focus
{
	margin: auto;
	width: 75%;
	text-align: center;
	padding-top: 25px;
}



footer
{
	margin: auto;
	margin-top: 40px;
}


/*
details > summary {
  padding: 2px 6px;
  border: none;
  cursor: pointer;
}
*/

/*
details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #dddddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}
*/

details > p {
  color: black;
}

/*

address
{
	font-style: normal;
}

dl#contact dt
{
	font-weight: bold;
}
*/


/* border: 3px solid green;*/

/* .dl-horizontal dt {
    clear: left;
    float: left;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 160px;
}

.dl-horizontal dd {
    margin-left: 180px;
} */


/*

@media (max-width: 1500px) {
	#main
	{
		width: 97%;
		margin-left: 1%;
		margin-right: 1%;
		padding: 0 5px;
		background: white;
	}
}


@media (min-width: 1100px) {
#top-container
{
	display: -webkit-flex;
	display: flex;
}
#infos
{
	-webkit-flex : 4;
	flex: 4;
	margin-right: 5%;
}
}


@media (max-width: 1100px) {
}

/* extract from bootstrap






#recent
{
	/* float: right;
	/* margin-left: 5%;
	-webkit-flex : 5;
	flex: 5;
}

/*
#video1
{
	
	position: left;
}

#video2
{
	display: inline-block;
	position: right;
}


#video1
{
	display: inline-block;
	margin: 2%;
	width: 40%;
		vertical-align: top;

}

#video2
{
	display: inline-block;
	margin: 2%;
	width: 40%;
	vertical-align: top;
}


#video3
{
	display: inline-block;
	width: 40%;
	margin: 2%;
		vertical-align: top;
}

#video4
{
	display: inline-block;
	width: 40%;
	margin: 2%;
		vertical-align: top;

}


#recent
{
	float: right; 
	margin-left: 5%;
	-webkit-flex : 5;
	flex: 5;
}



*/