@import url("https://use.typekit.net/gwi0cmo.css");

/* CSS files add styling rules to your content */

body {
  font-family: "sofia-pro", sans-serif;
  font-weight: 300;
  font-style: normal;
  margin: 2em;
  width: 90%;
  height: 100%;
  --theme-ui-colors-brand-blue: #fff;
  color: #fff;
  background-color: #1F18C0 !important;
  padding-left: 6vw;
  padding-right: 6vw;
}

p {
  color: #fff;
}

.caption {
  line-height: 1.2em;
  padding-bottom: 25px;
  color: #fff;
  text-align: center;
}

h1 {
  color: #fff;
  font-size: 22pt;
  margin: 2%;
  margin-top: 20px;
}

.special-h2 {
  padding: 2%;
  margin: 2%;
  padding-top: 25%;
  font-family: "sofia-pro", sans-serif;
}

h2 {
  font-size: 20pt;
  color: #fff;
  margin: 2%;
/*   margin-top:0; */
  font-family: "sofia-pro", sans-serif;
}

h3 {
  color: #fff;
  font-style: italic;
  margin: 2%;
  font-size: 18pt;
  padding-top: 15px;
  font-family: "sofia-pro", sans-serif;
}

h4{
  color: #fff;
  margin: 2%;
  font-size: 16pt;
  font-family: "sofia-pro", sans-serif;
}

h5 {
  color: #fff;
  margin: 2%;
  font-size: 12pt;
  font-style: italic;
  font-family: "sofia-pro", sans-serif;
}

button {
  font-family: "sofia-pro", sans-serif;
  background-color: hsl(225, 75%, 92%);
  border: none;
  color: #1F18C0;
  padding: 10px 10px;
  width: 100%;
  /*   text-align: center; */
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 30px 2px;
  cursor: pointer;
}

p {
  font-size: 12pt;
  line-height: 18pt;
  margin: 2%;
}

.left {
  width: 15%;
  padding: 1% 1% 1% 0;
  float: left;
  /*   background-color: #1F18C0; */
}

.center {
  width: 15%;
  padding: 1%;
  float: left;
}

.right {
  width: 60%;
  padding: 1%;
  float: left;
}

main {
  margin: 2%;
  /* width: 80%; */
  display: inline-block;
  /*   background-color:yellow; */
  padding-left: 6vw;
  padding-right: 6vw;
}

/* list elements */

ol li {
  list-style-type: decimal;
  /* width: 80%; */
}

ul li {
  margin: 0;
  padding: 0;
  line-height: 18pt;
  list-style-type: disc;
  /* width: 80%; */
}

/* .citation li::before {
  padding-left: 30px;
  list-style-type: lower-alpha;
  list-style-type: counter;
  counter-increment: item;
} */

.citation li {
  text-indent: -32px;
  padding-left: 40px;
}

/* .citation ol {
  text-indent: -32px;
  list-style-type: upper-roman;
} */

/* ol li {
  list-style-type: counter;
  padding-bottom: 1em;
} */

/* ul.table {
  list-style-type: circle;
} */

li {
  font-size: 12pt;
  list-style-type: none;
  padding-bottom: 1em;
}

li.bullet {
  list-style-type: "- ";
  margin: 1%;
  padding: 0;
}

li.bullet a {
  color: #fff;
}

li a {
  color: #fff;
  text-decoration: underline;
}

/* table styles */

table, th, td {
  border: 1px solid #fff;
  border-collapse: collapse;
}

ul th, td {
  padding: 10px 20px;
  margin: 1%;
}

/* link decoration */

a {
  text-decoration: underline;
}

a:hover {
  text-decoration: underline;
}

a:-webkit-any-link {
  color: #fff;
}

.nav a { 
  color: #fff;
  text-decoration: none;
}

.nav li {
  color: #fff;
  text-decoration: none;
  margin-bottom: 10px;
}

iframe {
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  height: 400px;
  float: left;
  margin-bottom: 2%;
}

.full-width-box {
  margin-right: 5%;
  margin-bottom: 2%;
  display: inline-block;
}

img {
  height: 425px;
  display: inline-block;
}

body .gist .gist-file {
  margin-bottom: 0;
  border: 1px dashed #adb5bd;
  border-radius: 0;
}

body .gist .gist-data {
  border-bottom: none;
  border-radius: 0;
  background-color: #fff;
}

body .gist .blob-wrapper {
  border-radius: 0;
}

body .gist .highlight {
  background-color: transparent;
  font-size: 14px;
}

body .gist .highlight td {
  padding: 5px 15px !important;
  line-height: 1;
  font-family: inherit;
  font-size: inherit;
}

body .gist tr:first-child td {
  padding-top: 15px !important;
}

body .gist tr:last-child td {
  padding-bottom: 15px !important;
}

/* body .gist .blob-num {
  color: #ced4da;
  background-color: #495057;
  pointer-events: none;
} */

body .gist .gist-meta {
  display: none;
}

/* navigation */

.nav-wrapper {
  display: flex;
  flex-wrap: nowrap;
  flex: 1 0 67%;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding-top: 1.9vw;
  padding-bottom: 1.9vw;
  padding-left: 6vw;
  padding-right: 6vw;
}

#logo {
  max-width: 100%;
  max-height: 128px;
  height: 10em;
  padding: 2%;
  display: block;
}

.nav-title {
  font-family: pragmatica-extended;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1em;
  font-size: 1.1rem;
  padding-left: 1.6em;
}

.header-nav-wrapper {
  margin: 2%;
  /* display: inline-flex;
  flex-wrap: wrap; */
  padding-left: 6vw;
  padding-right: 6vw;
}

.header-nav-wrapper a {
  text-decoration: none;
  backface-visibility: hidden;
}

a:focus-visible {
  outline-offset: 1px;
}

.header-nav-wrapper a,
.header-nav-wrapper a:visited {
  text-decoration: none;
}

.header-nav-wrapper a:hover {
  text-decoration: underline;
}

.header-nav-wrapper a:focus {
  text-decoration: underline;
}

.header-nav-item {
  cursor: pointer;
  /* display: inline-flex;
  flex-wrap: wrap;
  position: relative; */
  width: 30%;
  height: 100%;
  font-family: pragmatica-extended;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1.6em;
  font-size: 1.1rem;
}

.header-nav-item a:active {
  text-decoration: underline;
}

#toggle {
  display: none;
}

@media only screen and (max-width: 600px) {
  body {
    font-family: "sofia-pro", sans-serif;
    font-weight: 300;
    font-style: normal;
    margin: 1%;
    width: 98%;
    height: 100%;
  }
  .nav {
    width: 100%;
  }
  main {
    width: 100%;
    float: left;
  }

  img {
    width: 100%;
    height: auto;
  }
}

.myBox {
  /*   background: #1F18C0; */

  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;

  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;

  border: 1px solid #fff;
}

.fullwidth {
  float: left;
  margin: 2%;
  width: 100%;
  text-align: center;
}

.list2 li {
  list-style-type: circle;
}

#main {
  width: 80%;
}

audio {
  margin-left: 2%;
}