/*BMO COLORS: https://www.color-hex.com/color-palette/36214 */

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #c0c0c0; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #aaaaaa; 
}
@font-face {
	font-family: Assistant;
	src: url(./Fonts/Assistant/Assistant-VariableFont_wght.ttf);
}

a {
  color: black;
}


body {
  margin: 0px;
  padding-top: 80px;
	font-family: Assistant;
  background-color: #d9ffea;
	font-size: 100%;
}

.ytVideo {
  width: 80vw;
  height: 45vw;
  margin-top: 20px;
}

h1 {
	text-align: center;
	padding: 30px 30px 30px 30px;
	font-size: 4vw;
}

h2 {
	text-align: center;
}

h3 {
	font-weight: normal;
}


.title {
  margin-top:20px;
  text-align: center;
  font: bold 5vw Assistant;
  color: #63bda4;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

footer {
	text-align: center;
	background-color: #63bda4;
  padding: 20px;
  height: 20px;
  margin-top: 100px;
  top: auto;
  bottom: 0;
  width: calc(100vw - 50px);
}

.frontImgContainer {
  margin-top: 20px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  display: none;
}

.frontImgContainer.active {
  display: flex;
}

.frontImg {
  width: 60vw;
  height: 40vw;
  object-fit: cover;
  object-position: center 30%;
  border: solid 2px black;
  border-radius: 20px;
}

#navbar {
	position: fixed;
  background-color: #63bda4;
  margin-top: 0px;
  margin-bottom: auto;
  top: 0px;
  width: 100vw;
  display: flex;
  height: 80px;
  align-items: center;
  z-index: 100;
}

#navimage {
  width: 120px;
  position: absolute;
  left: 50%;
  margin-left: -60px;
}

.hambar {
  width: 50px;
  height: 50px;
  padding: 10px;
  position: relative;
  cursor: pointer;
  margin-top: 5px;
}

.ham {
  transition: .5s;
  background-color: black;
  width: 50px;
  border-radius: 10px;
  height: 8px;
  position: absolute;
}

.ham.top{
  top: calc(75% - 8px);
}

.ham.mid{
  top: calc(50% - 8px);
  transition: .5s;
}

.ham.bot {
  top: calc(25% - 8px);
}

.hambar.active .ham.top{
  transition: .5s;
  transform: rotate(45deg);
  top: calc(50% - 8px);
}

.hambar.active .ham.mid {
  transition: .2s;
  opacity: 0;
}

.hambar.active .ham.bot {
  transition: .5s;
  transform: rotate(-45deg);
  top: calc(50% - 8px);
}

.lang {
  font: bold 15px Arial;
  right: 30px;
  left: auto;
  position: absolute;
}

.lang:hover {
  cursor: pointer;
}

.langLink {
  text-decoration: none;
  color: black;
}

.membersimg {
	max-width: 150px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 25px;
}

.links{
  opacity: 0%;
  margin-left: -100vw;
  margin-top: 240px;
  display: grid;
  grid-template-columns: calc(100vw/3) calc(100vw/3) calc(100vw/3);
  position: absolute;
  width: 100vw;
  background-color: #59aa93;
  column-gap: 0px;
  row-gap: 0px;
  transition: 0.2s;
  z-index: -1;
}

.links.active {
  transition: .4s;
  display: grid;
  grid-template-columns: calc(100vw/3) calc(100vw/3) calc(100vw/3);
  position: absolute;
  margin-top: 240px;
  width: 100vw;
  background-color: #59aa93;
  column-gap: 0px;
  row-gap: 0px;
  margin-left: 0;
  opacity: 100;
}

.link{
  transition: 0.2s;
  color: black;
  width: auto;
  text-align: center;
  padding: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
  font: bold 3vw Arial;
  height: 20px;
  z-index:-1;
}



.linkT {
  text-decoration: none;
}

.link:hover {
  transition: 0.2s;
  background-color: #4f9783;
  cursor: pointer;
}

.crewT {
  font: bold 30px Assistant;
  text-align: center;
  margin-top: 70px;
}

