/********************* Color reference chart****************

Dark Blue                   #02213e
Blue                        #339bff
Light Blue                  #86c3fe

Orange                      #ff6a23
Light Orange                #ffe07d

Red/Orange                  #da4700
Dark Red/Orange             #601f00

(http://paletton.com/palette.php?uid=33-0u0krD%2B%2B00%2B%2Bgl%2BDZIYcNic4)

*************************** comment ********** color ********

navigation bg               nbg               #02213e
navigation text             nt                #ffe07d
navigation hover            nh                #ff6a23

header bg                   hbg               #ffffff
header text                 ht                #339bff
header secondary            hs                #601f00
header link                 hl                #02213e

even bg                     ebg               #ffe07d
even heading                eh                #02213e
even text                   et                #02213e
even link                   el                #da4700

odd bg                      obg               #ffffff
odd heading                 oh                #02213e
odd text                    ot                #02213e
odd link                    ol                #ff6a23
odd link2                   ol2               #601f00

link color                  lc                #da4700

footer bg                   fbg               #02213e
footer heading              fh                #ffe07d
footer text                 ft                #ffe07d
footer link                 fl                #ff6a23

modal bg                    mbg               #ffffff
modal heading               mh                #02213e
modal text                  mt                #02213e
modal link                  ml                #ff6a23

*/

@media (max-width:1200px) and (min-width:600px) {
  #longNavbar {
      display:none !important;
  }
  #shortNavbar {
      display:visible !important;
  }
}
@media (min-width:1200px) {
  #longNavbar {
      display:visible !important;
  }
  #shortNavbar {
      display:none !important;
  }
}

body {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

p {
  font-size: 16px;
}

#myNav {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 25px;
  height: 95px;
  background-color: /*nbg*/#02213e;
}

#myNav li {
  display: inline;
  padding-left: 5px;
}

#myNav a {
  padding-left: 10px;
}

#myNav a:focus {
  outline: none;
}

#myNav .navbar-brand {
  color: /*nh*/#ff6a23;
  font-weight: normal;
  font-size: 32px;
}
#myNav .navbar-brand:hover,
#myNav .navbar-brand:focus,
#myNav .navbar-brand:active,
#myNav .navbar-brand.active {
  color: /*nh*/#ff6a23;
}

#myNav .navbar-brand.small {
  margin-left: -15px;
  padding-left: 0px;
  font-size: 24px;
}

#myNav .navbar-nav {
  letter-spacing: 1px;
}

#myNav .navbar-nav li.nav-item a.nav-link {
  color: /*nt*/#ffe07d;
}
#myNav .navbar-nav li.nav-item a.nav-link:hover {
  color: /*nh*/#ff6a23;
  background-color: /*nbg*/#02213e;
  text-decoration: none;
  outline: none;
}
#myNav .navbar-nav li.nav-item a.nav-link:focus,
#myNav .navbar-nav li.nav-item a.nav-link:active {
  text-decoration: none;
  background-color: /*nbg*/#02213e;
}

#myNav .navbar-nav li.nav-item.active a,
#myNav .navbar-nav li.nav-item.active a:hover,
#myNav .navbar-nav li.nav-item.active a:focus,
#myNav .navbar-nav li.nav-item.active a:active {
  color: /*nh*/#ff6a23;
  text-decoration: none;
}

.ultra-short-nav {
  padding-top: 15px;
}
.ultra-short-nav a {
  color: /*nt*/#ffe07d;
}

#avatar img {
  margin-top: 25px;
  height: 300px;
  border: 3px solid /*ht*/#02213e;
}

header {
  background-color: /*hbg*/#ffffff;
  color: /*ht*/#02213e;
  min-height: 450px;
  padding-top: 100px;
}

header .container {
  position: relative;
  top:0px;
}

header h1 {
  color: /*ht*/#02213e;
  font-size: 48px;
  font-weight: bold;
  padding-top: 25px;
}

