* {
  box-sizing: border-box; 
}

body {
  background-color: #c0c0c0;
  color:  #202020;
  font-family: Helvetica;
  font-size: 105%;  
  font-weight: 200;
  line-height: 1.2;

  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;  
  cursor: default;
}

h1 {
  color: #000000;
  font-size: 150%;
}

h2 {
  color: #000000;
  font-size: 125%;
}

h3 {
  color: #000000;
  font-size: 115%;
}

a:link {
  /*color:  #d0a030;*/
  color:  #505050;
}

a:visited {
  /*color:  #d0a030;*/
  color:  #505050;
}

a:hover {
  color:  #f0c000;
}

a:active {
  color:  #f0c000;
}


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



.outerrows {
  width: 100%;
  box-sizing: border-box; 
  align-self: center;
  /*padding: 3%; */
  padding-top: 10px;
  padding-right: 3%;
  padding-bottom: 3%;
  padding-left: 3%;  
}



/*
 * GENERIC row styles
 */

.genericrow {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 1;
  justify-content: center;  /* x center */
  align-items: center;      /* y center */
  position: relative;
  /*background: gray;*/
  flex-wrap: wrap;
}

.genericrowLeft {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;  /* x left */
  align-items: center;      /* y center */
  position: relative;
  text-align: left;
  /*background: gray;*/
  flex-wrap: wrap;
}


.genericrowTop {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 1;
  justify-content: center;  /* x center */
  align-items: flex-start;  /* y top */
  position: relative;
  /*background: gray;*/
  flex-wrap: wrap;
}



.genericcol20 {
  flex: 0 1 auto;
  position: relative;
  width: 20%;
  padding: 20px;
  /*background: gray;*/
}

.genericcolcenter20 {
  flex: 0 1 auto;
  position: relative;
  width: 20%;
  padding: 20px;
  /*background: gray;*/

  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;  
}


.genericcol30 {
  flex: 0 1 auto;
  position: relative;
  width: 30%;
  padding: 20px;
  /*background: gray;*/
}

.genericcolcenter30 {
  flex: 0 1 auto;
  position: relative;
  width: 30%;
  padding: 20px;
  /*background: gray;*/

  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;  
}

.genericcol40 {
  flex: 0 1 auto;
  position: relative;
  width: 40%;
  padding: 20px;
  /*background: gray;*/
}

.genericcolcenter40 {
  flex: 0 1 auto;
  position: relative;
  width: 40%;
  padding: 20px;
  /*background: gray;*/

  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;  
}

.genericcol50 {
  flex: 0 1 auto;
  position: relative;
  width: 45%;
  padding: 20px;
}

.genericcolcenter50 {
  flex: 0 1 auto;
  position: relative;
  width: 45%;
  padding: 20px;

  display: flex;
  flex-direction: column;
  justify-content: center;  /* x center */
  align-items: center;      /* y center */
  /*background: gray;*/
}

.genericcolcenter50expand {
  flex: 0 1 auto;
  position: relative;
  padding: 20px;

  display: flex;
  flex-direction: column;
  justify-content: center;  /* x center */
  align-items: center;      /* y center */
  /*background: gray;*/
  flex-wrap: wrap;
}


.genericcol60 {
  flex: 0 1 auto;
  position: relative;
  width: 60%;
  padding: 20px;
  /*background: gray;*/
}

.genericcolcenter60 {
  flex: 0 1 auto;
  position: relative;
  width: 60%;
  padding: 20px;

  display: flex;
  flex-direction: column;
  justify-content: center;  /* x center */
  align-items: center;      /* y center */
  /*background: gray;*/
}

.genericcol80 {
  flex: 0 1 auto;
  position: relative;
  width: 80%;
  padding: 20px;
  /*background: gray;*/
}

.genericcol80Left {
  flex: 1 1 auto;
  /*
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  
  align-items: center;  
  */
  position: relative;
  width: 80%;
  padding: 20px;
  /*background: gray;*/
}

.genericcolcenter80 {
  flex: 0 1 auto;
  position: relative;
  width: 80%;
  padding: 20px;

  display: flex;
  flex-direction: column;
  justify-content: center;  /* x center */
  align-items: center;      /* y center */
  /*background: gray;*/
}

.tinyfont {
  font-size: smaller;
  font-weight: lighter;
  text-align: center;
}


/*
 * Actual HTML header/footer top
 */

.topbar {
  width:  100%;
  /*height: 100px;*/
  display: flex;
  flex-direction: column;
  justify-content: center;  /* x center */
  align-items: center;      /* y center */
  background: #ffffff;
  border-radius: 10px;
  margin: 0px;
  padding: 5px;
}

.topbarimg {
  max-width: 30%;
  height:  auto;
  margin: 0px;
  padding: 0px;
}

.socialimg {
  width: 30px;
  height: auto;
  padding: 6px;
  border-radius: 0px;
  vertical-align:middle;
}  


.socialbar {
  width:  100%;
  /*height: 100px;*/
  display: flex;
  flex-direction: column;
  justify-content: center;  /* x center */
  align-items: center;      /* y center */
  background: #ffffff;
  border-radius: 10px;
  padding: 5px;
}

.youTubeEmbed {

  width: 50vw;
  height: 28vw;
}