/*
 * Lulu Parallax Demo
 *
 * Copyright 2016 Carlos Ruiz / carlosruiz.me
 *
 * This CSS is used only to support the demo page
 */


body {
  background: #fff;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {

body {
  background-color: #ccc;
}

h1,  h4 { color: #eee; }


.container { margin-bottom: 20px; }

.wrapper {
  float: left;
  width: 100%;
}

.wrapper .container {
  background-color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
}
@media (min-width: 768px) {

.wrapper .container {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
}

pre .indent-1 { margin-left: 10px; }

pre .indent-2 { margin-left: 20px; }

pre .indent-3 { margin-left: 30px; }

pre .indent-4 { margin-left: 40px; }

pre .indent-5 { margin-left: 50px; }

/* */

.parallax-group {
  height: 50vw;
  float: left;
  margin: 20px 0 40px 0;
}

.parallax-group .parallax-container.background {
  height: 100vw;
  display: table;
}

.parallax-group.group-a .parallax-container.background { background-image: url("https://unsplash.it/1500/1500?image=785"); /* 1:1 */ }

.parallax-group.group-b .parallax-container.background { background-image: url("https://unsplash.it/1500/1500?image=791"); /* 1:1 */ }

.parallax-group.group-c .parallax-container.background { background-image: url("https://unsplash.it/1500/1500?image=786"); /* 1:1 */ }

.parallax-group .parallax-container.foreground {
  height: 15vw;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.50);
  color: #fff;
  display: table;
}

.parallax-group .parallax-container .info {
  display: table-cell;
  vertical-align: middle;
  padding: 0 2em;
  color: #fff;
  font-size: 1em;
  line-height: 1em;
  font-family: Verdana;
}

.parallax-group .parallax-container .info.info-a { text-align: center; }

.parallax-group .parallax-container .info.info-b { text-align: left; }

.parallax-group .parallax-container .info.info-c { text-align: right; }

.placeholder {
  height: 800px;
  float: left;
  width: 100%;
}