* {
  font-family: sans-serif;
}
body {
  margin: 0px;
}
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position:absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}

.page {
  position:absolute;
}
/*Application Title*/
header {
  position: fixed;
  width:100%;
  top: -10vw;
  left: -10vw;
}
header h1 {
  position:fixed;
  font-size: 8em;
  top:-1.1em;
}
header h2 {
  position:fixed;
  font-size: 6em;
  top:-1em;
  left: 35vw;
}

@media screen and (max-height:575px) {
  header h1 {
    font-size: 5em;
  }
  header h2 {
    font-size: 4em;
  }
}

header .back-button img {
  width: 40vw;
  height:40vw;
}
/*Display Div Styles*/

.display {
  margin-top: 20vh;
}

.display-bpm-container {
  text-align: center;
}


.display h2 {
  font-size: 4em;
}
.display h2 span {
  font-size: 2em;
}

/* Controls section*/

/*Horizontal rule, denoting selected bpm*/
.hr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 10px;
  width: 100vw;
}
.hr-line {
  position:fixed;
  width: 100%;
  margin-top:2px;
  height: 5px;
  -webkit-clip-path: polygon(0% 50%, 50% 100%, 100% 50%, 50% 0%);
  clip-path: polygon(0% 50%, 50% 100%, 100% 50%, 50% 0%);
  border-radius: 100%;
}
.hr-circle {
  width:10px;
  height:10px;
  border-radius: 100%;
}

/* BPM Selector */

a {
  color: inherit;
  text-decoration: none;
}

.bpm-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  width:100vw;
  overflow-x:auto;
  height:10vh;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.bpm-item {
  margin-right:7px;
  margin-left:7px;
  font-size:;
}

/* Stop / Play and Settings*/
.controls-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-direction:row;
  flex-direction:row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}
.stop-start-button img {
  width:40vw;
  height: 40vw;
}

.settings-button{
  position:fixed;
  right:10vw;
}
.settings-button img {
  width: 10vw;
  height: 10vw;
}

/* List Styles*/

ul {
  width:100vw;
  padding-left:25vw;
}
li {
  width:75vw;
  list-style-type: none;
  margin-top:;
}
li .title {
  font-size:2em;
}
li .data {
  margin-left:5%;
  font-size: 0.7em;
  text-transform: uppercase;
}
li .sample {
  position: relative;
  left: -55px;
  top:30px;
  margin-top:10px;
  width:30px;
  height:30px;
  border: 5px solid rgba(255,255,255,0.5);
}

li .sample img {
  width: 30px;
  height: 30px;
}

li .sample-icon {
  background-color: none;
  border: none;
}


/* white-on-black theme */
body.white-on-black {
  background-color: black;
  color:white;
}
.white-on-black header h1 {
}
.white-on-black .hr .hr-line {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), color-stop(rgba(255,255,255,1)),to(rgba(255,255,255,0)));
  background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1),rgba(255,255,255,0));
}
.white-on-black .hr .hr-circle {
  background-color: white;
}

.white-on-black-sample {
  background-color: rgba(1,1,1,1);
}

/*white-on-red theme*/

body.white-on-red {
  background-color: rgba(200,1,1,1);
  color:white;
}
.white-on-red header h1 {
}
.white-on-red .hr .hr-line {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), color-stop(rgba(255,255,255,1)),to(rgba(255,255,255,0)));
  background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1),rgba(255,255,255,0));
}
.white-on-red .hr .hr-circle {
  background-color: white;
}

.white-on-red-sample {
  background-color: rgba(200,1,1,1);
}

/*white-on-blue theme*/

body.white-on-blue {
  background-color: rgba(1,1,200,1);
  color:white;
}
.white-on-blue header h1 {
}
.white-on-blue .hr .hr-line {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), color-stop(rgba(255,255,255,1)),to(rgba(255,255,255,0)));
  background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1),rgba(255,255,255,0));
}
.white-on-blue .hr .hr-circle {
  background-color: white;
}

.white-on-blue-sample {
  background-color: rgba(1,1,200,1);
}

/* ANIMATIONS
============================================================================= */

/* leaving animations ----------------------------------------*/

@-webkit-keyframes exitFlipForeground {
  from {
    -webkit-transform: scale(1) translateX(0) translateZ(0px) rotate3d(0,1,0, 0);
    transform: scale(1) translateX(0) translateZ(0px) rotate3d(0,1,0, 0);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(2) translateX(-50vw) translateZ(50vw)  rotate3d(0,1,0, -90deg);
    transform: scale(2) translateX(-50vw) translateZ(50vw)  rotate3d(0,1,0, -90deg);
    opacity: 1;
  }
}

@keyframes exitFlipForeground {
  from {
    -webkit-transform: scale(1) translateX(0) translateZ(0px) rotate3d(0,1,0, 0);
    transform: scale(1) translateX(0) translateZ(0px) rotate3d(0,1,0, 0);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(2) translateX(-50vw) translateZ(50vw)  rotate3d(0,1,0, -90deg);
    transform: scale(2) translateX(-50vw) translateZ(50vw)  rotate3d(0,1,0, -90deg);
    opacity: 1;
  }
}

