@charset"UTF-8";

@font-face {
    font-family: Gotham-Light;
    src: url(Gotham-Light.otf);
}

@font-face {
    font-family: Gotham-Bold;
    src: url(Gotham-Bold.otf);
}

body {
	background-color: black;
	color: white;
	font-family: Gotham-Light, Arial, sans-serif;
	font-size: 18px;
}

.scroller {
	width: 100%;
	height: auto;
	min-height: 1000px;
}

#main_container {
	position: relative;
	width: 100%;
	height: auto;
	margin: auto;
}

#main_container2 {
	position: relative;
	width: 100%;
	height: 768px;
	margin: auto;
}


@media screen and (max-width: 480px) { 
	#squares {
		position:relative;
		float: left;
		width: 100%;
		height: 0;
		background-image: url('LoopSquares_m.jpg');
		background-size: cover;
		background-repeat: no-repeat; 
		padding-top: 177.5%;
 	}
	
	a.stayin:link, a.stayin:visited {
	 	font-family: Gotham-Bold, Arial, sans-serif;
	 	font-size: 12px;
	 	color: white;
	 	padding: 12px 32px;
	 	border: 1px white solid;
	 	background-color: transparent;
	    text-align: center;
	    text-decoration: none;
	 }
	 
 	.logo {
 		position:absolute;
 		margin: 0;
 		top: 50%;
 		left: 50%;
 		border: none;
 		transform: translate(-50%, -50%);
		width: 398px;
		max-width: 85%;
 	}
	
	.logo img {
		width: 100%;
	}
	
	.hashtag {
		display: none;
	}

}

@media screen and (min-width: 481px) { 
	#squares {
		position:relative;
		float: left;
		width: 100%; 
		height: 0;
		box-sizing: border-box;
		background-image: url('LoopSquares.jpg'); 
		background-size: cover;
		background-repeat: no-repeat;
		padding-top: 75%; 
	}
	
	a.stayin:link, a.stayin:visited {
		font-family: Gotham-Bold, Arial, sans-serif;
		font-size: 10px;
		color: white;
		padding: 10px 28px;
		border: 1px white solid;
		background-color: transparent;
	    text-align: center;
	    text-decoration: none;
	}
	
	.logo {
		position:absolute;
		margin: 0;
		top: 50%;
		left: 50%;
		border: none;
		transform: translate(-50%, -50%);
		width: 517px;
		max-width: 62%;
		z-index: 2;
	}
	
	.logo img {
		width: 100%;
	}
	
	.hashtag {
		font-family: Gotham-Bold, Arial, sans-serif;
		font-size:14px;
		position:absolute;
		bottom: auto;
		right: 2px;
		float: right;
	    -ms-transform: rotate(90deg);
	    -webkit-transform: rotate(90deg); 
	    transform: rotate(90deg);
		top: 45%;
	}
	
	
}

#column_one {
	float: left;
	width: 25%;
	height: 768px;
	padding: 32px;
	content-align: center;
	box-sizing: border-box;
}

#column_oneb {
	float: left;
	width: 75%;
	height: 768px;
	padding: 32px;
	content-align: left;
	box-sizing: border-box;
}

#column_two {
	float: left;
	width: 50%;
	height: 768px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

#column_two img{
    margin-top: -262px;
	z-index: 1;
}
#column_three {
	float: left;
	width: 25%;
	height: 704px;
	padding: 32px;
	text-align: right;
	box-sizing: border-box;
}

#column_three img {
	float: right;
	display: inline-block;
}
 


.brand {
	font-size: 40px;
	text-decoration: underline;
	float: left;
	-moz-text-decoration-color: #fddc00; 
	text-decoration-color: #fddc00;
	display:inline;
}

.bold {
	font-family: Gotham-Bold, Arial, sans-serif;
	display:inline;
}

.signup {
	background-color: #fddc00;
	font-family: Gotham-Bold, Arial, sans-serif;
	width: 440px;
	height: 257px;
    position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.signup p{
	text-align: center;
	margin-bottom: 5;
	font-size: 20px;
}

.signup h2{
	margin: 0;
	font-size: 32px;
}

.signup-link{
	position:absolute;
	left:50%;
	bottom:15%;
	transform:translate(-50%,12%);
	-ms-transform:translate(-50%,12%)
}

input[type=email] {
	background-color: #fef199; 
	color: black;
	font-size: 14px;
	padding: 14px;
	box-sizing: border-box;
	border: none;
	margin: 3px;
	
}

input[type=submit] {
	background-color: #fddc00;
    border: solid white 1px;
    color: #FFFFFF;
	font-size: 14px;
	padding: 14px 36px;
    text-decoration: none;
	margin: 3px;
    z-index: 0;
}

/* placeholder color */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fddc00;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #fddc00;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #fddc00;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fddc00;
}