@font-face {
  font-family: Neogrotesk Ess Alt;
  src: url("../font/NeogroteskEssAlt-Regular.woff") format("woff");
}
@font-face {
  font-family: Boston-SemiBold;
  src: url("../font/Boston-SemiBold.woff") format("woff");
}
@font-face {
  font-family: Neogrotesk Ess Alt Bold;
  src: url("../font/NeogroteskEssAlt-Bold.woff") format("woff");
}
@font-face {
  font-family: Boston-Regular;
  src: url("../font/Boston-Regular.woff") format("woff");
}
@font-face {
  font-family: Neogrotesk Ess Alt Light;
  src: url("../font/NeogroteskEssAlt-Light.woff") format("woff");
}
@font-face {
  font-family: Boston-Bold;
  src: url("../font/Boston-Bold.woff");
}
:root{
  --blueLight: #1f64a7;
  --blue: #0d4162;
  --blueDark: #022859;
  --orange: #f96e46;
  --yellow: #ffe194;
}
.tpContainer{
  margin: auto;
  padding-top: 10rem;
  width: 80%;
  margin-bottom: 5rem;
}
.tpContainer h1{
  color: var(--blue);
  font-family: Neogrotesk Ess Alt Bold;
  font-size: 3rem;
  text-align: center;
}
.tpContainer ol{
}
.tpContainer p{ 
  padding: 1rem 0;
  font-family: Boston-Regular;
  font-size: 1.2rem;  
}
.tpContainer ol li, h3{
  color: var(--blue);
  font-size: 2rem;
  padding: 1rem 0;
  font-family: Boston-SemiBold;
}
.tpContainer h3{
  font-size: 1.5rem;
  padding-bottom: 0;
}
.tpContainer ul{
  padding-left: 2rem;
}
.tpContainer ul li{
  color: #333;
  font-size: 1.2rem;
  font-family: Boston-SemiBold;
}
@media screen and (max-width:900px) {
  .tpContainer{
    width: 90%;
  }
}
@media screen and (max-width:700px) {
  .tpContainer{
    width: 90%;
  }
  .tpContainer ol{
    padding-left: 1rem;
  }
  .tpContainer ol li{
    font-size: 1.6rem;
  }
  .tpContainer p{
    font-size: 1rem;
    line-height: 1.6;
  }
  .tpContainer ul li{
    font-size: 1rem;
    padding: 0.5rem 0;
  }
}