.videoContainer {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  z-index: -1;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.whiteBox {
  width: 100%;
  height: 100%;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 2rem;
  margin-top: 2rem;
}

.whiteBox h1 {
  font-size: 2rem;
  font-weight: normal;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.5;
}

.whiteBox span {
  color: var(--primary);
  /*text-shadow: 0px 0px 20px #000000;*/
  font-size: 2rem;
  font-family: 'Montserrat', sans-serif;
}

.products {
  padding-bottom: 1rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  overflow: hidden;
}

.product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 1rem;
}

.product:last-of-type {
  margin-bottom: 0;
}

.product-text {
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 2rem;
}

.product-text h2 span {
  font-family: 'PT Sans', sans-serif;
}

.product-image {
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.pb {
  background: var(--primary);
}

.pb__bg {
  background: url('../images/PosBill.jpg');
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.pb-buylocal {
  background: #cddb02;
}

.pb-phoenix {
  background: #005c53;
  color: #e6e6e6;
}

.pb-ss {
  background: #52b1b4;
}

.pb-sco {
  background: #de8932;
}

.pb-phoenix__bg {
  background: url('../images/products/phoenix-sumup.jpg');
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.pb-ss__bg {
  background: url('../images/products/self-service.jpg');
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.pb-sco__bg {
  background: url('../images/products/f-self-checkout-1415554804.jpg');
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.pb-buylocal__bg {
  background: url('../images/buylocal.jpg');
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.pb-mobile {
  background: #aff557;
}

.pb-mobile__bg {
  background: url('../images/mobile.jpg');
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.resigo {
  background: #2b468b;
  color: #e8e8e8;
}

.resigo__bg {
  background: url('../images/resigo.jpg');
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.timersson {
  background: #00bcbc;
  color: #e8e8e8;
}

.jumpbird {
  background: #e3e705;
  /* color: #e8e8e8; */
}

.jumpbird__bg {
  background: url('../images/jumpbird.jpg');
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.timersson__bg {
  background: url('../images/timersson.jpg');
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.calOUT {
  background: #611f69;
  color: #e8e8e8;
}

.calOUT_bg {
  background: url('../images/calOUT.jpg');
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  background-size: contain;
}

.textContainer {
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1.4rem;
}

.textContainer h2 {
  margin-bottom: 1rem;
}

.textContainer ul {
  margin-left: 1.5rem;
  margin-top: 1rem;
}

.textContainer a {
  color: #0051bb;
}

.textContainer a:hover {
  color: #003882;
}

.imageContainer {
  width: 100%;
  height: 400px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.image {
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.image__top {
  padding-top: 1rem;
}

.image__bottom {
  padding-bottom: 1rem;
}

.badgeContainer {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 100;
  text-decoration: none;
}

.badgeContainer:hover {
  text-decoration: none !important;
}

.badgeContainer img {
  max-width: 100px;
  filter: grayscale(0%);
}

.btn {
  position: relative;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 4px rgb(255, 255, 255);
  box-shadow: 0 0 4px rgb(255, 255, 255);
  background-color: #1a1a1a;
  color: #ecf0f1;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  text-align: left;
  display: block;
  width: 20rem;
  margin: 30px auto;
  padding: 1rem;
  overflow: hidden;
  border-width: 0;
  outline: none;
  -webkit-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}

.product .btn {
  text-align: center;
}

.btn:hover,
.btn:focus,
.btn a:hover {
  background-color: #e8e8e8;
  color: #1a1a1a;
  -webkit-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  cursor: pointer;
}

.btn > * {
  position: relative;
}

.btn:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0;
  padding-top: 0;
  border-radius: 100%;
  background-color: rgba(26, 26, 26, 0.2);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.btn:active:before {
  width: 120%;
  padding-top: 120%;
  -webkit-transition: width 0.2s ease-out, padding-top 0.2s ease-out;
  -o-transition: width 0.2s ease-out, padding-top 0.2s ease-out;
  transition: width 0.2s ease-out, padding-top 0.2s ease-out;
}

.btn span {
  font-family: 'PT Sans', sans-serif;
}

/* Styles, not important */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.grayscale {
  filter: grayscale(100%);
}

.endark {
	filter: brightness(.75);
  max-height: 850px;
}

.header-image-container img {
  width: 100%;
}

.overlay {
  display: none;
  position: fixed;
  left: 3rem;
  top: 25%;
  width: 22rem;
  background-color: rgba(44, 54, 69, 0.918);
  border: 2px solid #fff;
  padding: 1rem 2rem;
  z-index: 2;
}

.overlay h4 {
  font-size: 1.5rem;
  color: var(--primary);
  margin: 1rem 0;
}

.overlay p {
  color: #fff;
  margin: 1rem 0;
  font-size: 1rem;
}

#sumup-overlay a {
  font-size: 1.2rem;
  color: var(--primary);
  display: block;
  margin: .5rem 0;
}

#sumup-overlay tr {
  height: 2rem;
}

#sumup-overlay td {
  vertical-align: top;
}

#sumup-overlay td:first-child:before {
  content: '✓';
  padding-right: .5rem;
  color: var(--primary);
}

#sumup-overlay td:last-child {
  color: #fff;
}

#sumup-overlay img {
  width: 15rem;
  margin: .8rem 0;
}

#sumup-overlay-close {
  color: var(--primary);
  position: absolute;
  right: 20px;
  top: 5px;
  font-size: 1.5rem;
  cursor: pointer;
}

/* #scale-overlay {
  position: absolute;
  top: min(47vw, 42rem);
  z-index: 4;
  color: white;
  background-color: #e88932;
  border-radius: 0 5px 5px 0;
  border: 0;
  width: fit-content;
  padding: .5rem 4rem;
  left: 0;
  text-align: center;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%);
}

#scale-overlay p {
  margin: .1rem 0;
}

#scale-overlay .line1 {
  font-size: 2.5rem;
  font-weight: bold;
}

#scale-overlay .line2 {
  font-size: 2.2rem;
} */

.header-disclaimer {
  color: white;
  background-color: var(--primary);
  margin-top: 5px;
  padding: 1rem;
  text-align: center;
  justify-content: center;
}

.header-disclaimer .line1 {
  font-size: calc(100vw /18);
  font-weight: bold;
}

.header-disclaimer .line2 {
  font-size: calc(100vw /18);
}

#scale-overlay {
  position: relative;
  width: fit-content;
  height: 0;
  left: 0;
  background: none;
  border: none;
}

#scale-overlay div {
  position: absolute;
  height: fit-content;
  bottom: 60px;
  left: 0;
  color: white;
  background-color: #e88932;
  border-radius: 0 5px 5px 0;
  border: 0;
  padding: .5rem 4rem;
  text-align: center;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%);
}

#scale-overlay p {
  margin: .1rem 0;
}

#scale-overlay .line1 {
  font-size: 2.5rem;
  font-weight: bold;
}