@-webkit-keyframes exitFlipBackground {
    from {
        -webkit-transform: scale(1) translateX(0) translateZ(0px) rotate3d(0,1,0, 0);
        transform: scale(1) translateX(0) translateZ(0px) rotate3d(0,1,0, 0);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(0.5) translateX(-50vw) translateZ(-50vw) rotate3d(0,1,0, 90deg);
        transform: scale(0.5) translateX(-50vw) translateZ(-50vw) rotate3d(0,1,0, 90deg);
        opacity:0;
    }
}

@keyframes exitFlipBackground {
    from {
        -webkit-transform: scale(1) translateX(0) translateZ(0px) rotate3d(0,1,0, 0);
        transform: scale(1) translateX(0) translateZ(0px) rotate3d(0,1,0, 0);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(0.5) translateX(-50vw) translateZ(-50vw) rotate3d(0,1,0, 90deg);
        transform: scale(0.5) translateX(-50vw) translateZ(-50vw) rotate3d(0,1,0, 90deg);
        opacity:0;
    }
}


/* entering animations --------------------------------------- */

@-webkit-keyframes enterFlipBackground {
  from {
    -webkit-transform: scale(0.5) translateX(-50vw) translateZ(-50vw) rotate3d(0,1,0, 90deg);
    transform: scale(0.5) translateX(-50vw) translateZ(-50vw) rotate3d(0,1,0, 90deg);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1) translateX(0) translateZ(0) rotate3d(0,1,0, 0deg);
    transform: scale(1) translateX(0) translateZ(0) rotate3d(0,1,0, 0deg);
    opacity: 1;
  }
}

@keyframes enterFlipBackground {
  from {
    -webkit-transform: scale(0.5) translateX(-50vw) translateZ(-50vw) rotate3d(0,1,0, 90deg);
    transform: scale(0.5) translateX(-50vw) translateZ(-50vw) rotate3d(0,1,0, 90deg);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1) translateX(0) translateZ(0) rotate3d(0,1,0, 0deg);
    transform: scale(1) translateX(0) translateZ(0) rotate3d(0,1,0, 0deg);
    opacity: 1;
  }
}

@-webkit-keyframes enterFlipForeground {
    from {
        -webkit-transform: scale(2) translateX(-50vw) translateZ(50vw) rotate3d(0,1,0, -90deg);
        transform: scale(2) translateX(-50vw) translateZ(50vw) rotate3d(0,1,0, -90deg);
        opacity:1;
    }
    to {
        -webkit-transform: scale(1) translateX(0) translateZ(50px) rotate3d(0,1,0, 0deg);
        transform: scale(1) translateX(0) translateZ(50px) rotate3d(0,1,0, 0deg);
        opacity:1;
    }
}

@keyframes enterFlipForeground {
    from {
        -webkit-transform: scale(2) translateX(-50vw) translateZ(50vw) rotate3d(0,1,0, -90deg);
        transform: scale(2) translateX(-50vw) translateZ(50vw) rotate3d(0,1,0, -90deg);
        opacity:1;
    }
    to {
        -webkit-transform: scale(1) translateX(0) translateZ(50px) rotate3d(0,1,0, 0deg);
        transform: scale(1) translateX(0) translateZ(50px) rotate3d(0,1,0, 0deg);
        opacity:1;
    }
}

/* Hierarchical AngularJS Page Animation Styles */
.right-to-left.ng-enter {
  -webkit-animation: enterFlipBackground 0.4s ease-in;
  animation: enterFlipBackground 0.4s ease-in;
  z-index: 8888;
}

.right-to-left.ng-leave {
  -webkit-animation: exitFlipForeground 0.4s ease-in;
  animation: exitFlipForeground 0.4s ease-in;
  z-index: 9999;
}

.left-to-right.ng-enter {
  -webkit-animation: enterFlipForeground 0.4s ease-in;
  animation: enterFlipForeground 0.4s ease-in;
  z-index: 8888;
}

.left-to-right.ng-leave {
  -webkit-animation: exitFlipBackground 0.4s ease-in;
  animation: exitFlipBackground 0.4s ease-in;
  z-index: 9999;
}

/* Hierarchical AngularJS Page Animation Styles (V2) */

.top-level.ng-enter {
  -webkit-animation: enterFlipForeground 0.4s ease-in;
  animation: enterFlipForeground 0.4s ease-in;
  z-index: 8888;
}

.top-level.ng-leave {
  -webkit-animation: exitFlipForeground 0.4s ease-in;
  animation: exitFlipForeground 0.4s ease-in;
  z-index: 9999;
}

.bottom-level.ng-enter {
  -webkit-animation: enterFlipBackground 0.4s ease-in;
  animation: enterFlipBackground 0.4s ease-in;
  z-index: 8888;
}


.bottom-level.ng-leave {
  -webkit-animation: exitFlipBackground 0.4s ease-in;
  animation: exitFlipBackground 0.4s ease-in;
  z-index: 9999;
}