body{
  font-family: Helvetica, Arial, sans-serif;
  background: #000000 url("../images/bg_pexels.jpg") no-repeat fixed center center;
  background-size: 200%; 
}

#page{
  border: 2px dashed #999999;
  min-height: 400px;
  padding: 20px;
  /* margin: 0 auto; */
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

.column1, .column2{
  background-color: lightblue;
  min-height: 400px;
  color: #ffffff;
}

h1, p{
  text-align:center;
}

#page .column1{
  width: 620px;
  float: left;
}

#page .column2{
  width: 320px;
  float: right;
}

#page-liquid{
  border: 2px dashed #999999;
  min-height: 400px;
  padding: 2%;
  /* margin: 0 auto; */
  margin-left: auto;
  margin-right: auto;
  width: 96%;
}

#page-liquid .column1{
  width: 60%;
  float:left;
}

#page-liquid .column2{
  width: 38%;
  float:right;
}

#page-hybrid{
  border: 2px dashed #999999;
  min-height: 400px;
  padding: 20px;
  /* margin: 0 auto; */
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
}


#page-hybrid .column1{
  width: 60%;
  float:left;
}

#page-hybrid .column2{
  width: 38%;
  float:right;
}

/* page layout example */

#page-layout{
  border: 2px dashed #999999;
  min-height: 400px;
  width: 940px;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
}

header, footer,
.banner, .hero {
  background-color: lightblue;
  padding: 10px;
  margin-bottom: 20px
}

.banner{
  height: 300px;
  background: url('../images/cat.png'), url('../images/bg_pexels.jpg'); 
  background-size: cover;
  background-position: center center;
}

.hero{
  min-height: 300px;
}

section {
  /* overflow: auto; */
  display: flow-root;  clear:both;
  margin-bottom: 20px
}

.cta div {
  width:300px;
  background-color: lightblue;
  min-height: 200px;
  float:left;
  margin-right: 20px;
}

.cta div.last{
  margin-right: 0;
}

footer{
  clear: left;
}

.hero img{
  width:auto;
  height: 250px;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 20px;
}

.hero p{
  text-align: left;
}

.float-left{
  float:left;
}

.float-right{
  float:right;
}

.hero div,
.hero div p{
  text-align:center;
}