/*  ==========================================================================
	INDIE.WEB NAV-AUTH STYLES
	==========================================================================  */

/*  HEADER ---------- */

/*	NAV AUTH ------ */

#nav-auth-container {
	position: fixed;
	z-index: 100;
	-webkit-backface-visibility: hidden; /* provides backwards compatibility for fixed position elements mobile devices */
	width: 100%;
    height: 45px;
}

#nav-auth {
    width: 100%;
}

#nav-auth ul {
    text-align: right;
}

#nav-auth li {
    display: inline-block;
    height: 45px;
}

#nav-auth a,
#nav-auth button[type=submit] {
    display: inline-block;
    line-height: 45px;
    font-size: 0.75rem;
}

#nav-auth button[type=submit] {
    height: unset;
    margin: 0;
    padding: 0;
    background: 0;
}

#nav-auth button[type=submit]:hover {
    cursor: pointer;
}


/*  ==========================================================================
	INDIE.WEB NAV-AUTH MEDIA QUERIES
	==========================================================================  */

/*	Screen Sizes 240px and smaller ---------- */
@media only screen 
and (max-width : 240px) {

	/*	HEADER ---------- */
	
	/*	NAV AUTH ------ */
	
	#nav-auth,
    #nav-auth li {
		padding: 0 7.5px;
	}

}


/*	Screen Sizes 240px and larger ---------- */
@media only screen 
and (min-width : 240px) {
	
	/*	HEADER ---------- */
	
	/*	NAV AUTH ------ */

	#nav-auth,
    #nav-auth li {
		padding: 0 15px;

	}

}


/*	Screen Sizes 320px and smaller ---------- */
@media only screen 
and (max-width : 320px) {

	/*	HEADER ---------- */
	
	/*	NAV AUTH ------ */

	#nav-auth a span,
	#nav-auth button[type=submit] span {
		display: none;
	}

	#nav-auth a i,
	#nav-auth button[type=submit] i {
		display: inline;
		font-size: 1.125rem;
		vertical-align: middle;
	}

}


/*	Screen Sizes 320px and larger ---------- */
@media only screen 
and (min-width : 320px) {

	/*	HEADER ---------- */
	
	/*	NAV AUTH ------ */

	#nav-auth a span,
	#nav-auth button[type=submit] span {
		display: inline;
	}

	#nav-auth a i,
	#nav-auth button[type=submit] i {
		display: none;
	}

}


/*	Screen Sizes 560px and smaller ---------- */
@media only screen 
and (max-width : 560px) {

	/*	HEADER ---------- */
	
	/*	NAV AUTH ------ */

	#nav-auth-container {
		top: 60px;
	}


	/*  BANNER ------ */
	
	#nav-auth-container ~ #banner {
        max-height: calc(100vh - 105px);
		margin-top: 105px;
	}

}


/*	Screen Sizes 560px - 800px ---------- */
@media only screen
and (min-width : 560px)
and (max-width : 800px) {

	/*	HEADER ---------- */
	
	/*	NAV AUTH ------ */

	#nav-auth-container {
		top: 75px;
	}


	/*	BANNER ------ */
	
	#nav-auth-container ~ #banner {
        max-height: calc(100vh - 120px);
		margin-top: 120px;
	}

}


/*	Screen Sizes 800px and larger ---------- */
@media only screen 
and (min-width : 800px) {

	/*  HEADER ---------- */
	
	/*  NAV AUTH ------ */

	#nav-auth-container {
		top: 90px;
	}


	/*	BANNER ------ */

	#nav-auth-container ~ #banner {
        max-height: calc(100vh - 135px);
		margin-top: 135px;
	}

}