@import url("http://fonts.googleapis.com/css?family=Lato:400,300,600");

@font-face {
  font-family: "sinter";
  src: url("../assets/sinter-bold.otf") format("opentype");
}

.container {
  max-width: 960px;
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/*
 * Custom translucent site header
 */

.site-header {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.site-header a {
  color: #8e8e8e;
  transition: color .15s ease-in-out;
}
.site-header a:hover {
  color: #fff;
  text-decoration: none;
}

/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

.product-device {
  position: absolute;
  right: 10%;
  bottom: -30%;
  width: 300px;
  height: 540px;
  background-color: #333;
  border-radius: 21px;
  transform: rotate(30deg);
}

.product-device::before {
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color: rgba(255, 255, 255, .1);
  border-radius: 5px;
}

.product-device-2 {
  top: -25%;
  right: auto;
  bottom: 0;
  left: 5%;
  background-color: #e5e5e5;
}

.hand-1 {
  position: absolute;
  right: -5%;
  bottom: 0%;
  width: 400px;
  height: 340px;
  background-size: cover;
  background-image: url('../assets/hand-1.png');
}

/*
 * Extra utilities
 */

.flex-equal > * {
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    flex: 1;
  }
}

body
{
  background-color: #d987d9;
  font-family: Lato, sans-serif !important;
}

.swappie-color-yellow
{
  background-color: #ffc31d;
}

.swappie-color-green
{
  background-color: #06d29c;
}

.swappie-color-red
{
  background-color: #ff3e55;
}

.swappie-panel-dark
{
  background-color: rgba(0,0,0,0.2);
  background-image: url('../assets/border.png');
  background-size: cover;
}

.swappie-panel-light
{
  /*background-color: rgba(0,0,0,0.2);*/
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); 
}

.influencer-headers
{
  font-family: Sinter, sans-serif !important;
  font-weight: 400 !important;
}

.flip-image
{
  transform: rotateY(180deg);
}

.breaker
{
  height: 10px;
  background-color: #ffc31d;
}

.scribbles
{
  background-image: url('../assets/scribble-cropped.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-position-y: 100px;
}