html, body {
  height: 100%;
  padding-bottom: 0;
}

@media (min-width:768px) {
	.container {
		width:750px
	}
}
@media (min-width:992px) {
	.container {
		width:950px
	}
}
@media (min-width:1200px) {
	.container {
		width:950px
	}
}

.header {
    background-image: url("/static/images/main-header.png");
    background-size: auto 100%;
    color: black;
}

.row-squares {
    overflow: hidden;
}

.square-1 {
    background-color: #89ADC3;
}

.square-2 {
    background-color: #9499CC;
}

.square-3 {
    background-color: #BAD2E0;
}

.square-4 {
    background-color: #8DCDAC;
}

.square-1, .square-2, .square-3, .square-4 {
    padding: 20px;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    border-left: 10px solid white;
}

.square-1 h2, .square-2 h2, .square-3 h2, .square-4 h2 {
    text-align: center;
    margin-top: 0px;
}

.square-1 p, .square-2 p, .square-3 p, .square-4 p {
    padding-bottom: 10px;
}

.square-1:hover, .square-2:hover, .square-3:hover, .square-4:hover {
    color: #EAEAEA;
}

.install {
    font-size:120%;
    text-align: center;
}

.install p {
    margin: 0px;
}

.logo {
    width: 25px;
    display: block;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:100px; /* this needs to be bigger than footer height*/
}

.footer {
    padding-top: 20px;
    text-align: center;
    font-size: 15px;
    font-weight: 200;
    background-color: #eeeeee;
    position: relative;
    margin-top: -70px; /* negative value of footer height */
    height: 70px;
    clear: both;
}