/* CSS Document */





/* Navigation Links Icon */


.icon-post-again {
	background-image: url(hypergamy-assets/icon-post-again.png);
}


.icon-latest-post {
	background-image: url(hypergamy-assets/icon-latest-post.png);
}

.icon-understanding-hypergamy {
	background-image: url(hypergamy-assets/icon-understanding-hypergamy.png);
}

.icon-future-developments {
	background-image: url(hypergamy-assets/icon-future-developments.png);
}
.icon-sponsor-our-efforts {
	background-image: url(hypergamy-assets/icon-sponsor-us.png);
	
}

.icon-contact-us {
	background-image: url(hypergamy-assets/icon-contact-us.png);
}

.icon-video {
	background-image: url(hypergamy-assets/icon-video.png);
}



/* Spacing between each link */

.side-navigation-spacer {
	width: 100%;
	height: 50px;
}

.hypergamy-logo {
	height: 176px;
	width: 467px;
	top: 45px;
	position: absolute;
	right: 45px;
	background-image: url(hypergamy-assets/logo-small.png);
	display: block;
}

.side-nav-icon {
	height: 79px;
	display: flex;
	align-items: center;
	float: left;
	color: #fff;
	text-decoration: none;
	padding-left: 90px;
	background-position: left;
	background-repeat: no-repeat;
	
}




/* unvisited link */
a:hover {
    color: #0F0;
}


/* unvisited link */
.story-post-bar a:link {
    color: #0F0;
}



.story-post-bar a:hover  {
	COLOR: #0FF;
}

.story-post-bar a:visited {
	color: #FF0;
}

.dark-background {
	
	background-color:rgba(0,0,0,0.5);
	padding: 20px;
	
}





.icon-post-again:hover {
	background-image: url(hypergamy-assets/icon-post-again-hover.png);
}

.icon-latest-post:hover {
	background-image: url(hypergamy-assets/icon-latest-post-hover.png);
}

.icon-understanding-hypergamy:hover {
	background-image: url(hypergamy-assets/icon-understanding-hypergamy-hover.png);
}

.icon-future-developments:hover {
	background-image: url(hypergamy-assets/icon-future-developments-hover.png);
}

.icon-sponsor-our-efforts:hover {
	background-image: url(hypergamy-assets/icon-sponsor-us-hover.png);
}

.icon-contact-us:hover {
	background-image: url(hypergamy-assets/icon-contact-us-hover.png);
}


.icon-video:hover {
	background-image: url(hypergamy-assets/icon-video-hover.png);
}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 9, 2014 */

.element {
  all: none;
}


