* {
  padding: 0px;
  margin: 0px;
}

body {
  background-color: #F3EDED;
  font-family: ff-tisa-web-pro, serif;
  font-weight: 400;
  color: #373535; /* #393535 #1B0808;*/
  font-size: 20px;
}

/********************************/
/******* Fix Columns*************/
/********************************/

._5c {
  width: 670px;
}

._10c {
  width: 1370px;
}


/*******************************/

.turquoise {
  color: #089eb9;
}

.vividOrange {
  color: #e85d03;
}

.FAF2F2 {
  /*background-color: #FAF2F2;*/
  background-color: #fbf6f0;
}

.EDD {
  background-color: #f4e5e5;

}




/*******************************/

#container {
  display: flex;
  background-color: white;
  min-height: 100vh;
}

#menu {
  background-color: #0C87A1;
  width: 20%;
  padding: 40px;
  display: flex;
  justify-content: flex-end;
  font-weight: 300;
}

#menu  ul {
  position: fixed;
}

#menu > ul li {
  text-align: right;
  list-style: none;
  font-size: 24px;
  color: white;
  margin-bottom: 10px;
}

.current {
  font-weight: bold;
}

#menu > ul li a {
  color: #92F0F0;
  text-decoration: none;
}

#menu > ul li a:hover {
  color: #ffed00;
  text-decoration: none;
}



/********************************/
/******* Main Content ***************/
/********************************/



#main-content {
  width: 80%;
  padding: 0px 0px 0px 0px;
}



/********************************/
/******* Homepage ***************/
/********************************/

.fortune-cookie {
  margin: 60px auto 0px auto;
  display: block;
  width: 75%;
}

h1.display-title {
  position: relative;
  max-width: 950px;
  margin: 0 auto 20px auto !important;
  margin-top: -40px;
  font-weight: 800;
  font-style: italic;
  font-size: 62px;
  line-height: 70px;
  text-align: center;
}

h2.display-title {
  max-width: 970px;
  font-family: ff-tisa-web-pro, serif;
  font-weight: 400;
  font-size: 24px;
  text-align: center;
  margin: 0 auto 80px auto;
  color: #e85d03;
}

.aboutme {
  display: flex;
  max-width: 900px;
  margin: 0px auto 80px auto;
}

.mypic img {
  width: 130px;
  margin-right: 20px;
  border-radius: 90px;
  border: 1px solid #CB5500;
  //box-shadow: 2px 2px 4px #f1e9e9;
}

.bio {
  max-width: 720px;
}

.bio a, a {
  color: #007ab6;
}

.bio a:hover, a:hover {
  color: #ff5309;
  /*background-color: #a7f2ff;*/
}

.presentation {
  background-color: #F3EDED;
  padding: 60px 40px;
}

.institution, .commentary {
  font-style: italic;
}

.reference, .commentary, .institution {
  color: #735050;
}

.reference {
  font-size: 15px !important;
}

/******************************/

.stripe {
  display: flex;
  gap: 30px;
  padding: 40px 40px 20px 40px;
  margin-top: 10px;
}

.stripe h1 {
  color: #0082a4;
  font-size: 23px;
  line-height: 120%;
  width: 250px;
}

#main-content p {
  line-height: 133%;
  margin-bottom: 40px;
}

.turquoise-stripe {
  background-color: #015B78;
  color: white;
  padding-bottom: 100px !important;
}

.turquoise-stripe h1 {
  color: #F2C176;
  width: 250px;
}

.turquoise-stripe a {
  color: #85F8FF;
}




/********************************/
/******* Publications ***********/
/********************************/

.pub-cat {
  list-style-image: none;
  }

.pub-cat > li {
  margin-bottom: 30px;
  line-height: 130%;
  list-style-type: none;
}

.pub-cat li strong {
  color: #e85d03;
  font-weight: 400; /*activate the semibold font*/
}

.cat-note {
  font-weight: 300 !important;
  font-style: italic;
  font-size: 18px;
}

#main-content > h1 {
  margin: 10px 0px 10px 40px;
  color: #13286b;
}

/**********************************/
/*********** Ex-libris ************/
/**********************************/

.design-dragon {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  padding-bottom: 0px;
}

.design-dragon img {
  height: 135px;
  width: 196px;
  align-self: flex-end;
  margin-right: 40px;
  opacity: 0.9;
}

/**********************************************************************?
/**********************************************************************?/**********************************************************************?/**********************************************************************?



/***** mobile goes here *******/



/**********************************/
/*********** 834x1112 *************/
/**********************************/
@media only screen and (max-width: 834px) {

  body {
    font-size: 12px !important;
  }

  /*****************/

  #menu {
    padding: 15px !important;
  }


  #menu > ul li {
    font-size: 16px !important;
  }

  /*****************/


    .aboutme {
      max-width: 480px !important;
      margin: 0px auto 40px auto;
    }

    .mypic img {
      width: 80px !important;
    }

    /*****************/

    .fortune-cookie {
      margin: 40px auto 0px auto;
      width: 85%;
    }

    h1.display-title {
      max-width: 440px !important;
      font-size: 32px !important;
      line-height: 120% !important;
    }

    h2.display-title {
      max-width: 650px;
      font-size: 16px !important;
    }

    .stripe {
      gap: 20px;
      padding: 40px 40px 20px 40px;
    }

    .reference {
      font-size: 8px !important;
    }

    .stripe h1 {
      font-size: 14px !important;
    }

    #main-content p {
      line-height: 133%;
      margin-bottom: 20px !important;
    }
} /* End of 834px */


