:root {
  --main-color: #29155f;
  --fade: #acacac;
}

body {
  color: #333;
  font-family: Open Sans, Times New Roman, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.main-screen {
  background-image: url('../images/RealTimeTranslator-main-bg.png');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  justify-content: space-between;
  height: 100vh;
  padding: 20px 5vw;
  display: flex;
  overflow: auto;
}

.main-container {
  flex: 0 auto;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.hero-text-col {
  flex-flow: column;
  align-self: stretch;
  width: 50%;
  display: flex;
}

.demo-text-col {
  color: #fff;
  background-image: linear-gradient(142deg, #291573 59%, #7d4580 85%, #8d31d6);
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 52%;
  height: 75%;
  margin-right: -5vw;
  padding: 44px 33px 44px 40px;
  font-size: 1.4rem;
  display: flex;
  position: relative;
}

.heading {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(#3f28a2 73%, #8731d6);
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 10px;
  font-family: Oswald, Tahoma, sans-serif;
  font-size: 5.8vw;
  line-height: 1.1em;
}

.logo-brand {
  width: 250px;
  margin-bottom: 10px;
}

.bot-col3 {
  width: 32%;
}

.card-bot-col {
  background-color: #fff;
  border-radius: 80px;
  justify-content: space-between;
  align-items: center;
  padding: 2px 14px 2px 23px;
  font-size: 1rem;
  line-height: 1.4em;
  display: flex;
  box-shadow: 0 0 30px 20px #0000000d;
}

.card-bot-text {
  flex: 1;
  margin-left: 20px;
  font-size: .9rem;
  line-height: 1.2em;
}

.icon-card-bot {
  width: 50px;
  height: 50px;
}

.h4 {
  margin-bottom: 10px;
  font-family: Oswald, Tahoma, sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2em;
}

.card-bot-container {
  justify-content: space-between;
  margin-top: 0;
  display: flex;
}

.demo-hd {
  font-family: Oswald, Tahoma, sans-serif;
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.2em;
}

.demo-subhd {
  font-family: Oswald, Tahoma, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2em;
}

.demo-infohd {
  font-size: .9rem;
  line-height: 1.5em;
}

.demo-button-div {
  flex-flow: column;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 2vw;
  padding-bottom: 2vw;
  display: flex;
  position: relative;
}

.demo-btn {
  z-index: 5;
  cursor: pointer;
  background-color: #fff;
  border-radius: 50%;
  align-self: center;
  width: 150px;
  height: 150px;
  padding: 17px;
  position: relative;
  animation: demoBtnPulse 1s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}

@keyframes demoBtnPulse {
  0% {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  }

  50% {
    transform: translate3d(0px, 0px, 0px) scale3d(1.03388, 1.03388, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  }

  100% {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  }
}

.demo-spline {
  z-index: 3;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  padding-top: 10%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.demo-text-content {
  z-index: 5;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
}

.spline-scene {
  opacity: .38;
  filter: brightness(200%);
}

.video-div {
  z-index: 2;
  flex: 1;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  position: relative;
}

.video-main-div {
  border-radius: 25px;
  flex: 0 auto;
  width: 900px;
  height: 350px;
  position: relative;
  overflow: hidden;
}

.video-main-div.auto {
  flex: 0 auto;
  width: 450px;
  height: 280px;
  display: flex;
}

.video-main-div.contact {
  flex: 0 auto;
  width: 700px;
  height: 450px;
  display: flex;
}

.video-contact {
  height: 100%;
}

.video-main-control {
  z-index: 7;
  flex-flow: column;
  justify-content: flex-end;
  align-self: stretch;
  align-items: flex-start;
  padding-bottom: 66px;
  display: flex;
  position: absolute;
  inset: 0% auto 0% -3%;
}

.video-subcontrol {
  align-self: stretch;
  margin-left: 0;
  position: absolute;
  inset: 0% -2% auto auto;
}

.video-subcontrol.user {
  z-index: 10;
  position: absolute;
  inset: 0% -4% 0% auto;
}

.video-subcontrol-language {
  z-index: 3;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
  margin-left: -24px;
  display: flex;
  position: relative;
  top: -25px;
}

.h4-hd {
  font-family: Oswald, Tahoma, sans-serif;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.2em;
}

.pill-main-control {
  cursor: pointer;
  background-color: #fff;
  border-radius: 50px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px 7px;
  font-family: Oswald, Tahoma, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  display: flex;
  box-shadow: 0 0 12px -2px #0000001a;
}

.pill-main-control.selected {
  background-color: #cce9da;
}

.pill-main-control.subtitle-switch {
  box-shadow: 0 0 12px -2px #0000005c;
}

.pill-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.video-subtitle-div {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.subtitle {
  color: #fff;
  background-color: #00000094;
  border-radius: 10px;
  width: 80%;
  margin-bottom: 0;
  padding: 12px 10px;
  font-size: 1rem;
}

.subtitle.smaller {
  max-width: 80%;
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 1rem;
}

.pill-control {
  letter-spacing: .5px;
  cursor: pointer;
  background-color: #fff;
  border-radius: 50px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  padding: 5px 7px;
  font-family: Oswald, Tahoma, sans-serif;
  font-size: .9rem;
  font-weight: 400;
  display: flex;
  box-shadow: 0 0 9px 6px #0000000f;
}

.pill-control:hover {
  background-color: #dad2ee;
}

.pill-control.english {
  background-color: var(--main-color);
  color: #fff;
}

.pill-control.english.contact {
  display: flex;
}

.pill-control.arabic {
  display: none;
}

.pill-control.arabic.contact {
  background-color: var(--main-color);
  color: #fff;
  display: none;
}

.pill-control.german {
  display: none;
}

.pill-control.german.contact {
  background-color: var(--main-color);
  color: #fff;
  display: none;
}

.pill-control.turkish {
  display: none;
}

.pill-control.turkish.contact {
  background-color: var(--main-color);
  color: #fff;
  display: none;
}

.pill-control.french {
  display: none;
}

.pill-control.french.contact,
.pill-control.mandarin.contact,
.pill-control.portuguese.contact,
.pill-control.hindi.contact,
.pill-control.russian.contact,
.pill-control.spanish.contact {
  background-color: var(--main-color);
  color: #fff;
  display: none;
}

.body {
  height: 100vh;
  overflow: hidden;
}

.popup-wrapper {
  z-index: 10;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: auto;
}

.demo-popup {
  display: none;
}

.card-demo-popup {
  background-color: #fff;
  width: 100%;
  height: 100%;
  padding: 20px;
  position: relative;
}

.close-btn {
  opacity: .6;
  cursor: pointer;
  width: 35px;
  height: 35px;
  position: absolute;
  inset: 20px 20px auto auto;
}

.close-btn:hover {
  opacity: 100;
}

.popup-hd-text {
  margin-top: 0;
  font-family: Oswald, Tahoma, sans-serif;
}

.popup-hd {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.popup-subhd-text {
  margin-top: 0;
  font-family: Open Sans, Times New Roman, sans-serif;
  font-weight: 400;
}

.video-demo {
  border-bottom: 1px #b3b3b380;
  justify-content: space-around;
  display: flex;
}

.video-you {
  flex-flow: column;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  margin-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
}

.video-contact {
  flex-flow: column;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  margin-left: 10px;
  padding-bottom: 10px;
  display: flex;
}

.demo-controls {
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 0;
  display: flex;
  position: relative;
}

.demo-transcript {
  z-index: 10;
  flex-flow: column;
  flex: 0 auto;
  width: 480px;
  display: flex;
  position: absolute;
  inset: -150px auto auto 0%;
}

.select-field {
  color: #272727;
  background-color: #fff;
  border: 1px solid #0000000a;
  border-radius: 50px;
  margin-top: 10px;
  padding-left: 35px;
}

.select-field.microphone {
  background-image: url('../images/RealTimeTranslator-icon-settings-mic.svg');
  background-position: 5px;
  background-repeat: no-repeat;
  background-size: 30px;
}

.select-field.speaker {
  background-image: url('../images/RealTimeTranslator-icon-settings-spealker.svg');
  background-position: 5px;
  background-repeat: no-repeat;
  background-size: 30px;
}

.select-field.voice {
  background-image: url('../images/RealTimeTranslator-icon-settings-voice.svg');
  background-position: 5px;
  background-repeat: no-repeat;
  background-size: 30px;
}

.select-field.camera {
  background-image: url('../images/RealTimeTranslator-icon-camera.svg');
  background-position: 5px;
  background-repeat: no-repeat;
  background-size: 30px;
}

.demo-settings {
  background-color: #eee;
  border-radius: 15px;
  flex: 1;
  margin-left: 0;
  padding: 12px 13px 0;
}

.field-label {
  color: var(--main-color);
  font-family: Oswald, Tahoma, sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.2em;
}

.settings-select {
  flex: 0 auto;
  width: 47%;
  margin-bottom: 10px;
  margin-left: 3px;
  margin-right: 3px;
}

.demo-buttons {
  margin-top: 0;
  margin-left: 10px;
  position: relative;
  top: -23px;
}

.transcript-container {
  background-color: #f1f4f9;
  border-radius: 20px;
  flex: 0 auto;
  align-self: stretch;
  height: 280px;
  margin-top: 10px;
  padding: 10px;
  overflow: auto;
}

.demo-btn-control {
  cursor: pointer;
  background-color: #f2f2f2;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  padding: 8px;
}

.demo-btn-control:hover {
  background-color: #e4e2e2;
}

.demo-btn-control.red {
  background-color: #c1272d;
}

.demo-btn-control.mic-off,
.demo-btn-control.video-off {
  display: none;
}

.bubble-contact-div {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-top: 10px;
  margin-bottom: 20px;
  display: flex;
}

.bubble-contact {
  background-color: #fff;
  border-radius: 0 20px 20px;
  max-width: 70%;
  padding: 9px 18px;
  box-shadow: 0 0 5px #0000001c;
}

.p-bubble {
  margin-bottom: 0;
  font-weight: 600;
}

.p-bubble.translated {
  font-size: 12px;
  font-weight: 400;
}

.bubble-translation {
  background-color: #cce9da;
  border-radius: 0 20px 20px;
  max-width: 80%;
  padding: 9px 18px;
  box-shadow: 0 0 5px #00000017;
}

.label-translation {
  color: var(--main-color);
  font-family: Oswald, Tahoma, sans-serif;
  font-weight: 500;
}

.bubble-user-div {
  flex-flow: column;
  justify-content: center;
  align-items: flex-end;
  margin-top: 10px;
  margin-bottom: 20px;
  display: flex;
}

.bubble-user {
  color: #fff;
  background-color: #694580;
  border-radius: 20px 0 20px 20px;
  max-width: 65%;
  padding: 9px 18px;
  box-shadow: 0 0 5px #0000001c;
}

.pill-icon-main {
  background-color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  padding: 2px 3px;
}

.video-subcontrol-subtitle {
  z-index: 3;
  margin-left: -24px;
  display: none;
  position: relative;
  top: -25px;
}

.user-video {
  align-self: stretch;
}

.background-video {
  width: 100%;
  height: 100%;
}

.demo-underline {
  text-decoration: underline;
}

.demo-arrow {
  width: 80px;
  position: absolute;
  inset: -6% 22% auto auto;
  animation: demoArrowRotate 1s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}

@keyframes demoArrowRotate {
  0% {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  }

  50% {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(3.998deg) skew(0deg, 0deg);
  }

  100% {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  }
}

.text-block {
  position: absolute;
  inset: 0% auto auto 0%;
}

.demo-text {
  z-index: 3;
  justify-content: center;
  align-items: center;
  width: 210px;
  height: 210px;
  margin-left: 0;
  display: none;
  position: absolute;
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(5deg) skew(0deg, 0deg);
  opacity: 0;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
}

/* Show text when hovering over the button */
.demo-btn:hover~.demo-text {
  display: flex;
  opacity: 1;
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  transition: all 0.3s ease;
  animation: textAppear 0.5s ease-out;
}

@keyframes textAppear {
  0% {
    opacity: 0;
    transform: translate3d(0px, 0px, 0px) scale3d(0.8, 0.8, 1) rotateX(0deg) rotateY(0deg) rotateZ(5deg) skew(0deg, 0deg);
  }

  100% {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  }
}

.subtitles-switch {
  border: 1px solid #d4d4d4;
  border-radius: 50%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  padding: 2%;
  display: flex;
}

.subtitle-switch-inner {
  background-color: #4bd546;
  border-radius: 50%;
  width: 78%;
  height: 78%;
}

.language-details-list {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 6px;
  /* keeps content clear of scrollbar */
}

.language-first-section {
  display: block;
}

.language-arrow-down {
  opacity: .9;
  cursor: pointer;
  width: 50px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  /* was none */
}

.language-arrow-down:hover {
  opacity: 100;
}

.language-second-section {
  width: 100%;
  display: none;
}

.language-contact {
  display: block;
}

.pill-control-contact {
  letter-spacing: .5px;
  cursor: pointer;
  background-color: #fff;
  border-radius: 50px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  padding: 5px 7px;
  font-family: Oswald, Tahoma, sans-serif;
  font-size: .9rem;
  font-weight: 400;
  display: flex;
  box-shadow: 0 0 9px 6px #0000000f;
}

.pill-control-contact:hover {
  background-color: #dad2ee;
}

.pill-control-contact.english {
  background-color: var(--main-color);
  color: #fff;
}

.pill-control-contact.english.contact {
  background-color: var(--fade);
  color: #000;
  font-weight: 300;
  display: flex;
}

.pill-control-contact.arabic {
  display: none;
}

.pill-control-contact.arabic.contact {
  background-color: var(--fade);
  color: #000;
  font-weight: 300;
  display: none;
}

.pill-control-contact.german {
  display: none;
}

.pill-control-contact.german.contact {
  background-color: var(--fade);
  color: #000;
  font-weight: 300;
  display: none;
}

.pill-control-contact.turkish {
  display: none;
}

.pill-control-contact.turkish.contact {
  background-color: var(--fade);
  color: #000;
  font-weight: 300;
  display: none;
}

.pill-control-contact.french {
  display: none;
}

.pill-control-contact.french.contact,
.pill-control-contact.mandarin.contact,
.pill-control-contact.portuguese.contact,
.pill-control-contact.hindi.contact,
.pill-control-contact.russian.contact,
.pill-control-contact.spanish.contact {
  background-color: var(--fade);
  color: #000;
  font-weight: 300;
  display: none;
}

.pill-control-copy {
  letter-spacing: .5px;
  cursor: pointer;
  background-color: #fff;
  border-radius: 50px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  padding: 5px 7px;
  font-family: Oswald, Tahoma, sans-serif;
  font-size: .9rem;
  font-weight: 400;
  display: flex;
  box-shadow: 0 0 9px 6px #0000000f;
}

.pill-control-copy:hover {
  background-color: #dad2ee;
}

.pill-control-copy.english {
  background-color: var(--main-color);
  color: #fff;
}

.pill-control-copy.english.contact {
  display: flex;
}

.pill-control-copy.arabic {
  display: none;
}

.pill-control-copy.arabic.contact {
  background-color: var(--main-color);
  color: #fff;
  display: none;
}

.pill-control-copy.german {
  display: none;
}

.pill-control-copy.german.contact {
  background-color: var(--main-color);
  color: #fff;
  display: none;
}

.pill-control-copy.turkish {
  display: none;
}

.pill-control-copy.turkish.contact {
  background-color: var(--main-color);
  color: #fff;
  display: none;
}

.pill-control-copy.french {
  display: none;
}

.pill-control-copy.french.contact,
.pill-control-copy.mandarin.contact,
.pill-control-copy.portuguese.contact,
.pill-control-copy.hindi.contact,
.pill-control-copy.russian.contact,
.pill-control-copy.spanish.contact {
  background-color: var(--main-color);
  color: #fff;
  display: none;
}

.translated-from-div {
  color: #333333ad;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
  font-size: 11px;
  display: flex;
}

.flag {
  justify-content: center;
  align-items: center;
  width: 20px;
  margin-right: 5px;
  display: flex;
}

.flag.us {
  width: 25px;
}

.language-translation {
  margin-left: 5px;
  display: flex;
}

.text-translated-language {
  color: #333333fc;
  font-weight: 600;
}

.contact-info {
  justify-content: space-between;
  align-self: stretch;
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  font-weight: 600;
  display: flex;
}

.contact-info.wide {
  align-self: stretch;
  width: 90%;
}

.contact-info.user,
.contact-info.contact {
  justify-content: space-between;
  align-items: center;
  width: 80%;
  height: 35px;
}

/* Remote container layout */
.remote-video-container [data-identity] {
  height: 100%;
}
.remote-video-container {
  display: block !important;
  padding: 0 !important;
}

.translation-details {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.arrow-translation {
  width: 12px;
  margin-right: 5px;
}

.mobile-language {
  margin-top: 56px;
  display: none;
}

.name-label {
  font-size: 1rem;
}

.div-block {
  flex: 1;
  display: flex;
}

.avatar-video {
  height: 100%;
  color: #fff;
  background-color: #363636;
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.avatar-video.contact {
  height: 100%;
  background-color: gray;
}

.avatar-user {
  width: 100px;
  height: 100px;
  margin-bottom: 5px;
}

.demo-sttings-col {
  flex: 0 auto;
  justify-content: center;
  align-items: flex-start;
  width: 62%;
  display: flex;
  position: relative;
}

.form {
  justify-content: space-between;
  display: flex;
}

.form-block {
  margin-bottom: 0;
}

.demo-settings-div {
  flex: 1;
  margin-left: 20px;
}

.setting-row {
  flex-flow: wrap;
  justify-content: space-between;
  display: flex;
}

.room-id-div {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  margin-left: 15px;
  display: flex;
}

.room-id-input {
  margin-left: 10px;
}

.text-field-label {
  color: var(--main-color);
  margin-bottom: 0;
  font-weight: 600;
}

.text-field {
  color: #353535;
  background-color: #eee;
  border-radius: 5px;
  height: 40px;
  margin-bottom: 0;
  font-size: .9rem;
}

.button {
  background-color: var(--main-color);
  cursor: pointer;
  border-radius: 5px;
  padding-left: 18px;
  padding-right: 18px;
}

.button:hover {
  background-color: #483383;
}

.join-room-button-div {
  margin-left: 10px;
}

.room-id-details {
  display: flex;
}

.video-name-div {
  flex: 1;
}

.set-name {
  display: none;
}

.set-name.static {
  cursor: pointer;
  width: 70%;
  display: block;
}

.edit-name {
  margin-right: 10px;
}

.edit-name.form {
  display: none;
}

.text-field-edit-name {
  color: #1a1a1a;
  border-radius: 5px;
  height: 35px;
  margin-bottom: 0;
  font-weight: 500;
}

.edit-name-formblock {
  margin-bottom: 0;
}

.text-field-edit-name-div {
  flex: 1;
  margin-right: 10px;
}

.edit-form {
  display: flex;
}

.btn-set-name {
  background-color: var(--main-color);
  border-radius: 5px;
  width: 35px;
  height: 35px;
  padding: 8px;
}

.btn-set-name:hover {
  background-color: #483383;
}

.language-not-set {
  width: 20px;
  height: 20px;
}

@media screen and (min-width: 1440px) {
  .main-screen {
    padding-top: 4vw;
    padding-bottom: 5vw;
  }

  .demo-text-col {
    height: 85%;
  }

  .card-bot-col {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .card-bot-text {
    font-size: 1.1rem;
  }

  .h4 {
    font-size: 1.6rem;
  }

  .card-bot-container {
    margin-top: 20px;
  }

  .video-main-div {
    height: 400px;
  }

  .pill-main-control {
    padding: 8px 13px;
    font-size: 1.2rem;
  }

  .pill-control {
    padding: 7px 12px;
    font-size: 1.1rem;
  }

  .demo-transcript {
    width: 38%;
  }

  .transcript-container {
    height: 360px;
  }

  .pill-control-contact,
  .pill-control-copy {
    padding: 7px 12px;
    font-size: 1.1rem;
  }

  .demo-settings-div {
    flex: 0 auto;
    width: 80%;
  }
}

@media screen and (min-width: 1920px) {
  .demo-hd {
    font-size: 4.5rem;
  }

  .demo-subhd {
    font-size: 3rem;
  }

  .demo-infohd {
    font-size: 1.4rem;
  }

  .video-main-div {
    width: 1000px;
    height: 450px;
  }

  .pill-main-control {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 1.4rem;
  }

  .pill-control {
    padding: 12px 17px;
    font-size: 1.3rem;
  }

  .card-demo-popup {
    width: 1300px;
  }

  .popup-hd {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .demo-transcript {
    width: 38%;
  }

  .transcript-container {
    height: 370px;
  }

  .demo-arrow {
    width: 110px;
    right: 27%;
  }

  .pill-control-contact,
  .pill-control-copy {
    padding: 12px 17px;
    font-size: 1.3rem;
  }

  .demo-settings-div {
    margin-top: 10px;
  }
}

@media screen and (max-width: 991px) {
  .main-screen {
    height: 100vh;
    overflow: auto;
  }

  .main-container {
    flex-flow: column;
  }

  .hero-text-col {
    width: auto;
  }

  .demo-text-col {
    width: auto;
    margin-right: 0;
  }

  .heading {
    font-size: 7vw;
  }

  .bot-col3 {
    display: flex;
  }

  .card-bot-col {
    border-radius: 19px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 11px 18px;
  }

  .card-bot-text {
    margin-left: auto;
  }

  .card-bot-container {
    flex: 1;
    margin-top: 20px;
  }

  .video-div.popup {
    justify-content: flex-start;
    align-items: center;
  }

  .video-main-div {
    width: 900px;
  }

  .video-main-div.auto {
    border-radius: 10px;
    width: 200px;
    height: 120px;
  }

  .video-main-div.contact {
    border-radius: 10px;
  }

  .video-main-control {
    margin-right: -39px;
    inset: auto auto 0% 0%;
  }

  .video-main-control.user {
    margin-right: 0;
  }

  .video-subcontrol {
    margin-left: 0;
    inset: 0% 0% auto auto;
  }

  .video-subcontrol.user {
    display: none;
  }

  .video-subcontrol.contact {
    inset: 0% auto auto 0%;
  }

  .video-subcontrol-language {
    margin-left: -25px;
    right: -26px;
  }

  .video-subcontrol-language.contact {
    margin-left: 0;
    right: 0;
  }

  .pill-main-control.subtitle-switch {
    display: flex;
  }

  .pill-main-control.subtitle-switch.user,
  .subtitle.user {
    display: none;
  }

  .popup-wrapper {
    background-color: #fff;
    padding-bottom: 10vw;
    overflow: auto;
  }

  .card-demo-popup {
    padding-bottom: 5vh;
  }

  .video-demo {
    flex-flow: column;
    position: relative;
  }

  .video-you {
    z-index: 3;
    position: absolute;
    inset: auto 0% 13% auto;
  }

  .video-contact {
    position: relative;
  }

  .demo-controls {
    flex-flow: column;
  }

  .demo-transcript {
    align-self: stretch;
    width: auto;
    position: static;
  }

  .demo-settings {
    align-self: stretch;
    margin-left: 0;
  }

  .demo-buttons {
    order: -1;
    justify-content: space-between;
    align-self: stretch;
    margin-top: 0;
    display: flex;
    position: static;
    top: 0;
  }

  .language-details-list.mobile {
    position: static;
  }

  .contact-info.wide {
    z-index: 4;
    justify-content: flex-end;
    width: 93%;
    margin-top: 32px;
    padding-right: 19px;
    position: absolute;
    inset: 0% 0% auto auto;
  }

  .contact-info.user {
    z-index: 4;
    justify-content: flex-end;
    align-items: center;
    width: auto;
    height: auto;
    margin-top: 13px;
    margin-bottom: 5px;
    margin-right: 5px;
    display: flex;
    position: absolute;
    inset: 0% 0% auto auto;
  }

  .contact-info.contact {
    z-index: 4;
    justify-content: flex-end;
    align-items: center;
    width: auto;
    height: auto;
    margin-top: 25px;
    margin-bottom: 5px;
    margin-right: 5px;
    display: flex;
    position: absolute;
    inset: 0% 0% auto auto;
  }

  .translation-details {
    margin-right: 10px;
  }

  .translation-details.me {
    margin-right: 0;
  }

  .arrow-translation {
    filter: brightness(500%);
  }

  .mobile-language {
    flex-flow: column;
    margin-left: -15px;
    display: flex;
    position: absolute;
  }

  .contact-label,
  .name-label {
    display: none;
  }

  .div-block {
    flex-flow: column;
  }

  .avatar-user {
    width: 50px;
    height: 50px;
  }

  .demo-sttings-col {
    flex-flow: column;
    align-self: stretch;
    width: auto;
    margin-top: 20px;
  }

  .demo-settings-div {
    border-top: 1px solid #ebebeb;
    align-self: stretch;
    margin-top: 10px;
    margin-left: 0;
    padding-top: 10px;
  }

  .language-not-set {
    filter: brightness(200%);
  }
}

@media screen and (max-width: 767px) {
  .demo-text-col {
    padding-left: 35px;
    padding-right: 35px;
  }

  .heading {
    font-size: 4rem;
  }

  .demo-text-content {
    padding-top: 0;
    padding-bottom: 0;
  }

  .video-main-div.auto {
    width: 150px;
    height: 90px;
  }

  .video-main-div.contact {
    width: 90vw;
    height: 350px;
  }

  .video-subcontrol-language {
    right: -18px;
  }

  .video-subtitle-div {
    right: 29%;
  }

  .popup-wrapper {
    justify-content: center;
    align-items: flex-start;
  }

  .video-you {
    bottom: 4%;
  }

  .demo-controls {
    flex-flow: column;
  }

  .demo-settings {
    width: auto;
    margin-top: 20px;
    margin-left: 0;
  }

  .demo-arrow {
    top: -35%;
    right: 13%;
  }

  .flag.user,
  .arrow-translation.user {
    display: none;
  }

  .avatar-user {
    width: 30px;
    height: 30px;
  }

  .avatar-user.contact {
    width: 60px;
    height: 60px;
  }
}

@media screen and (max-width: 479px) {
  .main-screen {
    padding-bottom: 10vw;
  }

  .demo-text-col {
    padding-top: 28px;
  }

  .heading {
    font-size: 3.2rem;
  }

  .bot-col3 {
    width: auto;
    margin-bottom: 20px;
  }

  .card-bot-container {
    flex-flow: column;
  }

  .demo-hd {
    font-size: 2.4rem;
  }

  .demo-subhd {
    font-size: 1.4rem;
  }

  .demo-btn {
    width: 120px;
    height: 120px;
  }

  .video-div {
    flex-flow: row;
  }

  .video-main-div {
    height: 250px;
  }

  .video-main-div.auto {
    width: 120px;
    height: 70px;
  }

  .video-main-div.contact {
    flex: 1;
    width: auto;
    height: 400px;
  }

  .video-main-control {
    margin-right: 0;
    padding-bottom: 8px;
    padding-left: 12px;
  }

  .video-subcontrol {
    margin-left: 0;
  }

  .video-subcontrol-language {
    margin-right: 3px;
    right: -16px;
  }

  .video-subcontrol-language.contact {
    margin-left: 0;
  }

  .pill-main-control.selected {
    margin-bottom: 5px;
    font-size: 12px;
  }

  .pill-main-control.subtitle-switch {
    font-size: 14px;
    font-weight: 400;
  }

  .pill-icon {
    width: 15px;
    height: 15px;
    display: flex;
  }

  .video-subtitle-div {
    flex: 0 auto;
    bottom: 16%;
    right: 0%;
  }

  .subtitle {
    width: 90%;
    margin-bottom: 15px;
    font-size: .8rem;
    line-height: 1.2em;
  }

  .pill-control {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 11px;
  }

  .popup-wrapper {
    justify-content: center;
    align-items: flex-start;
  }

  .card-demo-popup {
    height: auto;
    padding-top: 30px;
  }

  .close-btn {
    top: 11px;
    right: 10px;
  }

  .video-contact {
    margin-left: 0;
  }

  .settings-select {
    width: auto;
  }

  .transcript-container {
    height: 500px;
  }

  .bubble-contact {
    max-width: 80%;
  }

  .pill-icon-main {
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    display: flex;
  }

  .user-video {
    width: 100%;
  }

  .demo-arrow {
    width: 60px;
    top: -30%;
    right: 6%;
  }

  .demo-text {
    width: 170px;
    height: 170px;
    display: none;
  }

  .flag {
    width: 15px;
  }

  .flag.us {
    width: 20px;
  }

  .contact-info.wide {
    padding-right: 8px;
  }

  .arrow-translation {
    width: 10px;
  }

  .avatar-video {
    flex-flow: row;
    font-size: 10px;
  }

  .avatar-video.contact {
    flex-flow: column;
    font-size: 1rem;
  }

  .avatar-user {
    width: 20px;
    height: 20px;
    margin-bottom: 0;
    margin-right: 5px;
    display: flex;
  }

  .avatar-user.contact {
    margin-bottom: 10px;
    margin-right: 0;
  }

  .form,
  .setting-row {
    flex-flow: column;
  }

  .room-id-div {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 0;
  }

  .room-id-input {
    margin-left: 0;
  }
}


@font-face {
  font-family: 'Open Sans';
  src: url('../images/') format('truetype');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}