#scale-overlay .line2 {
  font-size: 2.2rem;
}

/* 
#scale-overlay {
  position: fixed;
  top: 10rem;
  z-index: 10;
  color: white;
  background-color: #e88932;
  border-radius: 0 5px 5px 0;
  border: 0;
  width: fit-content;
  padding: .5rem 4rem;
  left: 0;
  text-align: center;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%);
}

#scale-overlay p {
  margin: .1rem 0;
} */

@media (min-width: 801px) {
  /*.videoContainer {*/
  /*    height: 100%;*/
  /*}*/
  .header-image-container {
    margin-top: 4rem;
  }
  
  .header-disclaimer {
    display: flex;
  }
  
  .header-disclaimer .line1 {
    font-size: 2.5rem;
  }

  .header-disclaimer .line2 {
    font-size: 2.5rem;
  }
  
  .whiteBox {
    width: 100%;
    height: 40%;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 0;
    padding: 0 3rem;
  }

  .whiteBox p {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .whiteBox span {
    font-size: 3rem;
  }

  .product {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 600px;
    margin-bottom: 1rem;
    /*background: #fff;*/
  }

  .divider {
    background: #fff;
    width: 1rem;
    height: 100%;
    margin: auto 0;
  }

  .product-text {
    width: 40%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 2rem;
  }
  .product-text p {
    width: 100%;
  }

  .textContainer {
    width: 100%;
    height: 100%;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: start;
    align-items: flex-start;
    justify-content: space-between;
  }

  .textContainer h2 {
    margin-bottom: 0;
  }

  .product-image {
    width: 60%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .imageContainer {
    height: 100%;
  }

  .image__top {
    padding-top: 0;
  }

  .image__bottom {
    padding-bottom: 0;
  }
  
  .badgeContainer img {
    max-width: 150px;
  }

  .btn {
    margin: 0;
  }

  .textContainer > * {
    margin: 0;
  }

  .textContainer span {
    font-size: 1.4rem;
  }

  .contact {
    margin-top: 0;
  }

  .overlay {
    display: block;
  }
}

@media (min-width: 800px) and (max-width: 1000px) {
  .header-disclaimer {
    display: block;
  }
  
  .btn {
    width: 15rem;
  }

  .product {
    height: 850px;
  }
}

@media (min-width: 801px) and (max-width: 1300px) {
  .textContainer span {
    font-size: 1.7vw;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .partner-icons__container {
    height: 50%;
  }
}