/* Styles for small screen size (mobile) */
:root {
    /* color palette */
    --primary-color: #013c72;
    --secondary-color:#2770b6;
    --accent1-color: #ffffff;
    --accent2-color: #99dee4;
    --accent3-color: #ff9d00;
    --accent4-color: #eaeaea;
    --accent5-color: #000000;
    

    /* fonts */
    --heading-font: "IM Fell French Canon";
    --paragraph-font: Lato, Helvetica, sans-serif;

    /* chosen from among colors above */
    --headline-color-on-white: #013c72;  /* headlines on a white background */ 
    --headline-color-on-color: #ffffff; /* headlines on a colored background */ 
    --paragraph-color-on-white: #013c72; /* paragraph text on a white background */ 
    --paragraph-color-on-color: #fffafa; /* paragraph text on a colored background */ 
    --paragraph-background-color: #2770b6  ;
    --nav-link-color: #fffafa;
    --nav-background-color: #2770b6;
    --nav-hover-link-color: #ff9d00;
    --nav-hover-background-color: #013c72;
}
/* Over all Website Design*/
body {
    text-shadow: 0 3px 6px rgba(0,0,0,0.36), 0 3px 6px rgba(0,0,0,0.33);
    font-family: var(--paragraph-font);
    font-size: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin: auto;
    background-color: var(--accent4-color);
    color: var(--headline-color-on-white);
}
a {
    color: var(--accent3-color);
}
h1 {
    font-family: var(--heading-font);
    color: var(--accent3-color);
}
hr {
    width: 100%;
    height: 2px;
    margin-top: -20px;
    margin-bottom: 20px;
    background: var(--accent3-color);
    border: var(--accent3-color) solid;
    box-shadow: 0 3px 6px rgba(0,0,0,0.36), 0 3px 6px rgba(0,0,0,0.53);
    border-radius: 50px;
  }
  h3 {
    margin-top: 0;
    color: var(--headline-color-on-white);
}
ul {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}
li {
    margin-bottom: 5px;
}
/* Header Design*/
header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    transition: 0.5s;
}
#date {
    font-size: 1rem;
    color: var(--headline-color-on-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    margin-top: 10px;
    padding: 7px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid;
    border-color: rgba(255, 255, 255, 0.2);;
    transition: 0.5s;
}
.banner {
    font-size: .8rem;
    font-weight: bold;
    color: var(--accent3-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    margin-top: -15px;
    transition: 0.5s;
}
#date h2 {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Navbar */
nav {
    list-style-type: none;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: var(--nav-background-color);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.36), 0 3px 6px rgba(0, 0, 0, 0.53);
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    z-index: 2;
    transition: 0.5s;
}
nav h1{
    color: var(--headline-color-on-color);
    font-size: 1rem;
    font-family: var(--heading-font);
    font-weight: bold;
    transition: 0.5s;
}
nav h2{
    color: var(--headline-color-on-color);
    font-size: 1rem;
    font-family: var(--heading-font);
    font-style: italic;
    transition: 0.5s;
}
.horizontal {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.navbar-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
}
.navbar-toggle a{
    border-radius: 50%;
    padding-left: 5px;
    padding-right: 5px;
}
.navbar-toggle a:hover {
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--nav-hover-link-color);
    transform: scale(1.2);
}
nav button {
    display: flex;
    margin-right: 5px;
    background-color: transparent;
    border: none;
    color: var(--accent1-color);
    font-size: 2rem;
    cursor: pointer;
    border-radius: 50px;
    transition: 0.5s;
}
.navbar-logo {
    border-radius: 50px;
    padding-left: 15px;
    padding-right: 15px;
    justify-content: center;
    align-items: center;
}
.navbar-logo:hover {
    color: var(--nav-hover-link-color);
    transform: scale(1.2);
}
.navbar-logo img {
    margin-top: 5px;
    height: 40px;
    border: 2px solid;
    border-color: var(--accent3-color);
    border-radius: 50px;
    
}
.facebook-logo img {
    height: 20px;
    float: right;
    border: 2px solid;
    border-color: var(--accent3-color);
    border-radius: 50px;
}
.linkedin-logo img {
    height: 20px;
    float: right;
    border: 2px solid;
    border-color: var(--accent3-color);
    border-radius: 50px;
}
nav a{
    transition: 0.5s;
}
nav ul li a.active {
    color: var(--headline-color-on-white);
    background-color: rgba(255, 255, 255, 0.5);
}
nav.scrolled ul li a.active {
    color: var(--headline-color-on-white);
    background-color:#95c3ee;
}
nav ul {
    display: none;
    flex-direction: column;
    align-items: center;
}
nav ul.open {
    display: flex;
}
#hamburgerBtn span:nth-child(1){
    display: block;
}
#hamburgerBtn span:nth-child(2){
    display: none;
}
#hamburgerBtn.open span:nth-child(1){
    display: none;
}
#hamburgerBtn.open span:nth-child(2){
    display: block;
}
nav ul a {
    color: var(--nav-link-color);
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    padding:.8rem;
    justify-content: center;
    width: 80px;
    border-radius: 50px;
    padding-left: 50px;
    padding-right: 50px;
    transition: 0.5s;
}
nav ul a:hover,
nav ul li a.active:hover,
nav button:hover {
  background-color: rgba(21, 37, 96, 0.989);
  color: var(--nav-hover-link-color);
  transform: scale(1.2);
}
nav.scrolled ul li a:hover {
    background-color: rgba(21, 37, 96, 0.989);
}
nav.scrolled {
    background-color: transparent;
    box-shadow: none;
}
.hamburgerBtn {
    color: var(--accent3-color);
    transition: 0.5s;
}
nav.scrolled .navbar-logo,
nav.scrolled .horizontal h1,
nav.scrolled .horizontal h2,
nav.scrolled .facebook-logo,
nav.scrolled .linkedin-logo,
nav.scrolled #date,
nav.scrolled .banner {
    display: none;
    transition: 0.5s;
}
nav.scrolled ul li a{
    box-shadow: 0 3px 6px rgba(0,0,0,0.56), 0 3px 6px rgba(0,0,0,0.73);
    background-color:#2771b6;
    border: 4px solid;
    border-color: var(--accent3-color);
    transition: 0.5s;
}
nav.scrolled ul {
    float: right;
}  
nav.scrolled #hamburgerBtn {
    box-shadow: 0 3px 6px rgba(0,0,0,0.56), 0 3px 6px rgba(0,0,0,0.73);
    background-color:#2771b6;
    border: 4px solid;
    border-color: var(--accent3-color);
}
nav.scrolled #hamburgerBtn:hover {
    background-color: rgb(21, 37, 96);
    margin-top: 5px;
}
/* Main design */
main {
    margin-top: 145px;
    text-shadow: 0 3px 6px rgba(0,0,0,0.36), 0 3px 6px rgba(0,0,0,0.33);
    font-family: var(--paragraph-font);
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--accent4-color);
    color: var(--headline-color-on-white);
    position: relative;
}
main .hero-section {
    background-color: var(--nav-hover-background-color);
    background-image: url('../images/rusty-metal.jpg');
    background-size: cover;
    background-position: center;
    padding: 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.56), 0 3px 6px rgba(0,0,0,0.73);
    border-radius: 25px;
    margin-bottom: 30px;
}
  
  .image-card img {
    width: 100%;
    height: 100%;
    filter: blur(0em);
    transition: filter .5s;
  }
  
  .image-card.loaded img {
    filter: blur(0em);
  }
  
  .image-card img[data-src] {
    filter: blur(.2em);
  }
  
