@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap");
@import url("https://fonts.googleapis.com/css?family=Pacifico|Varela+Round&display=swap");
/* TALKII COLORS
   #1193f5 blue
   #ff9800 orange 
   #f6412d red 
   #009687 teal*/

/* GLOBAL */

* {
  box-sizing: border-box;
  transition-duration: 0.5s;
}

body {
  margin: 0;
  font-family: "Varela Round", sans-serif;
  color: #91819b;
}

/* ----- TEXT ------------------------------------------------------------- */

h1,
h2 {
  font-family: "Pacifico", cursive;
}

h3,
h4 {
  font-family: "Varela Round", sans-serif;
}

h1 {
  font-size: 7em;
  color: #fff;
}

h2 {
  font-size: 4em;
  color: #1193f5;
}

h3 {
  font-size: 2.5em;
}

h4 {
  font-size: 36px;
}

a {
  color: #1193f5;
}

a:hover {
  color: #ff9800;
  text-decoration: none;
}

a.mute{
  color: #91819b;
}

a.mute:hover {
  color: #1193f5;
}

.p-big p {
  font-size: 24px;
}

/* ----- TEXT COLORS ------------------------------------------------------------- */

.text-blue {
  color: #1193f5;
}

.text-light-blue {
  color: #95d1ff;
}

.text-orange {
  color: #ff9800;
}

/* ----- BACKGROUNDS ------------------------------------------------------------- */

.bg-blue {
  background: #1193f5;
}

.bg-orange {
  background: #ff9800;
}

.bg-gradient {
  background: rgb(17, 175, 245);
  background: linear-gradient(
    180deg,
    rgba(17, 175, 245, 1) 0%,
    rgba(17, 130, 245, 1) 100%
  );
}

/* ----- WRAPPERS ------------------------------------------------------------- */

.wrapper {
  display: grid;
}

.jpadding {
  padding-left: 10%;
  padding-right: 10%;
}

.jpadding-20 {
  padding-left: 20%;
  padding-right: 20%;
}

.jpadding-25 {
  padding-left: 25%;
  padding-right: 25%;
}

/* ----- IMG HOVER ------------------------------------------------------------- */

.img-scale:hover {
  transform: scale(1.1);
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

.img-sm-scale:hover {
  transform: scale(1.1);
}

/* ----- JBUTTONS ------------------------------------------------------------- */

/* default button (blue) */
.jbtn {
  font-size: 1.3em;
  font-weight: 500;
  color: white;
  background: #1193f5;
  border-radius: 25px;
  padding: 8px 30px;
  border: solid 0px #1193f5;
  text-align: center;
}

.jbtn:hover {
  color: white;
  background: #ff9800;
  border: solid 0px #ff9800;
  text-decoration: none;
}

/* smaller button */
.jbtn.jbtn-sm {
  font-size: 1em;
  padding: 8px 20px;
}

/* very small button for settings */
.jbtn.jbtn-xs {
  font-size: 0.9em;
  padding: 4px 14px;
}

/* rounder button, intended to be used with one icon */
.jbtn-icon {
  font-size: 1em;
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.jbtn-icon.jbtn-icon-link {
  background-color: transparent;
  color: #91819b;
}
.jbtn-icon.jbtn-icon-link:hover {
  background-color: #f6f7fb;
}

.jbtn-outline {
  color: #1193f5;
  background: transparent;
  border: solid 1px #1193f5;
}

.jbtn-outline:hover {
  color: white;
  background: #1193f5;
  border: solid 1px #1193f5;
}

.jbtn-orange {
  color: white;
  background: #ff9800;
  border: solid 0px #ff9800;
  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07), 0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07), 0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07); */
}

.jbtn-orange:hover {
  color: white;
  background: #ff9800;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  /* box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); */
}

/* .jbtn-blue {
  color: white;
  background: #1193f5;
  border: solid 0px #1193f5;
}

.jbtn-blue:hover {
  color: white;
  background: #ff9800;
} */

.jbtn-red {
  color: white;
  background: #f6412d;
  border: solid 0px #f6412d;
}

.jbtn-red:hover {
  color: white;
  background: #f01800;
}

.jbtn-shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.jbtn-scale:hover {
  transform: scale(1.1);
}
.jbtn-hover-blue:hover {
  color: #1193f5;
}

.jbtn-text {
  background: unset;
  border: unset;
  font-size: 1em;
  padding: 0;
  color: #1193f5;
}

.jbtn-text:hover {
  color: #ff9800;
}

/* ----- SEPARATORS ------------------------------------------------------------- */

.separator {
  min-height: 30vh;
  padding-top: 100px;
  padding-bottom: 100px;
  /* padding-left: 10px;
    padding-right: 10px; */
}

.separator-play {
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.separator-play img {
  width: 250px;
}

.separator-lux {
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 50px 16px;
}

.separator-lux img {
  height: 100px;
  width: auto;
}

/* ----- SHOWCASES ------------------------------------------------------------- */

.showcase-sm {
  margin-top: 126px;
  margin-bottom: 100px;
  padding: 0 30px;
  display: grid;
  justify-content: center;
  text-align: center;
}

.showcase-xs {
  margin-top: 50px;
  margin-bottom: 100px;
  display: grid;
  justify-content: center;
  text-align: center;
}

.showcase-sm h1,
.showcase-xs h1,
.showcase-xxs h1 {
  font-size: 4em;
  color: #1193f5;
}

.showcase-xxs {
  margin-top: 50px;
  margin-bottom: 50px;
  display: grid;
  justify-content: center;
  text-align: center;
  padding: 0 30px;
  text-align: center;
}

/* ----- JCARDS ------------------------------------------------------------- */

/* ----- INNER CARDS ------------------------------------------------------------- */

.inner-jcard {
  background-color: #f6f7fb;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid #edeef1;
  display: grid;
  align-content: center;
}

.payment-options .inner-jcard {
  padding: 20px 20px;
}

.inner-jcard-hover:hover {
  transform: scale(1.05);
  cursor: pointer;
}

.inner-jcard.inner-jcard-70 {
  min-height: 69.6px;
}

.inner-jcard p {
  padding: 0;
  margin: 0;
}

.inner-jcard h5 {
  padding: 0;
  margin: 0;
  font-size: 1.3em;
}

.jtitle-w-btns{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
}


/* ----- RESPONSIVE ------------------------------------------------------------- */

/* TABLET */

@media (max-width: 990px) {
  .jpadding {
    padding-left: 15%;
    padding-right: 15%;
  }

  .showcase-sm h1,
  .showcase-xs h1,
  .showcase-xxs h1 {
    font-size: 3.7em;
  }
}

/* PHONE */

@media (max-width: 630px) {
  .jpadding {
    padding: 0 30px;
  }

  .showcase-sm h1,
.showcase-xs h1,
.showcase-xxs h1 {
  font-size: 3.3em;
}

  .showcase-xxs h4 {
    font-size: 30px;
  }
}