/* Parallax base styles
--------------------------------------------- */

.parallax {
  height: 500px; /* fallback for older browsers */
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 300px;
  perspective: 300px;
  width:100%;
}

.parallax__group {
  position: relative;
  height: 500px; /* fallback for older browsers */
  height: 150vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.parallax__layer--fore {
  -webkit-transform: translateZ(90px) scale(.7);
  transform: translateZ(90px) scale(.7);
  z-index: 1;
}

.parallax__layer--base {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 4;
}

.parallax__layer--back {
  -webkit-transform: translateZ(-300px) scale(2);
  transform: translateZ(-300px) scale(2);
  z-index: 3;
}

.parallax__layer--deep {
  -webkit-transform: translateZ(-600px) scale(3);
  transform: translateZ(-600px) scale(3);
  z-index: 2;
}


/* demo styles
--------------------------------------------- */

body, html {
  overflow: hidden;
  font-family: 'Arimo';
}

* {
  margin:0;
  padding:0;
}

table, th, tr {
  height: inherit;
  width: 100%;
  /*border: 1px solid black;*/
  font-size: 12px;
}

th {
  width: 25%;
  padding: 5px;
}

.parallax {
  font-size: 13px;
}

/* style the groups
--------------------------------------------- */

#group1 {
  z-index: 3; /* slide over group 2 */
}
#group2 {
  z-index: 5; /* slide under groups 1 and 3 */
}
#group3 {
  z-index: 4; /* slide over group 2 and 4 */
}
#group4 {
  z-index: 2; /* slide under group 3 and 5 */
}
#group5 {
  z-index: 3; /* slide over group 4 and 6 */
}
#group6 {
  z-index: 1; /* slide under group 5 and 7 */
}
#group7 {
  z-index: 3; /* slide over group 7 */
}
#group8 {
  z-index: 4; /* slide over group 7 */
}
#group9 {
  z-index: 1; /* slide over group 7 */
}
#group10 {
  z-index: 2; /* slide over group 7 */
}
#group11 {
  z-index: 1; /* slide over group 2 */
}
#group12 {
  z-index: 5; /* slide under groups 1 and 3 */
}
#group13 {
  z-index: 4; /* slide over group 2 and 4 */
}
#group14 {
  z-index: 2; /* slide under group 3 and 5 */
}
#group15 {
  z-index: 3; /* slide over group 4 and 6 */
}
#group16 {
  z-index: 1; /* slide under group 5 and 7 */
}
#group17 {
  z-index: 3; /* slide over group 7 */
}
#group18 {
  z-index: 4; /* slide over group 7 */
}
#group19 {
  z-index: 1; /* slide over group 7 */
}
#group20 {
  z-index: 2; /* slide over group 7 */
}
#group21 {
  z-index: 3; /* slide over group 2 */
}
#group22 {
  z-index: 5; /* slide under groups 1 and 3 */
}
#group23 {
  z-index: 4; /* slide over group 2 and 4 */
}
#group24 {
  z-index: 2; /* slide under group 3 and 5 */
}
#group25 {
  z-index: 3; /* slide over group 4 and 6 */
}
#group26 {
  z-index: 1; /* slide under group 5 and 7 */
}
#group27 {
  z-index: 3; /* slide over group 7 */
}
#group28 {
  z-index: 4; /* slide over group 7 */
}
#group29 {
  z-index: 1; /* slide over group 7 */
}
#group30 {
  z-index: 2; /* slide over group 7 */
}

/* other */
#header {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 25px;
}

#felipa {
  font-family: 'Felipa';
  font-size: 26px;
  text-align: center;
}

.footer {
  width: 100%;
  height: 25px;
  position: fixed;
  bottom: 0px;
  left: 0px;
  color: black;
  padding: 0px 15px;
}

#menu {
  z-index: 1000;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 150px;
  height: auto;
  padding: 15px;
  text-align: right;
  font-size: 13px;
}

#content {
  width: calc(100% - 50px);
  height: auto;
  font-size: 12px;
  padding: 0px 25px;
}

/*#menu:hover {
  background-color: black;
  color: white;
}

#menu:hover .hide{
  opacity: 1;
}*/

.work {
  width: 700px;
}

.install {
  width: 600px;
}

.research {
  width: 450px;
}

.space {
  height: 100%;
  width: 100%;
  display: inline-block;
}

.hide {
  color: white;
  opacity: 0;
}

.description {
  height: 15px;
  width: calc(100%-2px);
  padding: 2px 0px 2px 2px;
  text-align: left;
  color: black;
}

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

/* bootstrap modifications */
.nav-link {
  padding: .2rem 0rem;
  z-index: 1000;
  color: black;
}

a:hover {
  color: black;
}

.row {
  z-index: 0;
}