/**********************************/
/*********** 1024x768 *************/
/**********************************/

@media only screen and (max-width: 1024px) {
  body {
    font-size: 16px;
  }

  /*****************/

  #menu {
    padding: 30px;
  }


  #menu > ul li {
    font-size: 18px;
  }

  /*****************/

  .aboutme {
    max-width: 630px;
    margin: 0px auto 40px auto;
  }

  .mypic img {
    width: 117px;
  }

  /*****************/

  .fortune-cookie {
    margin: 40px auto 0px auto;
    width: 85%;
  }

  h1.display-title {
    max-width: 650px;
    font-weight: 800;
    font-style: italic;
    font-size: 42px;
    line-height: 50px;
  }

  h2.display-title {
    max-width: 650px;
    font-family: ff-tisa-web-pro, serif;
    font-size: 20px;
    text-align: center;
    margin: 0 auto 60px auto;
    color: #e85d03;
  }

  .reference {
    font-size: 12px !important;
  }

  .stripe h1 {
    font-size: 18px;
  }

  #main-content p {
    line-height: 133%;
    margin-bottom: 30px;
  }

  /*****************/

  .cat-note {
    font-size: 11px;
  }

  /*****************/

  .design-dragon img {
    height: 121px;
    width: 176px;
    margin-right: 20px;
    opacity: 0.9;
  }

} /* End of 1024 */


/**********************************/
/*********** 1112x834 *************/
/**********************************/

@media only screen and (max-width: 1112px) {
  body {
    font-size: 16px;
  }

  /*****************/

  #menu {
    padding: 30px;
  }


  #menu > ul li {
    font-size: 18px;
  }

  /*****************/

  .aboutme {
    max-width: 630px;
    margin: 0px auto 40px auto;
  }

  .mypic img {
    width: 117px;
  }

  /*****************/

  .fortune-cookie {
    margin: 40px auto 0px auto;
    width: 85%;
  }

  h1.display-title {
    max-width: 650px;
    font-weight: 800;
    font-style: italic;
    font-size: 42px;
    line-height: 50px;
  }

  h2.display-title {
    max-width: 650px;
    font-family: ff-tisa-web-pro, serif;
    font-size: 20px;
    text-align: center;
    margin: 0 auto 60px auto;
    color: #e85d03;
  }

  .reference {
    font-size: 12px !important;
  }

  .stripe h1 {
    font-size: 18px;
  }

  #main-content p {
    line-height: 133%;
    margin-bottom: 30px;
  }
} /* End of 1112 */


/*******************************************************************/
/*******************************************************************/
/*******************************************************************/

/**********************************/
/*********** 414x1736 *************/
/**********************************/
@media only screen and (max-width: 414px) {
  body {
    font-size: 16px !important;
  }

  #container {
    flex-direction: column;
  }

  #menu {
    min-height: 60px;
    width: 100%;
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
    font-weight: 300;
  }

  #menu  ul {
    width: 90%;
    text-align: center;
    margin-right: 15px;
  }

  #menu > ul li {
    display: inline;
    text-align: center;
    list-style: none;
    font-size: 17px !important;
    color: white;
    margin-right: 20px;
  }

  /*************************/

  #main-content {
    padding: 0px;
  }

  ._5c {
    width: auto;
  }

  ._10c {
    width: auto;
    overflow-wrap: break-word;
  }


  /*************************/

  .fortune-cookie {
    display: block;
    width: 93%;
    margin: 120px auto 10px auto;
  }

  h1.display-title {
    position: inherit;
    padding: 0px 10px;
    font-weight: 800;
    font-style: italic;
    font-size: 24px !important;
    line-height: 70px;
    text-align: center;
  }

  h2.display-title {
    font-family: ff-tisa-web-pro, serif;
    font-weight: 400;
    font-size: 18px !important;
    padding: 0px 50px;
    text-align: center;
    margin: 0px auto 40px auto;
    color: #e85d03;
  }

  .aboutme {
    display: flex;
    flex-direction: column;
    padding: 0px 32px 0px 20px;
    margin: 0px auto 20px auto;
  }

  .mypic img {
    width: 76px !important;
    margin-bottom: 5px;
    border-radius: 40px;
    border: 1px solid #CB5500;
    //box-shadow: 2px 2px 4px #f1e9e9;
  }

  .bio {
    max-width: 720px;
  }

  .bio a, a {
    color: #007ab6;
  }

  .bio a:hover, a:hover {
    color: #ff5309;
  }

  .presentation {
    background-color: #F3EDED;
    padding: 60px 40px;
  }

  .institution, .commentary {
    font-style: italic;
  }

  .reference, .commentary, .institution {
    color: #735050;
  }

  .reference {
    font-size: 13px !important;
    margin-left: 40px;
  }

  /*************************/

  #main-content {
    width: 100%;
    padding: 0px;
  }


  .stripe {
    display: flex;
    gap: 0px;
    padding: 20px 32px 20px 20px;
    margin-top: 10px;
    flex-direction: column;

  }

  .stripe h1 {
    color: #0082a4;
    font-size: 20px !important;
    line-height: 120%;
    width: 100%;
    margin-bottom: 20px;
  }

  #main-content p {
    line-height: 133%;
    margin-bottom: 40px;
  }

  /*************************/

  .cat-note {
    font-size: 18px !important;
  }

  /*************************/

  .turquoise-stripe {
    padding-bottom: 40px !important;
  }

  .design-dragon {
    width: 100%;

  }

  .design-dragon img  {
    height: 97px;
    width: 141px;
    margin-top: 40px;
    margin-right: 0px;
  }
} /* End of 414 */