* {
  box-sizing: border-box;
}

html,
body {
  background: #0099ff;
  background-image: none;
  color: #000099;
  font-family: Arial, Helvetica, Helv, sans-serif;
  font-size: 100%;
  /* width: 560px;
    margin: 0 auto;
    padding: 1em;
    border: 1px solid navy */
  /* margin:0px;
  height: 100%; */
}

.container {
  margin: auto;
  /* width: 60%; */
  padding: 20px;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  /* position: relative;
  top: 50%;
  transform: translateY(-50%); */
  /* border: 5px solid #ffff00; */
}

div.info {
  position: relative;
  /* background: yellow; */
  padding: 1%;
  /* width:61.8%; */
}

section {
  /* width: 200px;
  border: 1px solid #2d2d2d;
  display: flex;
  justify-content: center;
  align-items: center; */
  /* display: flex; */
  justify-content: center;
  align-items: center;
}

.row {
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: 1px solid #ffff00; */
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 10px;

  /* Should be removed. Only for demonstration */
  /* height: 300px;  */

  /* border:1px solid yellow; */
}

.ul_left {
  color: #000099;
  font-family: Arial, Helvetica, Helv, sans-serif;
  list-style-position: inside;
  text-align: left;
  /* margin: 0 auto; */
  margin-left: 10%;
  display: table;
  list-style-type: circle;
}

.li_left {
  display: list-item;
  text-indent: -1em;
  padding-left: 1em;
  list-style: disc inside none;
  /* margin-left:10%; */
  margin-left: 35px;
  white-space: nowrap;
  /* margin: 0 auto; */
}

.content-bottom {
  /* position: absolute; */
  /* width: 498px; */

  /*This is the part that glues it to the bottom*/
  /* bottom: 0;  */
  /* border: 1px solid #000; */
  position: relative;
  bottom: -18%;
}

.grid-container {
  /* https://blog.logrocket.com/13-ways-to-vertical-center/ */
  display: grid;
  /* grid-template-columns: 200px 200px 200px; */
  grid-template-columns: 1.5fr 1.5fr;
  align-items: center;
  /* border: 5px solid #ffff00; */
  /* grid-row-gap: 5px;
  grid-column-gap: 5px; */
  /* grid-gap: 50px; */
  /* border: 1px solid #000; */
  /* align-items: stretch; */
  /* position: absolute; */
  /* top: 50%;
  transform: translateY(-50%); */
  /* margin:auto; */
  /* align-items: center;
  justify-content: center; */
}

/* https://blog.logrocket.com/13-ways-to-vertical-center/ */

.grid-container2 {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr;
  align-items: center;
  /* border: 5px solid #ffff00; */
}

.grid-container3 {
  display: grid;
  grid-template-columns: 20% 20% 60%;
  /* grid-template-columns: 1.5fr 1.5fr 1.5fr 1.5fr; */
  align-items: center;
  /* border: 5px solid #ffff00; */
}

.grid-container4 {
  display: grid;
  grid-template-columns: 20% 20% 40% 20%;
  /* grid-template-columns: 1.5fr 1.5fr 1.5fr 1.5fr; */
  align-items: center;
  /* border: 5px solid #ffff00; */
}

h1 {
  font-family: Arial, Helvetica, Helv, sans-serif;
  font-size: 3em;
  color: #000099;
  /* margin: 0;
    padding: 0.25em;
    font-size: 200%;
    color: navy */
}

.h1size {
  font-family: Arial, Helvetica, Helv, sans-serif;
  font-size: 3.72em;
  color: #000099;
  /* margin: 0;
    padding: 0.25em;
    font-size: 200%;
    color: navy */
}

.bold {
  font-style: bold;
  font-weight: bold;
}

h2 {
  font-family: Arial, Helvetica, Helv, sans-serif;
  font-style: bold;
  font-size: 1.75em;
  color: #000099;
}

h4 {
  font-weight: bold;
}

/* img {
    float: left;
    margin: 0 1em 1 em 1em;
} */

p {
  /* margin: 0;
    padding-bottom: 0.5em; */
  font-family: Arial, Helvetica, Helv, sans-serif;
  font-size: 1em; 
  color: #000099;
}

/* subtext - blue on blue */
.subtext {
  font-family: Arial, Helvetica, Helv, sans-serif;
  font-size: 1em;
  color: #000099;
  background-color: #ffffff;
  padding: 15px 15px 15px 15px;
  text-align: justify;
  text-justify: inter-word;
}

.subtext_black_inside_white {
  font-family: Arial, Helvetica, Helv, sans-serif;
  font-size: 1em; 
  color: #000099;
  background-color: #ffffff;
  padding: 15px 15px 15px 15px;
  text-align: justify; /** add justify content to this */
  text-justify: inter-word;
}

/* TODO - see if there is a way to call one css class from another one or inherit from it. this is just duplicate */
.subtext_black_white {
  font-family: Arial, Helvetica, Helv, sans-serif;
  font-size: 1em; 
  color: #000099;
  background-color: #ffffff;
  padding: 15px 15px 15px 15px;
  text-align: justify;
  text-justify: inter-word;
}