header h2 {
  color: /*hs*/#601f00;
  font-size: 28px;
  font-weight: normal;
  padding-bottom: 20px;
}

header a {
  color: /*hl*/#02213e;
}
header a:hover,
header a:focus,
header a:active {
  color: /*hl*/#02213e;
  text-decoration: none;
}

header p {
  font-size: 20px;
  color: /*ht*/#02213e;
}

a {
  color: /*lc*/#da4700;
}
a:hover,
a:focus,
a:active {
  color: /*lc*/#da4700;
  text-decoration: underline;
}

.even {
  background-color: /*ebg*/#ffe07d;
  color: /*et*/#02213e;
  padding-top: 45px;
  padding-bottom: 75px;
  font-size: 16px;
}

.even h2 {
  color: /*eh*/#02213e;
  font-size: 28px;
  font-weight: bold;
  padding-bottom: 5px;
}

.even h3 {
  font-size: 22px;
  font-weight: bold;
}

.even hr {
  color: /*eh*/#02213e;
  padding: 0;
  border: none;
  border-top: solid 5px;
  text-align: left;
  max-width: 350px;
  margin: 20px 0px 20px;
}

.even a {
  color: /*el*/#da4700;
}
.even a:hover,
.even a:focus,
.even a:active {
  color: /*el*/#da4700;
}

.even a.icon {
  color: /*et*/#02213e;
}
.even a.icon:hover ,
.even a.icon:focus,
.even a.icon:active {
  color: /*et*/#02213e;
}

.even ul {
  list-style: none;
  padding: 0;
}
.even li {
  padding-left: 1.75em;
  padding-bottom: 10px;
}
.even li:before {
  content: "\f069"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  text-align: center;
  margin-left: -1.75em; /* same as padding-left set on li */
  width: 1.75em; /* same as padding-left set on li */
}

.odd {
  background-color: /*obg*/#ffffff;
  color: /*ot*/#02213e;
  padding-top: 45px;
  padding-bottom: 75px;
  font-size: 16px;
}

.odd h2 {
  color: /*oh*/#02213e;
  font-size: 28px;
  font-weight: bold;
  padding-bottom: 5px;
}

.odd h3 {
  font-size: 22px;
  font-weight: bold;
}

.odd hr {
  color: /*eh*/#02213e;
  padding: 0;
  border: none;
  border-top: solid 5px;
  text-align: left;
  max-width: 350px;
  margin: 20px 0px 20px;
}

.odd a {
  color: /*ol*/#ff6a23;
}
.odd a:hover,
.odd a:focus,
.odd a:active {
  color: /*ol*/#ff6a23;
}

.odd a.course {
  color: /*ol2*/#601f00;
}
.odd a.course:hover,
.odd a.course:focus,
.odd a.course:active {
  color: /*ol2*/#601f00;
  text-decoration: underline;
}

.odd a.icon {
  color: /*ot*/#02213e;
}
.odd a.icon:hover ,
.odd a.icon:focus,
.odd a.icon:active {
  color: /*ot*/#02213e;
}

.odd ul {
  list-style: none;
  padding: 0;
}
.odd li {
  padding-left: 1.75em;
  padding-bottom: 10px;
}
.odd li:before {
  content: "\f069"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  text-align: center;
  margin-left: -1.75em; /* same as padding-left set on li */
  width: 1.75em; /* same as padding-left set on li */
}

#born:before {
  content: "\f007"; /* FontAwesome Unicode */
}

.etc {
  margin-top: 40px;
}

.etc li:before {
  content: "\f0c9"; /* FontAwesome Unicode */
}

#publications h1 {
  font-size: 20px;
  padding-bottom: 10px;
}

#publications li {
  font-size: 14px;
  padding-left: 2em;
}

#publications li:before {
  content: "\f0f6"; /* FontAwesome Unicode */
  margin-left: -2em; /* same as padding-left set on li */
  width: 2em; /* same as padding-left set on li */
}

#news li:before {
  content: "\f00c"; /* FontAwesome Unicode */
}

