body {
	margin: 0;
}
html {
	overflow-y: auto;
}

.hide {
	display: none;
}

.small-box {
    padding: 10px;
    border-radius: 5px;
    margin: 0px 0px 0px 0px;
    -webkit-box-shadow: 0px 1px 2px 0 rgb(221, 221, 221);
    box-shadow: 0px 1px 2px 0 rgb(221, 221, 221);
    background-color: #ffffff;
}

/* BIG FRONT IMAGE ++++++++++++++++++++++++++++ */

#hero { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* ++++++++++++++++++ FOOTER +++++++++++++++++++++++++++++++ */

.footer {
	height: 70px;
	background-color:#d4d4d4;
	color: rgb(104, 104, 104);
	padding:0px;
	font-size:80%;
	margin: 0px 0px;
}

.footer-image {
	width: 70%;
	opacity: 0.7;
}

a.footer-link:hover {
	color: rgb(58, 58, 58) !important;
}

/* +++++++++++++ g-grid ++++++++++++++ */

.g-container {
    width: 70vw;
    margin: auto;
}

.g-flex-grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.g-col {
    flex: 10;
    padding: 7px;
}

.g-half-col {
    flex: 5;
    padding: 7px;
	width: 50%;
}

.g-third-col {
    flex: 3.32;
    padding: 7px;
	width: 33%;
}

.g-two-thirds-col {
    flex: 6.66;
    padding: 7px;
	width: 66%;
}

.g-quarter-col {
    flex: 2.5;
    padding: 7px;
	max-width: 25%;
}

.g-three-quarter-col {
    flex: 7.5;
    padding: 7px;
	width: 75%;
}

.g-fifth-col {
    flex: 2;
    padding: 7px;
	width: 20%;
}

.g-two-fifths-col {
    flex: 4;
    padding: 7px;
	width: 40%;
}

.g-three-fifths-col {
    flex: 6;
    padding: 7px;
	width: 60%;
}

.g-four-fifths-col {
    flex: 8;
    padding: 7px;
	width: 80%;
}

.g-eighth-col {
    flex: 1.25;
    padding: 7px;
	width: 12.5%;
}

.g-seven-eighths-col {
    flex: 8.75;
    padding: 7px;
	width: 87.5%;
}


/* ++++++++++++++++++++++ Max Width 1000px +++++++++++++++++++++ */

@media (max-width: 1000px) {

	.g-container {
        width:95vw;
    }

	#userInfo {
		display:none;
	}

}

/* ++++++++++++++++++++++ Max Width 600px +++++++++++++++++++++ */

@media (max-width: 600px) {

	#frontImage {
		width:95% !important;
	}

    .g-flex-grid {
        display: block;
    }

    .no-stack {
        display: flex !important;
        flex-direction: row;
    }

	.g-half-col,
	.g-quarter-col,
	.g-third-col,
	.g-two-fifths-col,
	.g-three-fifths-col,
    .g-small-container {
        max-width:100%;
		width: 100%;
    }

	.g-container {
		max-width:95vw;
		width: 95vw;
		margin:auto;
	}

}