*{
  background-color: #e9c46a;
  font-family: arial, Helvetica, sans-serif;
  margin: auto;
}

body {
  margin-bottom: 50px;
}
/* Top Navigation Bar */
.topnav a {
    color: black;
    text-align: center;
    padding: 12px 18px;
    text-decoration: none;
    font-size: 15px;
    border-radius: 25px;
    background-color: #e76f51;
}

.topnav a:hover {
    background-color: white;
    color: black;
    transition: 0.5s;
}

.topnav a.active {
    background-color: #2a9d8f;
    color: white;
}

.topnav {
  text-align: center;
  background-color: #264653;
  padding-bottom: 20px;
  padding-top: 8px;
  font-size: 30px;
  font-weight: bold;
}

.header {
  font-family: dosis;
  font-size: 25px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #2a9d8f;

}

.header img{
    width: 75%;
}

/* Content */



iframe {
  width: 500px;
  height: 300px;
  margin-left: 75px;
  margin-right: 50px;
  margin-top: 50px;
  text-align: center;
}

.blurb {
  margin-right: 75px;
  margin-left: auto;
  border-width: 3px;
  border-color: black;
  text-align: center;
  font-size: 20px;
}

/* Footer */
.footer {
  padding-top: 15px;
  background-color: #264653;
  color: white;
  position: fixed;
  height: 50px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin-bottom: 0px;
  text-align: center;
}

.footer a {
  background-color: inherit;
  color: white;
}


@media all and (min-width: 600px){
  .wrapper{
    display: flex;  /*define our container as a flex box. So, all elements inside of it will be flex-items*/
    flex-wrap: wrap; /*allow to create many rows inside container. By default all elements inside container will be placed in ONE row only*/
  }
  .map, .blurb{
    flex: 1;  /*each element will take 1 fraction of a row. So, in case of medium size screen there will be two elements in the row and they will take 50% each.*/
  }
  .header, .footer{
    flex:1 100%; /*enables these elements to take entire 1 row*/
  }
  .blurb {
    text-align: left;
  }

  iframe {
    width: 300px;
    height: 200px;
  }
}

/* media query to posutuon our elements for large-size devices */

@media all and (min-width: 800px){

  /*change the order*/
  .map{
    order: 1;
  }
  .blurb{
    order: 2;
  }
  .footer{
    order: 3;
  }
  iframe {
    width: 600px;
    height: 500px;
  }

}

/* Coffee Page*/

#table2 {
 border-collapse: collapse;
 width: 80%;
 margin-top: 50px;
 margin-bottom: 150px;
 margin-left: auto;
 margin-right: auto;
}


#table2, th, td {
 border: 5px solid #e76f51;
 padding: 10px;
 background-color: #2a9d8f;
}



td img{
 text-align:center;
 width: 100%;
 height: auto;

}

/* Members Page */

.header2 {
  font-family: dosis;
  font-size: 25px;
  text-align: center;
  margin-top: 25px;
  margin-bottom: 25px;
  background-color: #2a9d8f !important;
}


form {
	background: #264653;
	margin-bottom: 150px;
	width: 90%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.875em;
	line-height: 1.8em;
	color: black;
	border-radius: 10px;
	padding: 10px;
	border: 0px solid #f4a261;
  text-align: left;
}

legend {
  background-color: inherit;
  color: black;
  border-radius: 20px;
  font-size: 25px;
  padding: 10px;
  font-weight: bold;
}

fieldset {
  background-color: #f4a261;
  border-color: inherit;
  border: 0px;
  margin-top: 20px;
}


input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #264653;
  border-radius: 4px;
  box-sizing: border-box;
}

label[for="username"] {
  background-color: #f4a261;
  font-weight: bold;
}

label[for="password"] {
  background-color: #f4a261;
  font-weight: bold;
}

input[type=password], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #264653;
  border-radius: 4px;
  box-sizing: border-box;
}


input[type=submit] {
  width: 100%;
  background-color: #264653;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #2a9d8f;
  transition: .5s;
}

input[type=reset] {
  width: 100%;
  background-color: #264653;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=reset]:hover {
  background-color: #2a9d8f;
  transition: .5s;
}


/* Star Ratings */

.rate {
    float: left;
    height: 30px;
    padding: 10px 10px;
    background-color: #f4a261;

}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:40px;
    color:#ccc;
    background-color: #f4a261;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #264653;
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #264653;
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #2a9d8f;
}