html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
} 

#container {
    /* height: auto; */
    border: solid 0px black;
    min-height: 97vh;
    width: 100%;
    margin: auto;
}

.layoutFirstRow {
    display: flex;
    flex-direction:row;
    border: solid 0px black;
    width: 100%;
    padding-left: 60px;
    padding-right: 50px;
    height: 60px;
    margin: 0px auto;
    font-family: 'Karla', sans-serif;
    justify-content: space-between;
    background-color: #ffffff;
    padding-top: 0px;
    align-items: center;
    border-bottom: solid 1px #eaeef4;
    position: fixed;
    opacity: 0.95;
    z-index: 1000;
  }

.layoutSecondRow {
    display: flex;
    display: none;
    flex-direction:row;
    width: 100%;
    min-height: 3vh;
    height: auto;
    border: solid 0px blue;
    background-color: #ffffff;
}

.layoutThirdRow {
  display: flex;
  flex-direction: row;
  width: 100%;
  background-color: #ffffff;
  min-height: 35vh;
  height: auto;
  margin: auto;
  border: solid 0px red;
  /* padding-top: 60px; asd asda asdad asda asda asda asdas asd */
  position: relative;
  justify-content: center;
}

.layoutFourthRow {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: auto;
  border: solid 0px green;
  align-items: center;
  justify-content: space-evenly;
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #ffffff;
  margin-top: 0px;
  margin-top: 180px;
  margin-bottom: 200px;
  /*Testing purposes asd*/
}

.layoutFifthRow {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 35vh;
  height: auto;
  margin: auto;
  background-color: #ffffff;
  border: solid 0px blue;
  margin-top: 30px;
}

.layoutSixthRow {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 35vh;
  height: auto;
  margin: auto;
  background-color: #ffffff;
  border: solid 0px blue;
  /* padding: 25px; */
  /* padding-top: 30px; */
  /* padding-bottom: 30px;*/
  margin-top: 10px;
  border-radius: 0px;
  display: none;
}

.firstRowItem1 {
    align-content: center;
}

.firstRowItem2 {
    display: flex;
}

.firstRowItem2-1 {
    align-content: center;
}

.firstRowItem2-2 {
    align-content: center;
}

.firstRowItem3 {
    
}

.tipperLogo1 img {
  height: 2.75em;
  padding-bottom: 0px;
}

.tipperLogo2 {
  padding: 7px;
  padding-left: 15px;
}

.tipperLogo2 img {
    height: 50px;
}

* {box-sizing:border-box}

/* SLIDESHOW 1 STYLES*/

/* Slideshow container */
.slideshow-container {
  position: relative;
  width: 100%;
  margin: auto;
  padding-top: 0px;
}

/* Hide the images by default */
.mySlides {
  border-radius: 0px;
  overflow: hidden;
  height: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  display: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  display: none;
}

/* The dots/bullets/indicators */
.dotsContainer {
  width: 100px;
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  /* top: 350px; */
  /* left: 0; */
  bottom: 20px;
  justify-self: anchor-center;
  /* right: 0; */
  margin-inline: auto;
}

.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  margin: 0 2px;
  background-color: #bbb;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  /*background-color: #717171;*/
  width: 30px;
  border-radius: 10px;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* SECOND DOTS ROW (Avatars) */

.avatarsContainer {
  width: 600px;
  display: flex;
  justify-content: space-evenly;
  display: none;
}

.avatar {
  cursor: pointer;
  height: 135px;
  width: 104px;
  margin: 0 2px;
  background-color: #bbb;
  display: inline-block;
  transition: background-color 0.6s ease;
  border-radius: 10px;
  overflow: hidden;
}

.active, .avatar:hover {
  /*background-color: #717171;*/
}

.menuButtonDiv {
  display: flex;
  align-items: center;
}

.menuButtonAnchor {
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 2px;
  height: 30px;
  font-size: 12px;
  border-radius: 10px;
  border: solid 1.5px darkgray;
  margin-right: 25px;
  cursor: pointer;
  align-content: center;
}

a#joinMailingListButton {
  border: solid 2px #6434b0;
  color:#6434b0;
  font-weight: bold;
}

.menuButtonAnchor:hover {
  border: solid 1px rgb(80, 1, 80);
  color: rgb(80, 1, 80);
}