@font-face {
	font-family: 'fjalla_oneregular';
	src: url('fonts/fjallaone-regular-webfont.eot');
	src: url('fonts/fjallaone-regular-webfont.eot?#iefix') format('embedded-opentype'),  url('fonts/fjallaone-regular-webfont.woff') format('woff'),  url('fonts/fjallaone-regular-webfont.ttf') format('truetype'),  url('fonts/fjallaone-regular-webfont.svg#fjalla_oneregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
html {
	height: 100%;
}

body {
	font-family: 'fjalla_oneregular', Helvetica, Arial, sans-serif;
	height: 100%;
	margin-left: 0px;
	margin-top: 300px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #000;
}

.wrapper {
	width: 100%;
	height: 100%;
	overflow: auto;
	position: relative;
}


.page-content-spacer {
	width: 100%;
	height: 300px;
	background-color: red;	
	
}

.text-box {
	font-family: 'fjalla_oneregular', Helvetica, Arial, sans-serif;
	font-size: 28px;
	width: 680px;
	height: 50px;
	color:#999;
	background-color: #FFF;
	resize: none; 
	vertical-align: center;
	border: solid;
	border-width: 4px;
	border-color: black;	
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
	display: block;
	padding-top: 10px;
}


.text-box-div {
	width: auto;
	height: auto;
	border: solid;
	border-width: 12px;
	border
	-webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
	display: inline-block;
	background-color:rgba(0,0,0,0.2);
	border-color:rgba(0,0,0,0.2);
	-moz-box-shadow:    15px 15px 50px -13px #000000;
	-webkit-box-shadow: 15px 15px 50px -13px #000000;
	box-shadow:         15px 15px 50px -13px #000000;
	float: left;
	margin-top: 6px;
	overflow: auto;
}

.hypergamy-title-text {
	/*background-color: #00F;*/
	font-size: 26px;
	color: #FFF;
	position: relative;
	top: 0px;
	right: 0px;
	
}



.button-wrapper {
	/*background-color: pink;*/	
	color: #fff;
	width: auto;
	height: auto;
	display: inline-block;
	float: none;
	position: relative;
	
}

.post-submitted {
	
	display: none;
}

.char-limit {
	/*background-color: #F0F;*/
	position: absolute;
	width: 50px;
	height: auto;
	left: 0px;
	top: 14px;
	
	text-align: right;
}




.form-wrapper {
	/*background-color: #F00; */
	width: auto;
	max-width: 890px;
	height: auto;
	margin-top: 300px;
	margin-left: auto;
	margin-right: auto;
	min-height: 120px;
	
	padding-bottom: 40px;
}

.clear {
	/*background-color: blue;*/
	width: 100%;
	height: 20px;
	clear: both;
	
}

.nice-quote {
	float: left;
}

.post-cycle {
	width: 100%;
	max-width: 900px;
	min-height: 70px;
	height: auto;
	text-align: justify;
	margin-top: 50px;
	color: #fff;
	font-size: 28px;
}


.post-page-results {
	width: 100%;
	max-width: 900px;
	min-height: 70px;
	height: auto;
	text-align: justify;
	margin-top: 50px;
	color: #fff;
	font-size: 28px;
}

.latest-post-button {
	width: auto;
	height: auto;
	float: right;
	margin-top: 50px;
}

.story-post-bar {
	width: 865px;
	height: 100px;
	margin-right: auto;
	margin-left: auto;
	
}

.post {
	width: 887px;
	height: auto;
	display: block;
	/* [disabled]background-color: pink; */
}


.loading-display {
	height: 40px;
	width: auto;
	text-align: center;
	margin-top: 70px;
	margin-bottom: 70px;
	clear: both;
}

.loading-cycle {
	margin: 0 auto;
	width: auto;
	
}





.char-wrapper {
	width: 1px;
	height: 1px;	
	color: #fff;
	background-color: none;
	position: relative;

}




input:focus {
	outline: none;
}

textarea {
	height:25px;
	outline: none;
	text-align: justify;
}


.animated {
	-webkit-transition: height 0.8s;
	-moz-transition: height 0.8s;
	transition: height 0.8s;
}
.side-bar {
	height: 100%;
	width: 280px;
	background-image: url(hypergamy-assets/sidebar-background.png);
	padding-left: 30px;
	float: left;
	position: fixed;
	top: 0px;
}
.side-navigation {
	width: 220px;
	height: 79px;
	margine-top: 80px;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #fff;
	font-size: 20px;
	text-transform: uppercase;
	overflow: auto;
}



/*For Standard Browsers*/
 @media handheld, only screen and (max-width: 1500px) {


.post {
	width: 400px;
	height: auto;
	display: block;
	/* [disabled]background-color: pink; */
}



.text-box {
	font-family: 'fjalla_oneregular', Helvetica, Arial, sans-serif;
	font-size: 28px;
	width: 480px;
	height: 50px;
	color:#999;
	background-color: #FFF;
	resize: none; 
	vertical-align: center;
	border: solid;
	border-width: 4px;
	border-color: black;	
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
	display: block;
	padding-top: 10px;
}





.post-page-results {
	width: 100%;
	max-width: 600px;
	min-height: 70px;
	height: auto;
	text-align: justify;
	margin-top: 70px;
	margin-bottom: 70px;
	color: #fff;
	font-size: 28px;
	float: right;
}

.form-wrapper {
	/*background-color: #F00;*/
	width: auto;
	max-width: 890px;
	height: auto;
	margin-top: 300px;
	margin-right:40px;
	float:right;
	min-height: 120px;
	padding-bottom: 40px;
}

.post-cycle {
	width: 650px;
	max-width: none;
	min-height: 70px;
	height: auto;
	text-align: justify;
	margin-top: 50px;
	color: #fff;
	font-size: 28px;
}






 @media handheld, only screen and (max-width: 1035px) {

.hypergamy-logo {
	height: 105px;
	width: 325px;
	top: 45px;
	position: absolute;
	right: 25px;
	background-image: url(hypergamy-assets/logo-tiny.png);
	display: block;
}

.post {
	width: 400px;
	height: auto;
	display: block;
	/* [disabled]background-color: pink; */
}

.story-post-bar {
	width: 400px;
	height: 100px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 5px;
	margin-right: 45px;
	float: right;
}

.post-page-results {
	width: 400px;
	max-width: 400px;
	min-height: 70px;
	height: auto;
	text-align: justify;
	margin-top: 30px;
	margin-bottom: 30px;
	
	color: #fff;
	font-size: 22px;
	clear: right;
	float: right;
}

.form-wrapper {
	/*background-color: #F00;*/
	width: 435px;
	max-width: 890px;
	height: auto;
	margin-top: 200px;
	margin-right: 10px;
	float:right;
	min-height: 120px;
	padding-bottom: 40px;
}

.post-cycle {
	width: 400px;
	max-width: none;
	min-height: 70px;
	height: auto;
	text-align: justify;
	margin-top: 50px;
	color: #fff;
	font-size: 22px;
}

.text-box {
	font-family: 'fjalla_oneregular', Helvetica, Arial, sans-serif;
	font-size: 20px;
	width: 400px;
	height: 50px;
	color:#999;
	background-color: #FFF;
	resize: none; 
	vertical-align: center;
	border: solid;
	border-width: 4px;
	border-color: black;	
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
	display: block;
	padding-top: 10px;
}

.button-wrapper {
	/* background-color: pink; */
	color: #fff;
	width: auto;
	height: auto;
	display: inline-block;
	float: right;
	position: relative;
	margin-top: 25px;
}


 @media handheld, only screen and (max-width: 750px) {
	
	
.hypergamy-logo {
	height: 105px;
	width: 325px;
	top: 45px;
	position: absolute;
	right: 25px;
	background-image: url(hypergamy-assets/logo-tiny.png);
	display: block;
}
 
	 
.side-bar {
	margin-top: 230px;
	height: 100%;
	width: 100%;
	background-image: url(hypergamy-assets/sidebar-background.png);
	padding-left: 30px;
	float: none;
	position: static;
}

.story-post-bar {
	width: 400px;
	height: 100px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 40px;
	margin-right: 10px;
	float: right;
}

.side-navigation {
	width: 220px;
	height: 79px;
	margine-top: 80px;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #fff;
	font-size: 20px;
	text-transform: uppercase;
	overflow: auto;
}



.post-page-results {
	width: 100%;
	max-width: 370px;
	min-height: 70px;
	height: auto;
	text-align: justify;
	margin-top: 70px;
	margin-bottom: 70px;
	margin-left: 20px;
	margin-right: 20px;
	color: #fff;
	font-size: 22px;
	float: none;
}


.form-wrapper {
/* background-color: #F00; */
	width: 370px;
	max-width: 890px;
	height: auto;
	margin-top: 80px;
	margin-right: 10px;
	float: right;
	min-height: 120px;
	padding-bottom: 40px;
}


.text-box {
	font-family: 'fjalla_oneregular', Helvetica, Arial, sans-serif;
	font-size: 20px;
	width: 330px;
	height: 50px;
	color: #999;
	background-color: #FFF;
	resize: none;
	vertical-align: center;
	border: solid;
	border-width: 4px;
	border-color: black;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	display: block;
	padding-top: 10px;
}

.post-cycle {
	width: 350px;
	max-width: none;
	min-height: 70px;
	height: auto;
	text-align: justify;
	margin-top: 50px;
	color: #fff;
	font-size: 18px;
}


.dark-background {
	
	background-color:rgba(0,0,0,0.5);
	padding: 10px;
	
}

.page-content-spacer {
	width: 100%;
	height: 5px;
	background-color: none;	
	
}