@font-face {
  font-family: 'Graphik Web';
  src: url('Graphik-Semibold-Web.woff2') format('woff2'), url('Graphik-Semibold-Web.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
}
.Graphik-Semibold-Web {
  font-family: 'Graphik Web';
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: 'Graphik Web';
  src: url('Graphik-Regular-Web.woff2') format('woff2'), url('Graphik-Regular-Web.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}
.Graphik-Regular-Web {
  font-family: 'Graphik Web';
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: 'Graphik Web';
  src: url('Graphik-Light-Web.woff2') format('woff2'), url('Graphik-Light-Web.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
}
.Graphik-Light-Web {
  font-family: 'Graphik Web';
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
}
b {font-weight: 600;}
* {
  margin: 0;
  padding: 0;
}
.bg {
  z-index:0;
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}
.bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}
html, body{
  height:100%;
  width:100%;
  font-size:16px;
  overflow:hidden;
  background: #4885D5;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}
.page {
  display: flex;
  height: 100vh;
  flex-direction: column;
  margin: 0;
}
.content {
  z-index:1;
  display: flex;
  flex: 0 0 80vh;
  padding: 0;
  margin: 0;
  justify-content: center;
}
.contentMain {
  flex: 80% 0 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.tooltip {
  cursor:help;
}
.tooltip span {
  margin-left: -999em;
  position: absolute;
}
.tooltip:hover span {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeIn;
  position: absolute;
  left: 0em;
  top: 3em;
  z-index: 99;
  margin-left: 0px;
  width: 20em;
  background: rgba(17,17,17, 0.9);
  padding: 40px;
  border-radius: 4px;
  box-shadow: 0px 21px 61px -20px rgba(0,0,0,.9);
}
header {
  flex: 0 0 10vh;
}
.uc {
  flex: 0 0 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.ucleft {
  flex: 1 0 50%;
}
.ucleft img {
  width:300px;
}
.ucright {
  flex: 1 0 50%;
  justify-content: end;
  display: flex;
}
.middlecontent {
  flex: 0 0 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.middleleft {
  flex-direction: column;
  display: flex;
  justify-content: center;
  flex: 1 0 35%;
}
.middleright {
  flex: 1 0 65%;
  justify-content: center;
  align-items: end;
  flex-direction: column;
  display: flex;
  margin-top: 60px;
  position: relative;
}
.lowercontent {
  flex: 0 0 1;
  display: grid;
  align-content: flex-end;
}
#logos {
  margin-top:20px;
}
video {
  border-radius: 2px;
  box-shadow: 0px 0px 0px 8px #111,0px 21px 61px -20px rgba(0,0,0,.9)
}
.hover-1:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #B5DA36;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s;
}
.hover-1:hover:after {
  transform-origin: bottom left;
  transform: scaleX(1);
}
a {
 transition: all .1s ease-in-out;
 text-decoration: none;
 display: inline-block;
  position: relative;
  color: #fff;
}
a:hover {
 text-decoration: none;
}
h1 {
 font-size:5rem;
 line-height: 5rem;
 color: #ffffff;
  margin-bottom: 36px;
}
h3 {
 font-size:2.25rem;
 line-height: 2.5rem;
 color: #ffffff;
  margin-bottom: 6px;
}
h5 {
 font-size:0.8rem;
 line-height: 2rem;
 color: #ffffff
}
p {
 font-size:1.0rem;
 line-height: 1.4rem;
 color: #ffffff;
}
.banner p {
  color: rgb(6,169,220);
}
.banner {
 font-size:1.2rem;
 line-height: 35px;
 color: rgb(6,169,220);
 background: #06a7db;
 margin-top:10px;
 padding: 4px 8px;
}
.topRight {
 color:#ffffff;
 text-decoration: none;
 font-size:1.3rem;
  padding: 20px 10px 20px 10px;
  margin-left: 25px;
  line-height: 1.3rem;
}
.topRight:hover {
 text-decoration: underline;
}
.companies {
 color:#ffffff;
 text-decoration: none;
 font-size:1.3rem;
}
.companies:hover {
 text-decoration: none;
}
.fadeIn {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeIn;
}
@keyframes fadeIn {
  from {
      visibility: visible;
      opacity: 0;
 }
  to {
      opacity: 1;
 }
}
.mobileonly {
 display: none;
}
/* START MOBILE STYLE */
@media (max-width: 820px) {
  .desktoponly {
      display: none;
 }
  .mobileonly {
      display:block;
 }
  html, body{
      height:100%;
      width:100%;
      font-size:16px;
      overflow-y:auto;
      overflow-x:hidden;
 }
  .middlecontent {
      flex-direction: column;
      margin-top: 20px;
 }
  .contentMain {
      flex: 80% 0 1;
      flex-direction: column;
 }
  .content {
      flex:0;
 }
  .contentMain {
      flex-direction: column;
      flex: 100% 0 1;
      flex-wrap: inherit;
 }
 
.uc {
  flex: 0 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
  .ucleft {
      box-shadow: -40px 61px 61px -20px rgba(0,0,0,0.3);
      text-align: start;
      padding-left: 30px;
      padding-right: 30px;
      flex: 0;
      position: fixed;
      top: 0px;
      z-index: 99;
      width: 100%;
      padding-top: 20px;
      padding-bottom: 20px;
      background: #06A2DC;
 }
  .ucleft img {
      width:300px;
 }
  .uccenter {
      flex:0;
 }
  .ucright {
      display: block;
      left:0;
      background: #0D81E1;
      box-shadow: 0px -21px 61px -20px rgba(0,0,0,.2);
      flex:0;
      position: fixed;
      bottom: 0;
      width: 100%;
      z-index: 99;
 }
  #motivation {
      display: none;
 }
  .middlecontent {
      flex-wrap: wrap;
      margin-top: 80px;
      flex:0;
      padding:0px 30px 0px 30px;
 }
  .middleleft {
      flex: 1 0 0%;
 }
  .middleright {
      flex: 1 0 0%;
      padding-top:30px;
      padding-bottom:30px;
      margin-top:0px;
 }
  .middleright img {
      display: none;
 }
  .lowercontent {
      padding:0px 30px 0px 30px;
 }
  video {
      width: 100%;
      position: relative;
 }
  .topRight {
      margin-left:30px;
      padding: 20px 0px 20px 0px;
 }
  hr {
      border: none;
      border-top: 1px solid rgba(255,255,255,0);
      background-color: #fff;
      color: #fff;
      height: 0px;
      margin-top: 30px;
      margin-bottom: 30px;
 }
  h1 {
      font-size: 4rem;
      line-height: 3.8rem;
      color: #ffffff;
      margin-bottom: 30px;
 }
  h3 {
      font-size: 1.8rem;
      line-height: 3rem;
      color: #ffffff;
      margin-bottom: 6px;
 }
  h4 {
      font-size: 1.5rem;
      color:#fff;
 }
  .companies {
     font-size: 1.1rem;
 }
  #members {
     margin-top: 20px;    
     margin-bottom: 100px; 
 }
 .banner {
  font-size: 1.2rem;
  line-height: 35px;
  color: rgb(6,169,220);
  background: #ffffff;
  margin-top: 10px;
  padding: 4px 0px;
  position: fixed;
  top: 100px;
  z-index: 99;
  width: 100%;
  text-align: center;
  left: 0;
 }
}