// Global Styles
@import 'import';

// Import Roboto Font // -----------------------------------

@import url(//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,700,700italic);


// Body // -----------------------------------

* {
  .box-sizing(border-box);
}
html body {
  .type-body();
  height: 100%;
  margin: 0;
  color: @color-black;
  background: @color-white;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  .transition(all 0.2s ease);
  text-decoration: none;
  color: inherit;
}
h1, h2, h3, h4, h5 {
  margin: 0;
}
h2 {
  .type-size-display();
  font-weight: 500;
}
img {
  width: 100%;
}
label {
  .type-caption();
  color: @color-black-light;
}
p {
  margin: 0;
}
ul {
  padding: 0;
  margin: 0;
}


.header-logo {
  width: 152px;
  padding: 9px 0 0 8px;
}

.content {
  font-size: 120%;

  @media @xs {
    padding: 0px;
  }

  @media @md {
    padding: 20px;
  }

  p {
    margin: 1em 0;
  }
  a {
    border-bottom: 4px solid @color-accent-light;
  }
  li {
    line-height: 200%;
  }
  hr {
    margin: 2em 0;
    border-style: solid;
    border-color: @color-black-lightest;
  }
}

html @{deep} .control {
  margin: 0 10px;
}

html .control {
  margin: 0 10px;
}

.animated-page-container {
  position: relative;

  > .page-content {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
  }

}

[drawer] {
  background-color: @color-white;
}

[main] {
  background-color: @color-bg-grey;
}

.settings-form {
  position: absolute;
  padding: 15px 20px 0 5px;
  width: 100%;

  @media @md {
    width: 60%;
  }
}

div[action-buttons] {
  margin-bottom: 60px;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
