[layout="categories"].layout {
  padding: 1.5em 2em;
  height: 100%;
  width: 100%;
  display: inline-block;
  vertical-align: top;
  padding: 1.5em 2em;
}
@media screen and (min-width: 0px) {
  [layout="categories"].layout {
    padding: 1.5em 2em 1.5em 1.3em;
  }
}
@media screen and (min-width: 900px) {
  [layout="categories"].layout {
    padding: 1.5em 2em;
  }
}
[layout="categories"] .P0 {
  margin-left: .7em;
}
[layout="categories"] .P1 {
  margin-left: .4em;
}
[layout="categories"] .P1 .title {
  margin: 0.0em 0.1em;
}

[layout="category"].layout {
  padding: 1.5em 2em;
  height: 99%;
  width: 100%;
  display: inline-block;
  vertical-align: top;
  overflow-y: scroll;
}
[layout="category"] .P0 {
  margin-left: .6em;
}

[layout="home"].layout {
  height: 100%;
  width: 100%;
  display: inline-block;
  vertical-align: top;
}
[layout="home"] .P1 {
  width: 95%;
  margin: 2em 2.5%;
}
[layout="home"] .P2 {
  width: 95%;
  margin: 2em 2.5%;
}
[layout="home"] .P2 .cub_container:nth-child(1), [layout="home"] .P2 .cub_container:nth-child(2) {
  vertical-align: top;
  display: inline-block;
}
[layout="home"] .P2 .cub_container:nth-child(2) {
  width: 100%;
}

.launchVideo {
  border: solid 1px #999;
  border-radius: 5px;
  cursor: pointer;
  float: right;
  font-family: inherit;
  font-size: .8em;
  letter-spacing: .1em;
  line-height: 1em;
  margin: auto auto auto auto;
  padding: .75em 2em;
  text-transform: uppercase;
  width: 70%;
  background-color: #F0F0F0;
  bottom: auto;
  top: 9.5vh;
}

.videoClose {
  float: right;
  font-size: 2em;
}

.videoContainer {
  margin-top: 5px;
  background-color: #f0f0f0;
}

.video {
  border-radius: 5px;
  width: 100%;
  height: 100%;
}

/* 
This is to prevent menu from shortening when dialog is displayed. 
What happens is when dialog is displayed, some element in dialog overflows the body and scrollbars
should appear but since it was set to overflow:hidden, it just clips everything out.
*/
body.ngdialog-open {
  overflow: visible;
}

html {
  overflow: hidden;
}