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

header {
	position:fixed;
	z-index: 10;
	width:100%;
	height:4rem;
	background-color: rgba(30,30,40,0.85);
	color:white;
}

header div{
	height:100%;
	max-width:60rem;
	display: flex;
/*
	padding-left:1rem;
	padding-right:1rem;
	align-items:center;
*/
	justify-content:space-between;
	align-items:center;
	margin-left: auto;
	margin-right: auto;
}


header img {
	height:4rem;
	padding:0.5rem;
	margin: 0;
}

#back-link{
	display:block;
	width:14rem;
	margin: 0;
	padding:0;

}

nav {
	display: block;
	box-sizing:border-box;
	color:white;
	margin:0;
	padding:0;
	height:4rem;
}


nav a{
	display: block;
	position: relative;
	top:-0.5rem;
	padding-left:1rem;
	padding-right:1rem;
	text-decoration: none;
	color:white;
	padding-top:0.6rem;
	padding-bottom:0.7rem;
}

nav a:hover{
	color:orange;
}

#invest-now {
	display:block;
	font-size:1rem;
	height:4rem;
	line-height: 4rem;
	padding-left:1rem;
	padding-right:2rem;
	cursor:default;
}
#invest-now{
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */  
}

#nav-btn{
	display: none;
}

#invest-now::before{
	position:absolute;
	content: "";
	display:block;
	background-image: url('../images/chevron.png');
	background-size: auto 20%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	width:1rem;
	height:100%;
	margin-left: 5.5rem;
	/* transform: rotate(90deg); */
	transition: transform 0.1s;
}

nav > div:hover #invest-now::before{
	transform: rotate(90deg);
	transition: transform 0.1s;
}

nav ul {
	padding:0;
	margin:0;
	display:block;
	position:absolute;
	max-width: 20rem;
	top:100%;
	background-color: rgba(30,30,40,0.85);
	pointer-events: none;
}

.hide-nav{
	opacity: 0.0;
	transition: opacity 0.2s;
	-webkit-transition: opacity 0.2s;
}

nav li {
	padding:0;
	margin:0;	
}
/* .show-nav, nav > div:hover > ul{ */
 nav > .drop-down:hover > ul, .show-nav{
	display:block;
	pointer-events: auto;
	opacity: 1;
	transition: opacity 0.2s;
	-webkit-transition: opacity 0.2s;
	
}

nav li{
	list-style-type: none;
}

#free-kit{
	display:block;
	color:white;
	padding:1rem;
	box-sizing:content-box;
}

#free-kit span{
	display:inline-block;
	box-sizing: border-box;
	height:2.2rem;
	line-height:2rem;
	padding-right:1rem;
	padding-left:1rem;
	border:solid 1.5px #ffd36f;
	color:#ffd36f;
}

#free-kit:hover span{
	border:solid 1.5px white;
	color:white;
}


@media only screen and (max-width: 65rem) {
	header img {
		margin-left: 0.5rem;
	}
}

@media only screen and (max-width: 50rem) {
	header {
		height:8rem;
		padding-top: 4rem;
	}

	header div {
		display:block;
	}

	#back-link{
		position:absolute;
		z-index: 2;
	}

	header img {
		height:4rem;
		margin:0;
		padding:0;
		padding-bottom:0.5rem;
		padding-left:1rem;
	}

	nav a{
		padding:1rem;
		margin:0;
		top:0;
	}

	nav {
		position:absolute;
		top:4rem;
		width:100%;
	}

	#invest-now {
		width:100%;
		margin:0;
		padding:0;
		text-align: right;
	}

	#nav-btn{
		display:inline-block;
		position:relative;
		margin-right:1rem;
		margin-bottom:1rem;
		background-clip: content-box;
		height:3rem;
		width:3rem;
		/* background-color: #d06000 ; */
		
		background-repeat: no-repeat;
		
		background-position: center;

	}

	.open-menu{
		background-size: 60% 50%;
		border:solid white;
		border-radius: 0rem;
		background-image: url(../images/hamburger-menu.png);
		transition: border-radius 0.1s;
	}

	.close-menu{
		background-size: 50% 50%;
		border-radius: 50%;
		background-image: url(../images/close-menu.png);
		transition: border-radius 0.1s;
	}


	#invest-now .txt{
		display:none;
	}

	#invest-now::before{
		display:none;
	}

	nav ul{
		width:100%;
		padding:2rem;
		border-top:solid rgba(255,255,255, 0.75);
		border-bottom:solid rgba(255,255,255, 0.75);;
		max-width:100%;
		background-color: black;
	}

	#phone-number{
		display:block;
		position: absolute;
		width:100%;
		text-align: center;
		top: 0px;
		left:0px;
		padding-top:5rem;
		padding-left:10rem;
	}

	#free-kit{
		position: absolute;
		display:block;
		top: 0px;
		left:0px;
		width: 100%;
		margin:0;
		text-align: center;
		text-decoration: none;
	}

	#free-kit span{
		display:block;
		width: calc(100% - 2rem);
		text-align: center;
		padding:0;
		margin:0;
	}
}