.news- {
    float: left;
}
main  img {
    position: relative;
    width: 100%;
    border-radius: 25px;
}
.hero-message {
    position: relative;
    text-align: center;
    top: -5rem;
    left: -1rem;
}
main .hero-message h3 {
    position: relative;
    z-index: 1;
    color: var(--accent3-color);
    font-size: .6rem;
}
main .hero-message h1 {
    position: relative;
    color: var(--accent3-color);
    font-size: 1rem;
    z-index: 1;
}
main .hero-message h2 {
    position: relative;
    color: var(--accent3-color);
    font-size: .7rem;
    z-index: 1;
}
.call-to-action{
    font-family: var(--heading-font);
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    text-align: left;
    background-color: var(--accent4-color);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.56), inset 0 3px 6px rgba(0, 0, 0, 0.73);
    padding: 20px;
    border-radius: 25px;
}
section h2 {
    font-size: 1.5rem;
}
/*Directory page*/
.directory-section {
    justify-content: center;
    text-align: center;
}
.view-buttons {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .view-btn {
    font-size: 24px;
    padding: 0; 
    margin: 0 10px;
    padding: 5px;
    padding-top: 10px;
    border: none;
    cursor: pointer; 
    background-color: var(--accent4-color);
    transition: 0.5s;
    border-radius: 50px;
  }
  .view-btn:hover{
    transform: scale(1.2);
    background-color: rgba(21, 37, 96, 0.989);
  }
  .view-btn img{ 
    border-radius: 0;
    margin: 0;
  }
.list-view {
    background-color: var(--nav-hover-background-color);
    border-radius: 25px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.56), 0 3px 6px rgba(0,0,0,0.73);
    padding: 20px;
    margin-left: -20px;
    margin-right: -20px;
    text-align: left;
}
.list-view a, .icon-view a{
    color: var(--nav-hover-background-color);
}
.list-view li {
    list-style-type: none;
    padding: 15px;
    margin: 0px;
  }
  
  .list-view .even {
    background-color: #aac9e4;
  }
  
  .list-view .odd {
    background-color: #b9def5;
  }
  .business-info {
    display: flex;
    flex-direction: column;
  }
  .business-name {
    font-weight: bold;
    font-size: 1.2rem;
  }
