/* ========== GENERAL STYLES ========== */
html{
/*	background: url("../images/landing-bg.jpg") no-repeat center center;
    background-size: cover;*/
 	height: 100%;
	background-color: #1D1D1D;
}



.g-overlay{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+99&0+0,0+45,1+100 */
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.98) 99%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,0.98) 99%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,0.98) 99%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
}

body {
	font-family: 'Avenir Next', sans-serif;
	font-size: 1em;
	color: #FFF; 
	font-weight: 300;
	
}


.clear {
	float: left;
}

a:link {
	color: #EDF3F9; 
	text-decoration: none;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .15em;
	font-size: .8em;
}

a:visited {
	color: #EDF3F9; 
	font-weight: 600;
}

a:hover {
	color: #EDF3F9; 
	font-weight: 600;
}

ul{
	list-style: none;
	margin: 0 auto 0.625em;
	width: 15.75em;
	padding: 0;	
}

li{
	display: inline-block;
}

label {
	font-size: 0.75em;
	font-weight: 400;
	margin-bottom: 0.625em;
	display: inline-block;
	text-transform:uppercase; 
}

section {
	/*effects notifyME*/
	
	z-index: 999999;
	/*margin-top: 11.875em;*/
}

/* ========== END GENERAL STYLES ========== */





/*LANDING PAGE =================================================*/

#logo {
	margin: 50px auto 0px;
	width: 301px;
}

#header{
	width: 100%;
}

#home-nav {
	display: flex;
    align-items: center;
    justify-content: center;
}

.single-item {
	width: 12.563em;
	text-align: center;
}
.s-items {
	display: inline-block; 
	width: 18.750em;
	font-weight: 400;
}
.slider {
	width: 100%;
	margin: 9.375em auto 0px; 
}

.clearer {
    clear: both;
}

.group:after {
   content: "";
   display: table;
   clear: both;
}

footer {
	position: absolute;
	bottom: 0px;
	width: 100%;
	z-index: 1;
}

footer a:link{

}

.btn {
   -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0px;
    background: #FFF;
    padding: 1.125em 0em;
    width: 10.750em;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    font-size: 0.875em;
    color: #E3E3E3;
    font-weight: 600;
    letter-spacing: .31em;
    box-sizing: border-box;
    border: 1px #FFF solid;
}

.btn:hover {
  text-decoration: none;
}
.sign-in-btn {
	background: transparent;
    /*border: 0.063em #FFF solid;*/
}
.btn span{
	color: #000;
}

/*END LANDING PAGE ==============================================*/







/* ==========  INDEX.PHP STYLES ========== */
#container {
	width: 100%;
	opacity: 0;

}

.js {
	opacity: 1;
}

.smalltext{
	font-size: .8em;
	margin-bottom: 1.313em;
}

#user-greeting {
	font-size:0.625em;
	text-transform: uppercase;
	letter-spacing: .122em;
	position:absolute; 
	top: 17px; 
	right:15px;
	color: #EDF3F9;
}

#user-greeting a {
	padding:0;
	float: none;
}

#logo-header{
	width:6.250em;
	margin:0.313em auto;
}

#user-greeting a {
	padding:0;
	float: none;
}

.inner-container {
	width: 90%;
	margin: 6.250em auto 0;
	padding: 0 .34em;
	box-sizing: border-box;
}


.inner-container section{
	margin-top: 11.875em;
}


#index-pic{
	width: 56.338028%;
	margin: 6.25em auto 0em;
	text-align: center;
}
#index-pic .usernames {
	
	font-size:1.5em; 
	letter-spacing:  0.2rem; 
	font-weight: 700;
	margin:1.5em auto 0;
	padding: 0px;
	text-transform: uppercase;
}









#nearby-users {
	width:350px; 
	margin:50px auto 0px; 
}

.nearby-users {
	float:left; 
	margin:20px;
}

#user-welcome-details{
	width: 301px;
	margin: 0 auto;
	text-align: center;
}

.label{
	color:#669999;
}

.usernames {
	margin-top:1.4em; 
	font-size:1.5em; 
	letter-spacing:  0.2rem;  
	font-weight: 600;
	text-transform: uppercase;
}



.make-circle {
	border-radius: 50%;
	border: 1px #fff solid;
}


/* ==========  END INDEX.PHP STYLES ========== */




/*=== grid stuff ===========================================================*/
.user-data {
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  text-align: center;
  letter-spacing: .3em;
  z-index: 2;
}

.user-data span {
	text-transform: none;
	letter-spacing: .07em;
	font-weight: 100;
}


.darken-image {
	opacity: .7;
}

.user-data .user-msg {
	color: white;
    top: 56%;
    position: absolute;
    width: 90%;
    left: 5%;
    font-weight: 100;
}

.grid {
  padding-left: 5px;
  padding-right: 5px;
  margin-top: 4.1em;
}

/* clear fix */
.grid:after {

}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 47.333%;

}

.grid-item {
/*  float: left;*/
  margin-bottom: 5%;
}

.grid-item img {
  display: block;
  width: 100%;
}

.gutter-sizer {
  width: 5%;
}


/*=== end grid stuff ===========================================================*/