/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
border-radius: 10px;
}

nav {
float: center;
padding: 0px;		
}

#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: #282828 url('https://jsmith.us/img/menu-icon.png') center;
}

a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}

ul {
list-style: none;
}

li {
display: inline-block;
padding: 2px
}

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  padding: 8rem 0 7rem;
  text-align: center;
}
.section-heading,
.section-description {
  margin-bottom: 1.2rem;

}

/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.values {
  background-image: url('https://jsmith.us/img/bg.jpg');
  background-size: cover;
  color: #fff;
  padding-bottom: 5rem;
}
.value-multiplier {
  margin-bottom: .5rem;
  color: #11DFC7;
}
.value-heading {
  margin-bottom: .3rem;
}
.value-description {
  opacity: .8;
  font-weight: 300;
}

/* Help
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.get-help {
background-color: #fff;
  border-bottom: 1px solid #ddd;
}

/* Categories
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.categories {
  background-color: #464646;
  background-size: cover;
  color: #fff;
}
.categories .section-description { 
  margin-bottom: 4rem;
}


/*MEDIA QUERY*/
@media only screen and (max-width : 750px) {

#menu-icon {
display:inline-block;
}

nav ul, nav:active ul { 

display: none;
position: absolute;
padding: 0px;
background: #fff;
border: 5px solid #444;
right: 5px;
top: 150px;
width: 40%;
border-radius: 4px 0 4px 4px;

}

nav li {
text-align: center;
width: 100%;
padding: 5px 0;
margin: 0;

}

nav:hover ul {
display: block;
z-index: 1;

}
}



/* Bigger than 550 */
@media (min-width: 550px) {
  .section {
    padding: 12rem 0 11rem;
  }

  .hero {
    padding-bottom: 12rem;
    text-align: left;
    height: 75px;
  }
  .hero-heading {
    font-size: 5rem;
    text-align: center;
  }

}

/* Bigger than 750 */
@media (min-width: 750px) {
  .hero {
    height: 100px;
  }
  .hero-heading {
    font-size: 5rem;
    text-align: center;
  }
  .section {
    padding: 14rem 0 15rem;
  }
  .hero {
    padding: 16rem 0 14rem;
  }
  .section-description {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .categories {
    padding: 8rem 0 8rem;
  }
}

/* Bigger than 1000 */
@media (min-width: 1000px) {
  .section {
    padding: 10rem 0 8rem;
  }
.hero {
    padding: 13rem 0 10rem;
  }
  .hero-heading {
    font-size: 6.0rem;
    text-align: center;
  }

}