/*Discover page*/
.discover h3 {
    margin-top: 30px;
  }
  .discover h2 {
    font-size: 1.2rem;
  }
  .discover h1 {
    font-size: 2rem;
    color: var(--headline-color-on-white);
  }
  .discover .hero h2 {
    font-size: 1.5rem;
  }
.discover img {
    box-shadow: 0 3px 6px rgba(0,0,0,0.36), 0 3px 6px rgba(0,0,0,0.53);
}
.discover .gallery .image-card h2{
    color: var(--accent3-color);
    text-align: left;
}
.discover .gallery .image-card h3{
    margin-top: 0px;
    text-align: left;
    font-size: .8rem;
    color: var(--accent2-color);
}
.discover .hero .hero-message h1 {
    margin-top: 50px;
    margin-left: 50px;
  }
.event-card, .weather-card, .news-card, .spotlight-card, .join-card, .image-card{
    background-color: var(--primary-color);
    padding: 15px 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.36), 0 3px 6px rgba(0,0,0,0.53);
    margin-bottom: 20px;
    border-radius: 25px;
}
.event-card hr, .weather-card hr, .news-card hr, .spotlight-card hr, .join-card hr, .image-card hr{
    margin-top: 10px;
    width: 100%;
}

.event-card h3, .weather-card h3, .news-card h3, .spotlight-card h3, .join-card h3, .image-card h3{
    color: var(--accent3-color);
    text-align: center;
    margin-top: 20px;
    font-size: 1.2rem;
}
.event-card p, .news-card p, .spotlight-card p, .join-card p, .image-card p{
    background-color: var(--accent1-color);
    border-radius: 25px;
    padding: 15px;
}
.event-card img, .news-card img, .spotlight-card img, .image-card img{
    border-radius: 25px;
}
.spotlight-card.large-screen-only {
    display: none;
  }