@media only screen and (max-width: 30rem) {
	#phone-number{
		display:none;
	}
}

/*---------------------------*/
/*       FOOTER STYLES       */
/*---------------------------*/

footer {
	font-size: 0.9rem;
	background-color:#f2f2f2;
}

footer p{
	font-size: 0.9rem;
}

footer strong{
	font-weight: 700;
}

footer section{
/*
	padding-top:1rem;
	padding-bottom:1rem;
*/
}

footer .content{
	padding:0;
}

footer h4{
	font-weight: 700;
	margin-bottom: 1rem;
	font-family: sans-serif;

	color:white;
}

h4 em {
	display: inline-block;
	margin-left: 1rem;
	font-weight:500;
}

#call-today{
	border-top:solid 0.2rem #d06000;
	font-size: 1rem;
	padding-top:1rem;
	padding-bottom:1rem;;	
}

#call-today strong{
	color:rgba(30,30,40,0.85)
}

#call-today em{
	display: inline-block;
	color:#d06000
}



#company-info{
	background-color:#414141;
	color:#d3d2d2;
	padding-top:3rem;
	padding-bottom:3rem;
}

#company-info .address{
	color:#f2f2f2;
	padding-bottom: 0.5rem;
}

#company-info p {
/*	padding-bottom: 1rem;*/
}

#contact-info{
/*	width:66%;*/
	padding-right: 0rem;
}

#site-links{
	padding-left: 2rem;
	border-left:solid #d3d2d2 1px;
}

#site-links a{
	text-decoration: none;
	color:white;
}

#site-links a:hover{
	text-decoration:underline;
}

#site-links a:visited{
	color:white;
}

#site-links ul{
	list-style: none;
	display:flex;
	flex-direction: column;
	flex-flow: column wrap;
	height:8rem;
}



#site-links li{
	margin:0;
	padding:0;
	margin-bottom: 0.5rem;
	padding-right:1rem;
}


#copywrite {
	padding-top: 1rem;
}

#copywrite-and-links {
	padding-top: 1rem;
	padding-bottom: 1rem;
	background-color: #5d5d5d;
	color:#e3e3e3;
}

#copywrite-and-links p {
	padding:0;
	margin:0;
}

#copywrite-and-links ul{
	list-style: none;
	/* padding-left:2rem; */
}

#copywrite-and-links li{
	display:inline-block;
	margin:0;
	padding:0;
	/* padding-left:2rem; */
}

#copywrite-and-links a{
	color:inherit;
	text-decoration: none;
}

#copywrite-and-links a:hover{
	text-decoration:underline;
}

#copywrite-and-links a:visited{
	color:inherit;
}


#legal{
	padding-top:2rem;
	padding-bottom:2rem;
	color:#414141;
	font-size:0.72rem;
	background-color: #d4d4d4;
}

#legal p {
	font-size:0.72rem;
}

@media only screen and (max-width: 65rem) {
	#call-today{
		padding-left:2rem;
		padding-right:2rem;
	}
	
	#site-links{
		margin-top:1rem;
	}

	#copywrite-and-links{
		text-align: center;
	}

	#copywrite-and-links ul{
		margin-top:0.5rem;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (max-width: 50rem) {

	#site-links{
		padding-left:1.5rem;
		width:100%;
	}

	#copywrite-and-links{
		text-align: center;
		font-size: 0.7rem;
	}

	#copywrite-and-links span{
		display: inline-block;
	}

	#copywrite-and-links ul{
		display:block;
		padding:0;
		margin:0;
		padding-top:0.5rem;
		width:100%;
		margin-left: auto;
		margin-right: auto;
	}

	#legal{
		padding-left:1.5rem;
		padding-right:1.5rem;
	}
}