.contact {
  padding-left: 10px;
  padding-right: 20px;
  padding-top: 1px;
  height: 30px;
  font-size: 14px;
  border-radius: 10px;
  border: solid 1px darkgray;
  /* align-content: center; */
  margin-right: 25px;
  cursor: pointer;
  align-content: center;
}

.avatarImg {
  width: inherit;
  height: auto;
}

/* SLIDESHOW 2 STYLES*/

/* Slideshow container */
.slideshow-container2 {
  position: relative;
  width: 100%;
  margin: auto;
}

/* Hide the images by default */
.mySlides2 {
  border-radius: 0px;
  overflow: hidden;
  height: auto;
}

/* Next & previous buttons*/
.prev2, .next2 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  display: none;
}

/* Position the "next button" to the right */
.next2 {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev2:hover, .next2:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text2 {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext2 {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  display: none;
}

/* The dots/bullets/indicators */
.dotsContainer2 {
  width: 100px;
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  /* top: 350px; */
  /* left: 0; */
  bottom: 20px;
  justify-self: anchor-center;
  /* right: 0; */
  margin-inline: auto;
  display: none;
}

.dot2 {
  cursor: pointer;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  margin: 0 2px;
  background-color: #bbb;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot2:hover {
  /*background-color: #717171;*/
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

.sixthRowRightSide {
  padding-left:44px;
  width:38%;
  display: none;
}

/* SLIDESHOW 3 STYLES */

/* Slideshow container */
.slideshow-container3 {
  position: relative;
  width: 100%;
  margin: auto;
}

/* Hide the images by default */
.mySlides3 {
  display: none;
  border-radius: 0px;
  overflow: hidden;
  height: auto;
}

/* Next & previous buttons */
.prev3, .next3 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  display: none;
}

/* Position the "next button" to the right */
.next3 {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev3:hover, .next3:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text3 {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext3 {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  display: none;
}

/* The dots/bullets/indicators */
.dotsContainer3 {
  width: 100px;
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  /* top: 350px; */
  /* left: 0; */
  bottom: 20px;
  justify-self: anchor-center;
  /* right: 0; */
  margin-inline: auto;
  display: none;
}

.dot3 {
  cursor: pointer;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  margin: 0 2px;
  background-color: #bbb;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot3:hover {
  /*background-color: #717171;*/
}

.footer {
  display: flex;
  flex-direction:row;
  width: 100%;
  background-color: #7f13e9;
  min-height: 35vh;
  height: auto;
  margin:auto;
  border: solid 0px red;
  justify-content: center;
  align-items: center;
  margin-top: 150px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.footerLink {
  text-decoration: none;
  color: black;
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
}

/*FIRST SLIDER WATCH BUTTON*/

#bannerWatchButton {
  position: absolute;
  bottom: 70px;
  left: 110px;
  width: 100px;
  font-size: 14px;
  color: #ffffff;
  height: auto;
  padding: 8px;
  /* background-color: transparent; */
  /* background-image: linear-gradient(transparent, #0b031f); */
  border-radius: 6px;
  /* background-color: #090a1638; */
  /* background-image: linear-gradient(transparent, #151618); */
  /* opacity: 0.9; */
  border: solid 3px #ffffff;
  font-family: Arial Rounded MT Bold, Helvetica Rounded, Arial, sans-serif;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
}

@keyframes fader-in {
  from {
    opacity:0;
  }
  to {
    opacity: 1; /*jhjh asdas asdsad asda asda*/
  }

}

@keyframes fader-in-text {
  from {
    opacity:0;
    margin-bottom:-80px;
  }
  to {
    opacity: 1; /*jhjh asdas asdsad asda asda*/
    margin-bottom: 0px;
  }

}

.slideshow-container2 img {
  width:100%;
}

.hero {
  width:100%;
}

.hero.in-view {
  animation: fader-in 2s ease;
}

.headerTextContainer {
  height: inherit;
  border: solid 0px red;
  display: flex;
  flex-direction: column;
  width: 700px;
  justify-content: center;
  height: 200px;
}

.headerTextContainer.in-view {
  animation: fader-in-text 3s ease;
}

.headerText {
  font-size: 38px;
  font-size: 60px;
  font-weight: bold;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  /* border: solid 2px yellow; */
  display: flex;
  height: max-content;
  margin: 0px;
  line-height: 44px;
  /* margin-left: -50px; */
  z-index: 1;
  line-height: 1.0834933333;
  font-weight: 600;
  letter-spacing: -0.003em;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  width: 552px;
}
.headerText.in-view {
  animation: fader-in-text 3s ease;
}

.copyTextContainer {
  height: auto;
  border:solid 2px red;
  display: flex;
  width: 50%;
}

.copyText {
  font-size: 16px;
  font-weight: normal;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  border: blue solid 0px;
  display: flex;
  margin-top: 15px;
  width: 552px;
}
.copyText.in-view {
  animation: fader-in-text 3s ease;
  animation-delay: 1.5s;
}

.tipperLogo3 {
  padding: 7px;
  padding-left: 15px;
}

.tipperLogo3 img {
    height: 50px;
}

.logoHeaderContainer {
  display: flex;
    /* height: 155px; */
    /* overflow: hidden; */
  height: 200px;
    /* overflow: initial;*/
  justify-content: center;
  flex-direction: column;
}

.logoHeader {
  height: 182px;
  height: 301px;
  margin-left: -53px;
  margin-top: -16px;
  z-index: 1;
  display: none;
}

/*Jar mask for graphic*/
.videoJarMask {
/*   -webkit-mask-image: url(../images/tips.png);
  mask-image: url(../images/tips.png);
  mask-repeat: no-repeat;  */
  display: flex;
  align-items: center;
  align-self: center;
  /* justify-content: center; */
  height: 385px;   
  width: auto;
  /* margin: auto;*/
}

.svgElement {
  height: inherit;
}

.maskImage {
  height: inherit;
}

.mask1 {
  mask-image: url(../images/tipper_jar_logo_black.png);
  mask-repeat: no-repeat; 
  mask-size: 95%;
}

.mask2 {
  display:none;
}

.tip_jar_logo_live {
  height: max-content;
  width: 560px;
}

.layoutEighthRow {
  justify-content: center;
  display: flex;
  width: 100%;
  display: none;
}

.mainVideo {
  width: 100%;
  height: auto;
  border-bottom: solid 0px red;
  margin-top: 0px;
}

.layoutFourthRow2 {
  flex-direction: column;
}

#jarVideo {
  width: 280px; /* */
  height: auto;
}

#bannerWatchButton2 {
  position: absolute;
  bottom: 40px;
  left: -webkit-calc((100% / 2) - 50px);
  width: 100px;
  font-size: 14px;
  color: #ffffff;
  height: auto;
  padding: 8px;
  /* background-color: transparent; */
  /* background-image: linear-gradient(transparent, #0b031f); */
  border-radius: 6px;
  /* background-color: #090a1638; */
  /* background-image: linear-gradient(transparent, #151618); */
  /* opacity: 0.9; */
  border: solid 3px #ffffff;
  font-family: Arial Rounded MT Bold, Helvetica Rounded, Arial, sans-serif;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
}

.fifthRowTopHalf {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 95px;
  margin-bottom: 95px;
}

.fifthRowLeftSide {
  display: flex;
  flex-direction: column;
  padding-right:80px;
  width:auto;
}

.formLabel {
  display: block;
  font-size:12px;
}

.applyHeaderText {
  font-size: 38px;
  font-size: 60px;
  /* border: solid 2px yellow; */
  display: flex;
  height: max-content;
  margin: 0px;
  line-height: 44px;
  /* margin-left: -50px; */
  z-index: 1;
  line-height: 1.0834933333;
  font-weight: 600;
  letter-spacing: -0.003em;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  width: 375px;
}

.applyBodyText {
  width: 380px;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  margin-top: 10px;
}

.fifthRowRightSide {
  width: 290px;
}

.formRow {
  width: 100%;
  margin-bottom: 30px;
}

.formTextBox {
  width: 80%;
  padding: 10px;
  font-size: 16px;
  border-radius: 6px;
  border: solid 1px lightgray;
}

.formLabel {
  display: block;
  font-size: 16px;
  line-height: 1.0834933333;
  font-weight: 600;
  letter-spacing: -0.003em;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 7px;
}

#creatorApplySubmitButton {
  display: block;
  border: solid 1px black;
  padding: 10px;
  width: 80%;
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
  line-height: 1.0834933333;
  font-weight: 600;
  letter-spacing: -0.003em;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
}

.fifthRowBottomHalf {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  margin-top: 120px;
  display: none;
}

.creatorThumbnailImg {
  width:100%;
  height:auto;
  border-radius: 12px;
}

.formCheckboxRow {
  display: flex;
  width: 170px;
  align-items: center;
  padding-bottom: 4px;
  padding-top: 4px;
  border-bottom: solid 1px lightgray;
}

.checkBoxImg {
  width:40px;
  height: 40px;
  border-radius: 8px;
}

.checkBoxLabelDiv {
  display: block;
  padding-left: 10px;
  padding-right: 10px;
  letter-spacing: -0.003em;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}

.checkBoxDiv {
  margin-left: auto;
}

.fifthRowThirdColumn {
  display: flex;
  flex-direction: column;
  width:250px;
}

.checkBoxImgDiv {
  display: flex;
}

.formLabelCategories {
  display: block;
  font-size:12px;
  width: 265px;
  line-height: 1.0834933333;
  font-weight: 600;
  letter-spacing: -0.003em;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#bannerWatchButton3 {
  position: absolute;
  bottom: 40px;
  left: -webkit-calc((100% / 2) - 50px);
  width: 100px;
  font-size: 14px;
  color: #ffffff;
  height: auto;
  padding: 8px;
  border-radius: 6px;
  border: solid 3px #ffffff;
  font-family: Arial Rounded MT Bold, Helvetica Rounded, Arial, sans-serif;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
}

.featureRow {
  display: flex;
  width: 170px;
  align-items: center;
  padding-bottom: 4px;
  padding-top: 4px;
  border-bottom: solid 1px lightgray;
}

.featureImg {
  width:40px;
  height: 40px;
  border-radius: 8px;
}

.featureDiv {
  display: block;
  padding-left: 10px;
  padding-right: 10px;
  letter-spacing: -0.003em;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}

.featureImgDiv {
  display: flex;
}

.profileImagesRow {
  display: flex;
  width: 100%;
  margin-top: 20px;
  justify-content: space-between;
}

.profileImg {
  height: 110px;
  width: auto;
}

/*CAROUSEL STYLES*/

.carousel {
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
  overflow: hidden;
  display: flex;
  > * {
    flex: 0 0 100%;
  }
}

.card {
  width: 100%;
  color: white;
  border-radius: 24px;
  /*box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0;*/
  padding: 0px;
  font-size: xx-large;
  justify-content: center;
  align-items: center;
  min-height: 200px;

  &:nth-child(1) {
    /* background: #7958ff; */
  }

  &:nth-child(2) {
    /* background: #5d34f2; */
  }

  &:nth-child(3) {
    /* background: #4300da; */
  }
}

/* Group the cards for better structure. */
.group {
  display: flex;
  gap: 34px;
  /* Add padding to the right to create a gap between the last and first card. */
  padding-right: 20px;
  will-change: transform; /* We should be nice to the browser - let it know what we're going to animate. */
  animation: scrolling 20s linear infinite;
}

@keyframes scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/*FEATURES STYLES*/

.featuresSection {
  display: flex;
  width: 90%;
  flex-direction: column;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 180px;
  margin-bottom: 180px;
}

.featuresCardsRow {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 70px;
}

.featureCard {
  position: relative;
  height: auto;
  width: auto;
}

.featureCardImg {
  width: 300px;
  height: auto;
  border-radius: 15px;
}

.featureCardIconImg {
  position: absolute;
  top: 21px;
  left: 16px;
  width: 25px;
}

.featureCardCaption {
  position: absolute;
  top: 25px;
  left: 45px;
  letter-spacing: -0.003em;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 24px;
  color: white;
  font-weight: 600;
}

.featuresHeaderCopy {
  letter-spacing: -0.003em;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 50px;
  font-weight: 600;
}

.featuresHeaderSubcopy {
  font-size: 16px;
    font-weight: normal;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border: blue solid 0px;
    display: flex;
    margin-top: 15px;
    width: 552px;
}

.secondCaption {
  color: black;
}

.footerLink {
  color:white;
}

.footerLeft {
  width:50%;
}

@media only screen and (max-width: 4000px) {
  body > * {
    display:none;
  }

  body {
    background-image: url('../images/tipper_jar_logo_icon_white.png');
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    background-position-y: center;
    background-position-x: center;
    background-color: #07f596;
    background-size: 35%;
  }
}