section {
    margin-bottom: 20px;
    width:100%;
}
.weather-card p {
    color: var(--accent2-color);
    margin: 10px 0;
}
.weather-card img {
    width: 50px;
    height: 50px;
}
.weather-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
}
#weather-condition {
    font-size: 1.5rem;
}
.weather-card hr {
    height: 1px;
}
#weather-icon {
    width: 120px;
    height: 120px;
}
#weathertoday{
    font-size: 1.5rem;
    color: var(--);
}
#temperature, #temp {
    font-size: 2rem;
}
.icon-temp {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.join-section {
    display: none;
}
.join-button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border: var(--accent3-color) solid;
    color: var(--headline-color-on-color);
    margin-left: 65px;
    margin-right: 75px;
    border-radius: 25px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.36), 0 3px 6px rgba(0,0,0,0.53);
    background-color: var(--paragraph-background-color);
    transition: 0.5s;
}
.join-button:hover {
    border: var(--accent2-color) solid;
    color: var(--primary-color);
    background-color: var(--accent3-color);
    transform: scale(1.2);
    transition: 0.5s;
}
.hidden {
    display: none;
}
.carousel {
    position: relative;
    width: 100%;
  }
  
.carousel-slide {
    display: none;
}

.carousel-slide.active {
    display: block;
}
.statistics{
    align-items: center;
    text-align: center;
}
.statistics table {
    background-color: var(--nav-hover-background-color);
    border-radius: 25px;
    padding: 10px;
    color: var(--nav-hover-background-color);
    width: 100%;
}
.statistics table th {
    background-color: var(--accent1-color);
    border: 2px solid;
    border-color: var(--accent3-color);
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}
.statistics table td {
    background-color: var(--accent1-color);
    border: 2px solid;
    border-color: var(--accent3-color);
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}
/*Contact Page*/
.contact-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    height: 100vh;
}
  .contact-page-info,
  .contact-form {
    margin-bottom: 2rem;
}
  .contact-form form {
    display: grid;
    gap: 1rem;
    max-width: 400px;
    width: 100%;
}
  .contact-form label {
    font-weight: bold;
}
  .contact-form textarea {
    resize: vertical;
    min-height: 100px;
}
  .contact-page form input[type="text"],
  .contact-page form input[type="email"],
  #message {
    padding: 5px;
    margin-bottom: 10px;
    border: var(--accent3-color) solid;
    box-shadow: inset 0 3px 6px rgba(54, 54, 54, 0.416), inset 0 3px 6px rgba(67, 67, 67, 0.594);
}
.contact-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
/*Join Page*/
.join-devider, .contact-devider{
    display: flex;
    flex-direction: column;
    margin-top: 100px;
    margin-bottom: 100px;
}
.join-page {
    display: flex;
    flex-direction: column;
}
.join-page form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
}
  .form-group {
    display: flex;
    flex-direction: column;
}
  .select-wrapper {
    width: fit-content;
}
.join-page form #first-name,
.join-page form #last-name,
.join-page form #position-title,
.join-page form #cell-phone,
.join-page form #email,
.join-page form #business-name,
.join-page form #business-description,
.join-page form #membership-level {
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 100%;
  margin-bottom: 10px;
  margin-top: 10px;
  border: var(--accent3-color) solid;
  box-shadow: inset 0 3px 6px rgba(54, 54, 54, 0.416), inset 0 3px 6px rgba(67, 67, 67, 0.594);
}
form #business-description {
    width: 100% !important;
    min-height: 100px;
  }
.join-page form #email,
.join-page form #business-name {
    margin-bottom: 40px;
}
.join-page form #position-title {
    margin-bottom: 0px;
}

