* {
	text-decoration: none;
}
/*
.wrapper {overflow: auto;} 

	#main {margin-left: 4px;}

  #leftsidebar {
    float: none;
    width: auto;
  }

  #menulist {
    margin: 0;
    padding: 0;
  }

  .menuitem {
    background: #CDF0F6;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    list-style-type: none;
    margin: 4px;
    padding: 2px;
  }

  @media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left: 216px;}
  } */

body {
	font-family: "Open Sans", Helvetica, Verdana, sans-serif;
	font-size: 1.00rem;
	background-color: #fafafa;
	margin: 0;
	padding: 0;
}

div {
	position: below;
}

h1 {
	font-size: 3rem;
	margin-bottom: 0;
}

h2 {
	font-size: 2.25rem;
	margin-bottom: 0;
}

h3 {
	font-size: 1.6rem;
	margin-bottom: 0;
}
h5 {
	font-size: 1.4rem;
	margin-bottom: 0;
}

p {
	/* top right bottom left*/
	margin-bottom: 2rem;
}

li, a {
	list-style: none;
	/*
		The transition property makes it very easy to create smooth transitions for different CSS properties. In this case, with the two statements below we are specifying that we want to transition the 'color' property over 0.5 seconds. Note that you have to have another state for the element - example below in a:hover - for it to actually make use of the transition.
	*/
	transition-property: color;
	transition-duration: 0.5s; 
}

li a:hover, li a:focus { /* when mouse hovered or selected by keyboard */
	color: gray; 
	border-bottom: 3px solid orange;
}

/*hyperlink style*/
h2 a {
	color: #d9947b;
}

h2 a:hover {
	color: indigo;
}
/*temp, could remove*/
h3 a {
	color: indigo;	
}

h3 a:hover {
	color: #d9947b;
}
/*Trying potential rebranding colors*/
h5 a {
	color: #EE6F57;
}

h5 a:hover {
	color: #1F3C88;
}

header {
	left: 0;
	top: 0;
	height: 5rem;
	width: 100%;
	background-color: rgba(250, 250, 250, 0.9);
	display: block;
	margin: 0 auto;
	padding-top: 10px;
/*	position: fixed;*/
	font-size: 1rem;
} 

header nav ul {
	display:block;
	margin: 0 auto;
	width: fit-content;
	float: right;
	padding-right: 10px;
}

header nav ul li{
	display: inline-block;
	list-style: none;
	padding: 30px 10px;
}

header nav ul li a {
	color: black;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/*@media only screen and (max-width: 767px) {
	header {
		margin: 0
		text-align: left;
		padding-top: 10px;
	}
} */

img {
	/* We are saying we want the img to adjust its height accordingly when the width changes. */
	height: auto; 
}

/* my stuff starts here :D */
.uppercase {
    text-transform: uppercase;
}

.bold {
	font-weight: bold;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}
.justify {
	text-align: justify;
}
.home-banner {
	background-image: url("/img/home-banner.jpg");
	background-color: lavender;
	background-position: center;
	background-size: cover;
	height: 500px;
}

footer {
	left: 0;	
	bottom: 0;
	width: 100%;
	background-color:peachpuff;
	height: 100px;
	color:grey;
	padding-top: 1rem;
	display: inline-block;
	font-size: 0.8rem;
}

.logo {
	float: left;
	padding-left: 3rem;
	padding-top: 0.5rem;
}

.content {
	/* padding: 2rem 10rem; */
	padding: 20px 20px;
}

.content h2 {
	color: #d9947b;
}

.content h3 {
	color: #d9947b;
}
.content h5 {
	color:#EE6F57;
}

.side-padding {
	/*padding: 0 10rem;*/
	padding: 20px 20px;
}

#team {
	padding: 5rem 0rem;
}

#team img {
	padding: 1rem;
}

.grid {
	display: grid;
	width: 50%;
	grid-template-columns: auto auto auto auto;
	grid-gap: 1rem;
}

/*form */
input {
	width: 100%;
	padding: 0.5rem;
	margin: 1rem;
	box-sizing: border-box;
}

input[type=text] {
	border: none;
	border-bottom: solid #d9947b;
	background-color: #fafafa;
}

.content .form-message {
	/*height: 200px;*/
	/* border-bottom: 200px; figure out how to add space below message*/
	resize: none;
}

/*.button {
	border: none;
	background-color: #d9947b;
	color: white;
	padding: 0.5 rem;
}  make button look nice!! */

/*make email hyperlink look nicer*/

/*footer icons*/
.fa {
	padding: 5px;
	font-size: 2rem;
	width: 15px;
	height: 15px;
	border-radius: 20%;
	text-align: center;
	text-decoration: none;
	margin: 5px 2px;
	/*background: white;*/
	color: grey;
}

.fa:hover {
    opacity: 0.7;
}

/* stas work */