/*  Fonts  */
@font-face {
    font-family: 'raleway-regular';
    src: url('../fonts/raleway-regular.eot');
    src: url('../fonts/raleway-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-regular.woff') format('woff'),
         url('../fonts/raleway-regular.ttf') format('truetype'),
         url('../fonts/raleway-regular.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
body{ margin:0;}

#container {
    width: 100vw;
    height: 100vh;
    text-align: center;
    overflow: hidden;
}
#videobcg {
    width: inherit;
    height: inherit;
    -o-filter: blur(15px);
    filter: blur(4px);
    object-fit: cover;
    transform: scale(1.06); /* scale up to hide the edge blur */
}

body { 
	background-image: url("../img/background.jpg");
}

h1 {
   font-size: 100px;
}

.content {
    color: white;
}


/* Footer */
.footer {
    position: absolute;
    bottom: 0;
    color: Snow;
}


@import "bourbon";

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

$color: rgba(0,124,205,1);

/* psuedo element animations */
@include keyframes( downloadBounce ) {
  to {
    @include transform( translateY(0px) rotate(50deg) );
  } 
}
@include keyframes( downloadBounce2 ) {
  to {
    @include transform( translateY(0px) rotate(-50deg) );
  } 
}

body {
  background: #D6DCE4;
  text-align: center;
  padding: 4em 0;
  font-family: 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
}
.download {
    /* rounded corner overflow mask fix */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    overflow: hidden;
    border-radius: 5px;
    @include box-sizing( border-box );
    background: $color;
    border: 2px solid $color;
    color: white;
    padding: 26px 0 26px 28px;
    width: 220px;
    display: inline-block;
    position: relative;
    @include transition ( all 300ms ease );
    margin-right: 20px;
    span {
      display: block;
      position: relative;
      z-index: 1;
      @include transform( translate(0, 0) );
      &:after, &:before {
        content: '';
        width: 1px;
        height: 16px;
        background: $color;
        opacity: 0;
        position: absolute;
        left: 50%;
        top: 100%;
        @include transition ( all 10ms ease-out ); 
        @include transform-origin( center bottom );
        @include transform( translateY(0) rotate(0deg) );
        @include animation(0);
      }
    }
    svg {
      z-index: 0;
      fill: rgba(255,255,255,1);
      position: absolute;
      left: 20%;
      top: 50%;
      @include transform( translate(-50%, -50%)  rotate(0deg) scale(.04857)  );
      @include transition ( all 350ms ease-out ); 
      height: 700px;
    }
    svg#linux {
      @include transform( translate(-50%, -50%)  rotate(0deg) scale(.05857)  );
    }
    &:hover {
      padding: 26px 0;
      color: $color;
      svg {
        left: 50%;
        @include transform( translate(-50%, -50%) rotate(60deg) scale(1) );
      }
      svg#windows {
        @include transform( translate(-50%, -10%) rotate(60deg) scale(1) );
      }
      svg#linux {
        @include transform( translate(-120%, -125%) rotate(60deg) scale(6) );
      }
      span {
        @include transform( translate(0, -10px) scale(1.1) );
        @include transition ( transform 400ms ease-out 400ms );
        &:after, &:before {
          opacity: 1;
          @include transition ( all 400ms ease-out 400ms, transform 300ms ease-in 100ms );
        }
        &:after {
          @include transform( translateY(7px) rotate(50deg) );
          @include animation( downloadBounce 800ms linear alternate infinite);
        }
        &:before {
          @include transform( translateY(7px) rotate(-50deg) );
          @include animation( downloadBounce2 800ms linear alternate infinite);
        }
      }
    }
  }