.join-page form #membership-level {
  width: 100%;
  border: var(--accent3-color) solid;
  box-shadow: inset 0 3px 6px rgba(54, 54, 54, 0.416), inset 0 3px 6px rgba(67, 67, 67, 0.594);
}
  .join-table {
    background-color: var(--nav-hover-background-color);
    padding: 20px;
    border-radius: 25px;
    margin-bottom: 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.36), 0 3px 6px rgba(0,0,0,0.53);
}
.join-page th.middle,
.join-page td.middle {
  width: 50px;
}
.join-page .membership-level-table {
  float: right;
  margin-left: 20px;
  width: 200px;
}
.join-page .membership-level-table {
  width: 100%;
  max-width: 800px;
  margin: auto;
  table-layout: fixed;
  margin-top: 20px;
}
.join-page table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
    background-color: var(--nav-hover-background-color);
}
.join-page .select-wrapper {
    width: 105%;
}
.join-page caption {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 10px;
  background-color: var(--nav-background-color);
  margin-bottom: 0px;
  caption-side: top;
  color: var(--accent1-color);
  padding: 5px;
}

.join-page th,
.join-page td {
  padding: 10px;
  text-align: left;
  color: var(--accent1-color);
}

.join-page th.basic,
.join-page td.basic {
  background-color: #ffd700;
}

.join-page th.premium,
.join-page td.premium {
  background-color: #c0c0c0;
}

.join-page th.deluxe,
.join-page td.deluxe {
  background-color: #ff8c00;
}

.join-page th:not([colspan]),
.join-page td:not([colspan]) {
  border: 2px solid var(--nav-background-color);
}

.join-page .join-button {
  padding: 10px;
  margin-left: 0px;
  margin-top: 20px;
  width: auto;
}
.join-page form {
    display: flex;
    flex-direction: column;
    width: 10%;
}
.join-thanks {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .join-thanks h1 {
    align-self: center;
    justify-content: center;
    font-size: 2.5rem;
  }
  .join-thanks p {
    align-self: center;
    justify-content: center;
    font-size: 1rem;
  }

  .join-page th.basic,
.join-page td.basic {
  background-color: #ffd700;
  color: black; 
}

.join-page th.premium,
.join-page td.premium {
  background-color: #c0c0c0;
  color: black; 
}

.join-page th.deluxe,
.join-page td.deluxe {
  background-color: #ff8c00;
  color: black; 
}
/* Footer design */
footer {
    display: flex;
    flex-direction: column;
    background-color: var(--nav-background-color);
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: auto;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.36), 0 3px 6px rgba(0,0,0,0.53);
    width: 100%;
    color: var(--headline-color-on-color);
    text-align: center;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    position: relative;
}
.footer-logo {
    justify-content: center;
    align-items: center;
}
.footer-logo:hover {
    color: var(--nav-hover-link-color);
    transform: scale(1.2);
    transition: 0.5s;
}
.footer-logo img {
    margin-top: 5px;
    height: 80px;
    border: 2px solid;
    border-color: var(--accent3-color);
    border-radius: 50px
}
footer h1 {
    font-size: .8rem;
    margin-bottom: 10px;
}
footer h2 {
    color: var(--accent1-color);
    font-size: .8rem;
}
footer .location img {
    height: 10px;
}
footer .location {
    color: var(--accent1-color);
    text-decoration: none;
    font-size: .8rem;
    justify-content: center;
    border-radius: 50px;
    padding: 15px;
    
}
.location:hover {
    background-color: var(--nav-hover-background-color);
    transform: scale(1.2);
    color: var(--accent3-color);
    
}
.contact-info {
    width: 90%;
    text-align: center;
    justify-content: center;
}
.contact-info h1{
    color: var(--headline-color-on-color);
    font-size: 1rem;
}
.sitespecifics {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
#footerinfo {
    margin-top: 15px;
    font-size: 1rem;
    color: var(--headline-color-on-color);
    display:block;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-top: 2px solid;
    border-color: rgba(255, 255, 255, 0.2);
    width: 100%;
}
#footerinfo h1 {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#footerinfo p {
    margin-bottom: -10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}