@charset "UTF-8";
/* CSS Document */


html * {
	font-size: 1em;
	color: #FFF !important;
	font-family: "HK Grotesk Pro", Arial, sans-serif;
	height: auto;
}

body {
	background-color: #cd5251;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align: center;
	font-family: "HK Grotesk Pro", Arial, sans-serif;
	height: 100%;
	overflow: scroll;
}

p {
	color: #fff;
	font-size: 0.9em;
	line-height: 1.6em;
	margin: 0px auto 10px;
}

h2 {
	color: #fff;
	font-weight: bold;
	font-size: 1.9em;
	letter-spacing: 1px;
	margin-bottom: 100px;
}

h3 {
	color: #fff;
	font-weight: bold;
	font-size: 1.2em;
	letter-spacing: 1px;
	margin: 5px 0;
}

.col1 {
	width: 100%;
	float: left;
	font-size: 0.8em;
	text-align: center;
}

#center-content {
	width: 200px;
	position: relative;
	font-size: 0.8em;
	margin: 20px auto;
}

a {
	text-decoration: underline;
	font-weight: bold;
	font-size: 0.9em;
	letter-spacing: 1px;
}

#mail {
	font-size: 0.9em;
	letter-spacing: 1px;
}

.container {
	max-width: 450px;
	position: absolute;
	top: 10%;
	left: 50%;
	margin-left: -230px;
	display: block;
}

#logo {
	background-image: url(../images/BANG-architecture-logo.png);
	background-repeat: no-repeat;
	background-size: 242px 96px;
	width: 242px;
	height: 96px;
	margin: 0 auto 30px;
	text-indent: -10000px;
	margin-bottom:100px;
}


/*  ------------------------------
	Tablet (Portrait)
	------------------------------  */
/*  Note: Design for a width of 768px  */

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.container {
		position: fixed;
		margin-left: -250px;
	}
}


/*  ------------------------------
	Mobile (Portrait)
	------------------------------  */
/*  Note: Design for a width of 320px  */

@media only screen and (max-width: 767px) {
	.container {
		width: 300px;
		margin-left: -150px;
	}

	.container .one.column {
		width: 300px;
	}

	h2 {
		font-size: 1.2em;
		padding: 20px;
		margin-bottom: 50px;
	}

	h3 {
		font-size: 1em;
		padding: 0 !important;
		margin-top: 30px !important;
	}

	#logo {
		background-image: url(../images/BANG-architecture-logo@3x.png);
		background-repeat: no-repeat;
		background-size: 178px 69px;
		width: 178px;
		height: 69px;
		margin: 0 auto 0px;
		text-indent: -10000px;
		margin-bottom: 50px;
		}

	p {
		margin: 0px auto 10px;
	}

	#mail{
		font-size: 1.3em;
		letter-spacing: 1px;
		font-weight: 800;
		}
}


/*  ------------------------------
	Mobile (Landscape)
	------------------------------  */
/*  Note: Design for a width of 480px  */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	.container {
		width: 420px;
		margin-left: -210px;
		top: 30%;
		}

	.container .one.column {
		width: 420px;
		}

	#mail {
		font-size: 1.3em;
		letter-spacing: 1px;
		}
}


/*  ------------------------------
	Clearing
	------------------------------  */

/*  Self Clearing Goodness  */

	.container:after {
		content: "\0020";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
		}

/*  Use clearfix class on parent to clear nested columns,
	or wrap each row of columns in a <div class="row">  */

	.clearfix:before, .clearfix:after, .row:before, .row:after {
		content: '\0020';
		display: block;
		overflow: scroll;
		visibility: hidden;
		width: 0;
		height: 0;
		}

		.row:after, .clearfix:after {
		clear: both;
		}

		.row, .clearfix {
		zoom: 1;
		}

/*  You can also use a <br class="clear" /> to clear columns */
	.clear {
		clear: both;
		display: block;
		overflow: scroll;
		visibility: hidden;
		width: 0;
		height: 0;
		}