.peopleRow {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.person {
  display: flex;
	margin: auto;
  flex-direction: column;
  margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
}

.photo{
  width: 20vw;
  height: 26.66vw;
  display: grid;
}

.pfp{
  width: 20vw;
  height: 26.66vw;
  object-fit: cover;
}

.name{
  margin-top: 10px;
  width: 20vw;
  text-align: center;
	font: bold 11px Arial;
}

.subname{
	width:20vw;
	text-align: center;
  font-size: 10px;
}

.compdesc{
	padding-left: 12%;
	padding-right: 12%;
}

.quote {
  opacity: 0;
  position: absolute;
  width: 20vw;
  height: 26.66vw;
  color: white;
  transition: .5s;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
}

.quotebg{
  opacity: 0%;
  background-color: black;
  width: 20vw;
  height: 26.66vw;
  transition: .5s;
  z-index: -1;
  position: absolute;
}


.photo:hover > .quote >.quotebg {
  opacity: 75%;
  transition: 0.3s;
}

.photo:hover > .quote{
  opacity: 100%;
  transition: 0.3s;
  z-index: 50
}

.msg {
  width: 180px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 10px;
}

.msg.big {
  font-size: 8px;
}

.msg.medium {
  font-size: 7px;
}

.msg.small {
  font-size: 5px;
}

.leftimage {
	float: left;
	padding: 0 20px 20px 0;
}

.rightimage {
	float: right;
	padding: 0 0 20px 20px;
}

.top-row {
  display: flex;
  flex-direction: row;
}

.mid-row {
  display: flex;
  flex-direction: row;
  margin-bottom: 300px;
}

.bar {
  background-color: #263e0f;
  width: 40vw;
  height: 28px;
  margin-top: 20px;
  border-radius: 50px;
  margin-left: 20vw;
  border: 1px solid black;
      align-items: center;
  display: inline-flex;
  appearance: none;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#000000 0 -3px 0 inset;
  box-sizing: border-box;
  color: #4e801d;
  cursor: pointer;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 18px;
  user-select: none;
}

.bar:focus {
  box-shadow: #000000 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #000000 0 -3px 0 inset;
}

.bar:hover {
  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #000000 0 -3px 0 inset;
  transform: translateY(-2px);
}

.bar:active {
  box-shadow: #000000 0 0px 0px inset;
  transform: translateY(2px);
}

.button-30 {
  align-items: center;
  display: inline-flex;
  margin-left: calc(80vw - 30px);
  margin-top: 20px;
  position: absolute;
  appearance: none;
  background-color:#4d22b3;
  border-radius: 50%;
  border-width: 0px;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,black 0 -3px 0 inset;
  box-sizing: border-box;
  color: #874efe;
  cursor: pointer;
  height: 30px;
  width: 30px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 18px;
  user-select: none;
  text-align: right;
}

.button-30:focus {
  box-shadow: black 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, black 0 -3px 0 inset;
}

.button-30:hover {
  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, black 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-30:active {
  box-shadow: black 0 3px 7px inset;
  transform: translateY(2px);
}

.plusBtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 10vh;
  margin-left: calc(20vw + 30px);
  transition: transform .2s;
  margin-bottom: 4px;
  color: #8d8600;
}

.vertical {
  align-items: center;
  display: inline-flex;
  position: relative;
  appearance: none;
  background-color:#fff76b;
  border-width: 0px;
  width: 30px;
  height: 90px;
}

.horizontal {
  align-items: center;
  display: inline-flex;
  position: absolute;
  appearance: none;
  background-color:#fff76b;
  border-width: 0px;
  width: 90px;
  height: 30px;
}

.verticalS {
  align-items: center;
  display: inline-flex;
  margin-top: 10px;
  position: absolute;
  appearance: none;
  background-color:#c4bc00;
  border-width: 0px;
  width: 30px;
  height: 90px;
  z-index: -2;
  transition: transform .2s;
}

.horizontalS {
  align-items: center;
  display: inline-flex;
  margin-top: 10px;
  position: absolute;
  appearance: none;
  background-color:#c4bc00;
  border-width: 0px;
  width: 90px;
  height: 30px;
  z-index: -2;
    transition: transform .2s;
}

.verticalO {
  align-items: center;
  display: inline-flex;
  position: absolute;
  appearance: none;
  background-color:#000000;
  border-width: 0px;
  width: 92px;
  height: 32px;
  z-index: -1;
}

.horizontalO {
  align-items: center;
  display: inline-flex;
  position: absolute;
  appearance: none;
  background-color:#000000;
  border-width: 0px;
  width: 32px;
  height: 92px;
  z-index: -1;
}

.plusBtn:hover {
  transform:translateY(-2px);
}

.plusBtn:hover > .horizontalS {
  transform: translateY(2px);
}

.plusBtn:hover > .verticalS {
  transform: translateY(2px);
}

.plusBtn:active {
  transform: translateY(2px);
  transition: transform 0.1s;
}

.plusBtn:active > .horizontalS {
  transform: translateY(-3px);
}

.plusBtn:active > .verticalS {
  transform: translateY(-3px);
}

.triangle {
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 50px solid #53d5fd;
  position: absolute;
  margin-top: 80px;
  margin-left: calc(40vw - 80px);
  transition: transform .2s;
}

.triangleBtn:hover > .triangle {
  cursor: pointer;
  transform: translateY(-2px);
}

.triangle:active > .triangle{
  transform: translateY(2px);
}

.triangleBtn:hover > .triangleO {
  transform: translateY(-2px);
}

.triangleBtn:active > .triangle {
  transform: translateY(2px);
}

.triangleBtn:active > .triangleO {
  transform: translateY(2px);
}

.triangleBtn:active > .triangleS {
  height: 4px;
  margin-top: 131px;
}

.kioskTag {
  color: #008cb4;
  margin-top: 105px;
  margin-left: calc(40vw - 58.5px);
  position: absolute;
  transition: transform .2s;
}

.triangleBtn:hover > .kioskTag {
  transform: translateY(-2px);
}

.triangleBtn:active > .kioskTag {
  transform: translateY(2px);
}

.triangleO {
  border-left: 43.2px solid transparent;
  border-right: 43.2px solid transparent;
  border-bottom: 54px solid black;
  position: absolute;
  margin-top: 78px;
  margin-left: calc(40vw - 83px);
  z-index: -1;
  transition: transform .2s;
}

.triangleS {
  width: 82px;
  height: 6px;
  margin-top: 129px;
  margin-left: calc(40vw - 81px);
  position: absolute;
  background-color: #00a3d7;
  z-index: -2;
    transition: transform .2s;
}


.button-40 {
  align-items: center;
  display: inline-flex;
  margin-left: calc(85vw - 50px);
  margin-top: 170px;
  position: absolute;
  appearance: none;
  background-color:#00f900;
  border-radius: 50%;
  border: 1px solid black;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#4f7a28 0 -3px 0 inset;
  box-sizing: border-box;
  color: #0a9a0c;
  cursor: pointer;
  height: 50px;
  width: 50px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 15px;
  user-select: none;
}

.button-40:focus {
  box-shadow: #4f7a28 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #4f7a28 0 -3px 0 inset;
}

.button-40:hover {
  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #4f7a28 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-40:active {
  box-shadow: #4f7a28 0 0px 0px inset;
  transform: translateY(2px);
}


.button-50 {
  align-items: center;
  display: inline-flex;
  margin-left: calc(68vw - 90px);
  margin-top: 180px;
  position: absolute;
  appearance: none;
  background-color:#ff2600;
  border-radius: 50%;
  border: 1px solid black;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#b51a00 0 -3px 0 inset;
  box-sizing: border-box;
  color: #b51a00;
  cursor: pointer;
  height: 90px;
  width: 90px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 18px;
  user-select: none;
}

.button-50:focus {
  box-shadow: #b51a00 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #b51a00 0 -3px 0 inset;
}

.button-50:hover {
  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #b51a00 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-50:active {
  box-shadow: #b51a00 0 0px 0px inset;
  transform: translateY(2px);
}

.bot-row {
  margin-bottom: 100px;
}

.smallBarBtn.left {
  margin-top: -150px;
  margin-left: 20vw;
  width: 60px;
  height: 20px;
  background-color: #263e0f;
  position:absolute;
  border-radius: 15px;
  border: 1px solid black;
    align-items: center;
  display: inline-flex;
  appearance: none;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#000000 0 -3px 0 inset;
  box-sizing: border-box;
  color: #36395A;
  cursor: pointer;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 18px;
  user-select: none;
}

.smallBarBtn.right {
  margin-top: -150px;
  width: 60px;
  height: 20px;
  background-color: #263e0f;
  border-radius: 15px;
  position:absolute;
  margin-left: calc(20vw + 80px);
  border: 1px solid black;
    align-items: center;
  display: inline-flex;
  appearance: none;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#000000 0 -3px 0 inset;
  box-sizing: border-box;
  color: #36395A;
  cursor: pointer;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 18px;
  user-select: none;
}

.smallBarBtn:focus {
  box-shadow: #000000 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #000000 0 -3px 0 inset;
}

.smallBarBtn:hover {
  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #000000 0 -3px 0 inset;
  transform: translateY(-2px);
}

.smallBarBtn:active {
  box-shadow: #000000 0 0px 0px inset;
  transform: translateY(2px);
}

.hoverTag {
  position: absolute;
  
}

.shadowTag {
  position:absolute;
  margin-top: -5px;
}

/* stays at bottom */
@media screen and (min-width: 600px) {
  .button-40{
    margin-left: calc(80vw - 50px);
  }
}

@media screen and (min-width: 800px) {
  .link{
     font-size: 25px;
  }
  .button-40{
    margin-left: calc(75vw - 50px);
  }
    .person {
  display: flex;
	margin: auto;
  flex-direction: column;
  margin-top: 30px;
	margin-right: 30px;
	margin-left: 30px;
}

  .photo{
    width: 180px;
    height: 240px;
    display: grid;
  }
  
  .pfp{
    width: 180px;
    height: 240px;
    object-fit: cover;
  }
  
  .name{
    margin-top: 10px;
    width: 180px;
    text-align: center;
  	font: bold 15px Arial;
  }
  
  .subname{
  	width:180px;
  	text-align: center;
    font-size: 14px;
  }
  .compdesc{
	padding-left: 12%;
	padding-right: 12%;
}

  .quote {
    opacity: 0;
    position: absolute;
    width: 180px;
    height: 240px;
    color: white;
    transition: .5s;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .quotebg{
    opacity: 0%;
    background-color: black;
    width: 180px;
    height: 240px;
    transition: .5s;
    z-index: -1;
    position: absolute;
  }
  
  
  .photo:hover > .quote >.quotebg {
    opacity: 75%;
    transition: 0.3s;
  }
  
  .photo:hover > .quote{
    opacity: 100%;
    transition: 0.3s;
    z-index: 50
  }
  
  .msg {
    width: 180px;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .msg.big {
    font-size: 15px;
  }
  
  .msg.medium {
    font-size: 12.5px;
  }
  
  .msg.small {
    font-size: 10px;
  }
  h1 {
    font-size: 50px;
  }
}


.special {
	margin-top: 100px;
}