@import "base/reset";
@import "../../bower_components/SpinKit/scss/spinners/3-wave.scss";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);

// variables
$green: rgb(25, 202, 144);
$gray-dark: #495866;
$gray-cassette: #2F3B46;
$gray-light: #E8E9E9;
$pink: #E83B4E;
$yellow: #DB9845;
$white: #ffffff;
$vertical-space: 40px;

body {
  font-family: 'Open Sans', sans-serif;
}
.cassete-player {
  padding-top: 40px + 60px;

	svg {
      display: block;
      margin: 0 auto;
      position: relative;
      z-index: 100;
      margin-top: -40px;
  }
}

.sk-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -20px;
  
  .sk-rect {
    background-color: $green;
  }
}

#defaultCanvas0 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.hero {
  position: relative;
  min-height: 200px;
  background: $green;
  z-index: 100;

  &__title {
    color: $white;
    font-size: 26px;
    line-height: 36px;
    font-weight: 300;
  }
}
.mdl-grid {
  max-width: 800px;

  &__padded {
    padding: 100px 0;
  }
}
.mdl-layout--fixed-header {
  z-index: 1000;
}
.mdl-layout__header {
  background: white;
  color: black;

  .mdl-navigation__link {
    color: $gray-dark;
  }
}
.mdl-list {
  padding: 0 0 40px;

  &__item {
    background: $gray-light;
    font-weight: 300;
    margin-bottom: 20px;
  }
}
.mdl-list__item-icon.material-icons {
  //color: $white;
}
.mdl-list__item-avatar.material-icons {
  background: $white;
  color: $pink;
}
.mdl-button--fab.mdl-button--colored {
  //background: $pink;
}

.about {
  padding: $vertical-space 0;
}

.mdl-layout__content {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-flow: column nowrap;
   -ms-flex-flow: column nowrap;
   flex-flow: column nowrap;
}

.mdl-layout__content > *:not(.mdl-layout-spacer) {
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
}

.mdl-layout__header .mdl-layout__drawer-button {
  color: $gray-dark;
}

h2 {
  font-size: 24px;
  line-height: 34px;
  padding-bottom: 20px;
}
p {
  font-size: 18px;
  line-height: 28px;
}

.technology {
  background: $gray-light;
}
