html {
    /*font-family: Arial, Helvetica, sans-serif;*/
    font-family: 'Times New Roman', Times, serif;
    background-color: #ffffff;
    color: #021254;
    overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
}

main {
  padding-top: 50px; /* To prevent content from being hidden behind the fixed topnav */
}

/* ========== TOPNAV ========== */

.topnav {
  overflow: hidden;
  background-color: #021254;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 500;
  transition: top 0.3s;
  display:flex;
  justify-content: center;
}

.navbox {
  flex: 1;
  display: flex;
  justify-content: center;
}

.topnav a {
  display: block;
  color: #e6e6e6;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #e9e9e9;
  color: #021254;
}

.topnav a.active {
  background-color: #ffffff;
  color: #021254;
}

.topnav img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 3px 20px 0 0;
}

.topnav h3 {
  font-size: 19px;
  color: #ffffff;
  margin: 11px 40px 0px 0px;
  font-weight: normal;
}

/* ========== MAIN CONTENT ========== */

.titlediv {
  display: flex;
  align-items: center;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 62px;
  padding-left: 10vw;
}

.webbackground {
  background: url("/webgiallo.png");
  background-repeat: no-repeat;
  background-size: 40em;
  background-position: right top -20px;
}

.titletextdiv {
  margin-left: 8vw;
  margin-top: 30px;
  text-align: left;
}

.titletextdiv h1 {
  font-size: 3.5em;
  margin: 0;
  font-weight:bold;
}

.titletextdiv h2 {
  color: #48527A;
  font-size: 1.7em;
  font-style: italic;
  font-weight: normal;
  margin-top: 13px;
}

.largelogo {
  border-radius: 50%;
  width: 250px;
  height: auto;
}

/* ========== DIVIDER ========== */

.divider {
  height: 50px;
  width: 100vw;
  background-color: #021254;
  position: relative;
}

.divider h2 {
  color: #ffffff;
  font-weight: normal;
  display: block;
  margin-left: 8vw;
  padding-top: 12px;
  margin-block-start: 0em;
}

/* ========== TEXT ========== */

.pagecontent {
  margin-left: 8vw;
  margin-right: 8vw;
  margin-bottom: 50px;
}

.pagecontent h2 {
  font-size: 2em;
  font-weight: normal;
}

.pagecontent p {
  line-height: 1.6em;
  font-size: 1.2em;
}

/* ========== FOOTER ========== */

.footer {
  background-color: #021254;
  color: #ffffff;
  padding: 50px 8vw 80px 8vw;
}

.footertitle {
  display: flex;
  align-items: left;
  justify-content: left;
  margin-bottom: 10px;
}

.footerlogo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.footertxt {
  margin-left:30px
}

.footertxt h3 {
  font-size: 2em;
  margin: 8px 0 30px 0;
}

.footertxt a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.3em;
  margin: 0 0 14px 0;
}

.footertxt a:hover {
  color: #a0a0a0;
}

.footertxt a.active {
  color: #bbbbbb;
}

.socialmedia {
  display: flex;
}

.socialmedia img {
  width: 30px;
  height:auto;
  border-radius: 25%;
}

.socialmedia p {
  font-size: 1em;
  margin: 4px 0 0 12px;
}

.footerinfo {
  display: flex;
  justify-content: space-between;

  align-items: center;
  margin-top: 30px;
  font-size: 1em;
}

.footerinfo a {
  margin-top: 15px;
  font-size: 1em;
}