.subtext_bw {
  font-family: Arial, Helvetica, Helv, sans-serif;
  font-size: 1em;
  color: #000099;
  background-color: #ffffff;
  padding: 15px 15px 15px 15px;
  text-align: justify;
  text-justify: inter-word;
}

/* do away with this and use the above subtext black on white */
.aboutapi {
  font-family: Arial, Helvetica, Helv, sans-serif;
  font-size: 1em;
  color: #000099;
  background-color: #ffffff;
  padding: 15px 15px 15px 15px;
  text-align: justify; /** add justify content to this */
  text-justify: inter-word;
}

.product_ul_left {
  color: #000099;
  font-family: Arial, Helvetica, Helv, sans-serif;
  list-style-position: inside;
  text-align: center;
  /* text-align: left; */
  margin: 0 auto;
  display: table;
  list-style-type: circle;
}

.product_li_left {
  display: list-item;
  /* font-size: 14px; */
  /* margin-left: 25px; */
  text-indent: -1em;
  padding-left: 1em;
  /* list-style-type: disc; */
  list-style: disc inside none;
  margin-left: 10%;
}

.product_ul {
  color: #000099;
  font-family: Arial, Helvetica, Helv, sans-serif;
  list-style-position: inside;
  /* text-align: center; */
  /* text-align: left;
  margin: 0 auto;
  display: table; */
  list-style-type: circle;
}

.product_li {
  display: list-item;
  /* font-size: 14px; */
  /* margin-left: 10px;  */
  list-style-type: disc;
}

.product_ul_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.fontSize2 {
  font-family: Arial, Helvetica, Helv, sans-serif;
  color: #000099;
  font-size: 0.82em;
}

.fontSize3 {
  font-size: 1em;
  font-weight: bold;
}

.fontSize4 {
  font-size: 1.13em;
  font-weight: bold;
}

.fontSize5 {
  font-size: 1.5em;
  font-weight: bold;
}

blockquote {
  font-family: Arial, Helvetica, Helv, sans-serif;
  font-size: 1em;
  color: #000099;
}

a:link {
  background: none;
  color: #ffffff;
  font-family: "Arial";
  font-size: 1.5em;
  text-decoration: underline;
}

a:visited {
  background: none;
  color: #ffffff;
  font-family: "Arial";
  font-size: 1.5em;
  text-decoration: underline;
}

td {
  text-align: justify;
  color: #000099;
  font-family: Arial, Helvetica, Helv, sans-serif;
  font-size: 1em;
}

.td_white {
  background: #ffffff;
  /* vertical-align: middle; */
  text-align: justify;
  color: #000099;
  font-family: Arial, Helvetica, Helv, sans-serif;
  font-size: 1em;
}

.titletext {
  font-weight: bold;
  font-size: xx-large;
  font-style: italic;
  color: #000099;
  font-family: Arial, Helvetica, sans-serif;
  /* border: 5px solid #ffff00; */
}

.logo {
  /* display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%; */
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* border: 5px solid #ffff00; */
}

.homepage_bottom_text {
  font-size: x-large;
  color: rgb(255, 255, 255);
  font-family: Arial, Helvetica, sans-serif;
  /* border: 5px solid #ffff00; */
}

.center {
  margin: auto;
  width: 60%;
  /* border: 5px solid #ffff00; */
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  /* position: relative;
  top: 50%;
  transform: translateY(-50%); */
}

.box {
  width: 100%;
  height: 100%;
  display: table;
  /* border: 5px solid #ffff00; */
}
.inner-box {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  /* border: 5px solid #ffff00; */
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically */
  position: absolute;
  top: 50%;
}

.products {
  /* box-sizing: border-box; */
  margin-left: auto;
  margin-right: auto;
  display: table;
}

/* Create two equal columns that floats next to each other */
.products_column {
  float: left;
  width: 50%;
  padding: 10px;
  /* background: #0099ff; */
  /* height: 300px; Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.products_row:after {
  content: "";
  display: table;
  clear: both;
}

.product_li a:link {
  background: none;
  color: #ffffff;
  font-family: "Arial";
  font-size: 1em;
  text-decoration: underline;
}

.product_li a:visited {
  background: none;
  color: #ffffff;
  font-family: "Arial";
  font-size: 1em;
  text-decoration: underline;
}

@-webkit-keyframes fade-in {
  from {
    opacity: 1;
    top: 0px;
  }
  to {
    opacity: 0;
    top: -5px;
  }
}
.text-animated-one {
  display: inline;
  position: relative;
  /* top:0px; */
  -webkit-animation: fade-in 3s infinite;
}
.text-animated-two {
  opacity: 0;
  display: inline;
  position: relative;
  /* margin-left:-56px; */
  -webkit-animation: fade-in 3s infinite;
  -webkit-animation-delay: 3s;
}

.aggettivi {
  display: inline;
  width: 100px;
  height: 100px;
}

body {
  font-family: Arial;
  color: #000099;
}

.left,
.right {
  height: 44%;
  width: 50%;
  position: fixed;
  overflow-x: hidden;
  padding-top: 20px;
}
.left {
  left: 0;
  background-color: #0099ff;
}
.right {
  right: -10%;
  background-color: #0099ff;
}

/* Creates a new stacking context on the header */
#header {
  position: relative;
}

/* Positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

.header2 {
  display: table-cell;
  vertical-align: bottom;
}