.footer {
  background-color: /*fbg*/#02213e;
  color: /*ft*/#ffe07d;
  padding-top: 15px;
  padding-bottom: 25px;
}

.footer h2 {
  color: /*fh*/#ffe07d;
  font-size: 24px;
  font-weight: bold;
}

.footer h3 {
  font-size: 20px;
  font-weight: bold;
}

.footer p {
  font-size: 16px;
}

.footer a {
  color: /*fl*/#ff6a23;
}
.footer a:hover,
.footer a:focus,
.footer a:active {
  color: /*fl*/#ff6a23;
}

.footer a.icon {
  color: /*ft*/#ffe07d;
}
.footer a.icon:hover ,
.footer a.icon:focus,
.footer a.icon:active {
  color: /*ft*/#ffe07d;
}

.extrapage-modal .modal-dialog {
  border-radius: 0;
  background-clip: border-box;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  text-align: left;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: /*mbg*/#ffffff;
  font-size: 16px;
}

.extrapage-modal .modal-dialog .modal-content {
  padding: 50px 0;
  border-radius: 0;
  border: 0;
  z-index: -1;
}
.extrapage-modal .modal-dialog .modal-content h2 {
  color: /*mt*/#02213e;
  font-size: 28px;
  font-weight: bold;
  margin-top: 25px;
  padding-bottom: 5px;
}
.extrapage-modal .modal-dialog .modal-content hr {
  color: /*mt*/#02213e;
  padding: 0;
  border: none;
  border-top: solid 5px;
  text-align: left;
  max-width: 350px;
  margin: 20px 0px 20px;
}

.extrapage-modal .modal-dialog .modal-content a {
  color: /*ml*/#ff6a23;
}
.extrapage-modal .modal-dialog .modal-content a:hover,
.extrapage-modal .modal-dialog .modal-content a:focus,
.extrapage-modal .modal-dialog .modal-content a:active {
  color: /*ml*/#ff6a23;
}

.extrapage-modal .modal-dialog .modal-content ul {
  list-style: none;
  padding-top: 0px;
}
.extrapage-modal .modal-dialog .modal-content li {
  padding-left: 1.75em;
  padding-bottom: 10px;
}
.extrapage-modal .modal-dialog .modal-content li:before {
  content: "\f069"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  text-align: center;
  margin-left: -1.75em; /* same as padding-left set on li */
  width: 1.75em; /* same as padding-left set on li */
}

.extrapage-modal .modal-dialog .modal-content .etc li:before {
  content: "\f0c9"; /* FontAwesome Unicode */
}

.extrapage-modal .modal-dialog .modal-content .numbered li {
  padding-left: 0px;
  padding-bottom: 10px;
}
.extrapage-modal .modal-dialog .modal-content .numbered li:before {
  content: " "; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  text-align: center;
  margin-left: -1.75em; /* same as padding-left set on li */
  width: 1.75em; /* same as padding-left set on li */
}

.extrapage-modal .modal-dialog .modal-content .etc li:before {
  content: "\f0c9"; /* FontAwesome Unicode */
}

.extrapage-modal .modal-content .close-modal-icon {
  position: absolute;
  width: 75px;
  height: 75px;
  background-color: transparent;
  top: 25px;
  right: 25px;
  z-index: 1;
}
.extrapage-modal .modal-content .close-modal-icon a,
.extrapage-modal .modal-content .close-modal-icon a:hover,
.extrapage-modal .modal-content .close-modal-icon a:focus,
.extrapage-modal .modal-content .close-modal-icon a:active
{
  color: /*mt*/#02213e;
}
.extrapage-modal .modal-content .close-modal-icon:hover {
  opacity: 0.3;
}

.nobr {
   white-space: nowrap;
}
.supsub {
   display: inline-block;
   margin: -9em 0;
   vertical-align: -0.55em;
   line-height: 1.35em;
   font-size: 70%;
   text-align: left;
}