html, body {
  margin: 0;
  padding: 0;
  background-color: black;
  font-family: "Lato", sans-serif !important;
  font-weight: 400;
}

body {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  touch-action: none;
  font-family: "Lato", sans-serif !important;
  font-weight: 400;
}



@media screen and (orientation: portrait) {
  .rotate-message {
    display: none;
    opacity: 0;
  }
}
@media screen and (orientation: landscape) {
  .rotate-message {
    display: block;
    opacity: 1;
  }
}

 .temp, .the-name, .campaign-name, .tap-for-photo, .save-image-instructions, .share-message, .message-input {
  font-family: "Lato", sans-serif !important;
  font-weight: 700;
  cursor: none;
}

@@keyframes popIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.link-cta, .share-email {
  cursor: pointer;
}
/* to disbale blue outline if user edits post message */
.message-input:focus {
  outline: none !important;
}

#mi_size_container {
  display: none;
  position: relative;
  overflow: hidden;
  align-content: center;
  margin-left: auto;
  margin-right: auto;
}

.share-image {
    border: none;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.share-image:after {
    background: #ffffff;
    display: block;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.share-image:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

.tap-for-photo,.chromeError {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}


.tool-camera {
  display: flex;
  align-items: center;
  background-color: black !important;
  overflow: hidden;
}

.tool-camera video {
  /* mirror */
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  position: absolute;
  padding: 0;
  z-index: 1;
  display: block;
}

.tool-camera canvas {
  width: 100%;
  height: auto;
}

.tool-record, .share-element, .share-twitter, .share-facebook, {
  cursor: pointer;
}

.share-cancel {
  cursor: pointer;
  text-decoration: underline;
  font-family: "Lato", sans-serif !important;
  font-weight: 300;
}

.share-instructions, .share-offer, .loading-text {
  font-family: "Lato", sans-serif !important;
  font-weight: 400;
}

.share-movable  {
  font-family: "Lato", sans-serif !important;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.share-headline {
  font-family: "Lato", sans-serif !important;
  font-weight: 900;
}

.open-cta {
  font-family: "Lato", sans-serif !important;
  font-weight: 400;
}


.tool-record {
  z-index: 1000;
}
.save-image-instructions {
   animation: saveImg .5s linear infinite;
}

@keyframes saveImg {
  to {
    transform: scale3d(1.2);
  }
}

.share-container {
  /* transition: transform 0.2s ease-out; */
}

.share-container.active {
  /* -webkit-transform: translateX(88%) !important;
  transform: translateX(88 %) !important; */
  opacity: 1;
  display: block;
}

.tap-for-photo {
    cursor: none;
}

.webview-instructions {
  display: none;
  cursor: pointer;
}
.tool-camera canvas {
  /* YOU SHOULD KEEP the transform: translateZ(-4000px) and the transform-style: preserve-3d;
     OTHERWISE THE DIV WILL BE BEHIND THE CANVAS WITH IOS
 */
  transform: translateZ(-4000px) translate(0, 0) rotateY(180deg);
  transform-style: preserve-3d;
}

.tool-camera div {
  display: block;
  position: absolute; z-index: 1000;
  background: url(../img/sunglasses.gif) 50% 50% no-repeat;
  background-size: contain;
  height: 60px; width: 60px;
}

.silhouette {
  opacity: inherit;
  transition: opacity 2s;
  transition-delay: 1s;
}

.silhouette.hidden {
  opacity: 0 !important;
  transition: opacity 0.2s;
}