@import "compass/css3";

/* ====================================
   Demo specific styling
   ==================================== */

.header-video {
  position: relative;
  overflow: hidden;
}

.header-video iframe,
.header-video video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;


}

.header-video iframe {
  height: 100%;
  width: 100%;
}

.header-video video {
  width: 100%;
}

.header-video__teaser-video {
  width: 100%;
  height: auto;
}

.header-video__media {
  width: 100%;
  height: auto;
}

#ptag.header-video__play-trigger {
  position: absolute;
  top: 5%;
  left: 25%;
  font-size: 5rem;
  text-transform: uppercase;
  mix-blend-mode: overlay;
  line-height: 1;
  z-index: 5;
  font-family: monospace;
  background: rgba(204,0,0,.8);
}

#h1tag.header-video__play-trigger {
  position: absolute;
  top: 10%;
  left: 10%;
  font-size: 6rem;
  text-transform: uppercase;
  mix-blend-mode: overlay;
  line-height: 1;
  z-index: 5;
  font-family: arial-black;
  background: rgba(204,0,0,.8);
}
/* ====================================
   Just making stuff pretty
   ==================================== */

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#header-video__play-trigger.header-video__play-trigger {
  z-index: 5;
  position: absolute;
  background: rgba(204,0,0,.8);
  text-align: center;
  color: white;
  text-decoration: none;
  padding: 1.5em 3em;
  z-index: 5;
  left: 50%;
  top: 70%;
  border-radius: 5px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: background .5s;
  -moz-transition: background .5s;
  transition: background .5s;
}

.header-video__play-trigger:hover {
  background: rgba(0,0,0,.5);
}

/**
  Just some basic styling for the closing trigger
**/

.header-video__close-trigger {
  z-index: 99;
  position: absolute;
  background: #A61212;
  text-align: center;
  color: white;
  text-decoration: none;
  padding: 2em 3em;
  border-radius: 10px;
  right: 30px;
  top: 30px;
  -webkit-transition: background .3s;
  -moz-transition: background .3s;
  transition: background .3s;
  border: none;
}
.header-video__close-trigger:hover {
  background: #363636;
  cursor: pointer;
}

/*Social Media Icons & Animation */


/* social media sharing colors */
  $facebook: #3b5998; // rgb(59, 89, 152)
  $twitter: #00aced; // rgb(0, 172, 237)
  $google-plus: #ff4b39; // rgb(221, 75, 57)
  $pinterest: #cc2127; // rgb(204, 33, 39)
  $instagram: #784cac; //, rgb(120, 76, 172)
  $linked-in: #007bb6; // rgb(0, 123, 182)


.set {
  margin: 20px;
}

a {
  &.social {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    overflow: hidden;
    position: relative;
    text-indent: -9999em;
    visibility: hidden;
    width: 40px;
    &:before,
    &:after {
      display: inline-block;
      font-family: FontAwesome;
      font-size: 30px;
      height: 40px;
      line-height: 44px;
      position: absolute;
      right: 0;
      text-align: center;
      text-indent: 0;
      visibility: visible;
      width: 40px;
    }
    &:after {
      left: 0;
      position: absolute;
    }
  }
  &.facebook {
    &:before {
      background: $facebook;
    }
    &:after {
      content: "\f09a";
      top: -1px;
    }
  }
  &.twitter {
    &:before {
      background: $twitter;
    }
    &:after {
      content: "\f099";
      left: 0;
      top: 0;
    }
  }
  &.google-plus {
    &:before {
      background: $google-plus;
    }
    &:after {
      content: "\f0d5";
      left: 2px;
      top: -1px;
    }
  }
  &.pinterest {
    &:before {
      background: $pinterest;
    }
    &:after {
      content: "\f0d2";
      font-size: 34px;
      left: -1px;
      top: -1px;
    }
  }
  &.instagram {
    &:before {
      background: $instagram;
    }
    &:after {
      content: "\f16d";
      top: -1px;
    }
  }
  &.linked-in {
    &:before {
      background: $linked-in;
    }
    &:after {
      content: "\f0e1";
      top: -1px;
    }
  }
}

.rounded {
   z-index: 10;
  a {
    &.social {
      &:before {
        border-radius: 50%;
      }
    }
  }
}

a,
  a:hover {
    &.social {
      overflow: visible;
      &:after {
        font-size: 46px;
        line-height: 46px;
      }
    }
    &.facebook {
      &:after {
        font-size: 44px;
      }
    }
    &.twitter {
      &:after {
        font-size: 50px;
        left: -4px;
        top: -1px;
      }
    }
    &.google-plus {
      &:after {
        font-size: 43px;
      }
    }
    &.pinterest {
      &:after {
        font-size: 50px;
        left: -2px;
        top: -2px;
      }
    }
    &.instagram {
      &:after {
        font-size: 47px;
        top: -2px;
      }
    }
    &.linked-in {
      &:after {
        font-size: 45px;
      }
    }
  }
}

/* start foreground modifier */
.fg-rise {
  a {
    &:after {
      transition: all .3s ease-in-out;
    }
    &:hover {
      &:after {
        transform: translateY(-8px);
      }
    }
  }

  .fg-color,
.bg-fade {
  a {
    &:after {
      color: $body-bg;
      transition: all .3s ease-in-out;
    }
    &:hover {
      &.facebook {
        &:after {
          color: $facebook;
        }
      }
      &.twitter {
        &:after {
          color: $twitter;
        }
      }
      &.google-plus {
        &:after {
          color: $google-plus;
        }
      }
      &.pinterest {
        &:after {
          color: $pinterest;
        }
      }
      &.instagram {
        &:after {
          color: $instagram;
        }
      }
      &.linked-in {
        &:after {
          color: $linked-in;
        }
      }
    }
  }
}

/* start background modifiers */
.bg-fall {
  a {
    overflow: visible;
    perspective: 40px;
    position: relative;
    &:before {
      transform: rotateX(0deg);
      transform-origin: center 44px;
      transform-style: preserve-3d;
      transition: all .3s ease-in-out;
    }
    &:hover {
      &:before {
        transform: rotateX(90deg);
      }
      &.facebook {
        &:before {
          background: linear-gradient(top, transparent, rgba($facebook, .7));
        }
      }
      &.twitter {
        &:before {
          background: linear-gradient(top, transparent, rgba($twitter, .7));
        }
      }
      &.google-plus {
        &:before {
          background: linear-gradient(top, transparent, rgba($google-plus, .7));
        }
      }
      &.pinterest {
        &:before {
          background: linear-gradient(top, transparent, rgba($pinterest, .7));
        }
      }
      &.instagram {
        &:before {
          background: linear-gradient(top, transparent, rgba($instagram, .7));
        }
      }
      &.linked-in {
        &:before {
          background: linear-gradient(top, transparent, rgba($linked-in, .7));
        }
      }
    }
  }
}