/* responsive canvas */


/* flexbox containers */

.container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-flow: row wrap;
  /* color: #161616; */
  /* background-color: rgba(255, 255, 255, 0.15); */
  /* padding: 20px; */
  margin: auto;
  /* margin-top: 60px; */
  align-content: space-around;
  align-items: center;
  justify-content: space-around;
}

/* ?? when using this? */

.container-column {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  /* flex: 1 0 auto; */
  /* background-color: rgba(255, 255, 255, 0.15); */
  padding: 20px;
  margin: 10px 10px 20px 10px;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin-top: 80px;
  height: 100%;
}

.flex-item_3 {
  margin: 15px;
  /*align-self: auto;
  flex: 1 1 25%;*/
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 1 1 25%;
  -ms-flex: 1 1 25%;
  flex: 1 1 25%;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}

.left {
  margin-right: auto;
}

.right {
  margin-left: auto;
}

.full {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 100%;
  flex: 0 1 100%;
}

.half {
  -webkit-box-flex: 0;
  -ms-flex: 0 2 calc(50% - 20px);
  flex: 0 2 calc(50% - 20px);
}

.third {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 calc(33.333333% - 20px);
  flex: 0 1 calc(33.333333% - 20px);
}

.fourth {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 calc(25% - 20px);
  flex: 0 1 calc(25% - 20px);
}

.fifth {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 calc(20% - 20px);
  flex: 0 1 calc(20% - 20px);
}

.sixth {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 calc(16.666666% - 20px);
  flex: 0 1 calc(16.666666% - 20px);
}

.full {
  width: 100%;
  /* IE */
  flex: 1
}

.two-thirds {
  width: 64%;
  /* IE */
  flex: 1 1 calc(65% - 25px);
}

.two-thirds-fixed {
  width: 65%;
  /* IE */
  flex: 0 1 calc(66% - 25px);
}

.half-fixed {
  width: 49%;
  /* IE */
  flex: 0 2 calc(50% - 25px);
}

.third-fixed {
  width: 32.2%;
  /* IE */
  flex: 0 1 calc(33.333333% - 25px);
}

.fourth-fixed {
  width: 24%;
  /* IE */
  flex: 0 1 calc(25% - 25px);
}

.fifth-fixed {
  width: 19.5%;
  /* IE */
  flex: 0 1 calc(20% - 25px);
}

.sixth-fixed {
  width: 15.7%;
  /* IE */
  flex: 0 1 calc(16.666666% - 25px);
}

.image {
  width: 100%;
  height: auto;
}

.align-right {
  justify-content: flex-end;
  align-self: flex-end;
}

.align-left {
  justify-content: flex-start;
  align-self: flex-start;
  text-align: left;
}

/*flexbox for setting sticky footer*/

.main-content {
  /* margin: 0 8%; */
  margin: 0;
  /* By setting flex-grow to 1, the main content will take up
     all of the remaining space on the page.
     The other elements have flex-grow: 0 and won't contest the free space. */
  /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
}

.main-content_homePage {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  /* flex: 1 0 auto; */
  /* background-color: rgba(255, 255, 255, 0.15); */
  padding: 0px;
  /* margin: 10px 10px 20px 10px; */
  align-content: center;
  align-items: center;
  justify-content: center;
  /* margin: 0 8%; */
  margin: 0;
  /* By setting flex-grow to 1, the main content will take up
     all of the remaining space on the page.
     The other elements have flex-grow: 0 and won't contest the free space. */
  /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 1 0 auto;
}

footer {
  /* Like the header, the footer will have a static height - it shouldn't grow or shrink.  */
  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
  display: none;
  flex: 0 0 auto;
  align-self: flex-end;
  width: 100%;
  text-align: right;
  padding: 10px 10px 10px 0px;
  font-size: 12px;
}