html, body{
   overflow-x: hidden;
 }

body {
  font-family: "muli", sans-serif;   
  color: #2B2B2B;
  text-align: left;    
}

img {
    max-width: 100%;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 { font-size: 35px; font-weight: 600; line-height: 1.2;  letter-spacing: 0px; font-family: "muli", sans-serif;}
h2 { font-size: 28px; font-weight: 600;line-height: 36.6px; letter-spacing: .5px; font-family: "muli", sans-serif; }
h3 { font-size: 20px; font-weight: 600; line-height: 29.34px;  letter-spacing: .35px; font-family: "muli", sans-serif; }
h4 { font-size: 21px; font-weight: 400; line-height: 28.6px; letter-spacing: .4px; }
h5 { font-size: 18px; line-height: 1.3;  letter-spacing: .05rem; }
p { font-size: 20px; font-weight: 200; line-height: 27.6px;  letter-spacing: 0px; }

@media (min-width: 550px) {
h1 { font-size: 40px;}
h2 { font-size: 25px;}
h3 { font-size: 18px;}
h4 { font-size: 20px;}
h5 { font-size: 19px;}
p { font-size: 15px;}
} 

@media (min-width: 1000px) {
h1 { font-size: 50px;}
h2 { font-size: 28px;}
h3 { font-size: 20px;}
h4 { font-size: 22px;}
h5 { font-size: 18px;}   
p { font-size: 18px;}
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #EDE9E8; }
a:hover {
  color: #5191DB; }


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button-primary {
    display: inline-block;
    position: relative;
    margin-top: 13px;
    border-radius: 25px;
    color: #fff;
    background-color: #5191DB;
    height: 40px;
    font-size: 11px;
    width: 200px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "muli", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .2rem;
    text-decoration: none;
}

/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
li {
    list-style: none;
}

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
    padding: 8rem 0 7rem;
}

/* Nav Bar 
-------------------------------------------------- */
.navbar {
    position: relative;
    background-color: none;
    width: 100%;
    text-align: center;
    z-index: 99;
}

.navbar-logo img {
    margin-top: 33px;
    display: inline;
    text-align: center;
}

.navbar-menu {
    margin-top: 30px;
    padding: 5px;
    display: none;
}

.navbar-item {
    display: inline;
    padding-right: 25px;
    padding-left: 25px;
    float: none;
}

  .navbar-link {
    text-transform: uppercase;
    font-family: "muli", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-decoration: none;
    color: #2B2B2B; 
}

.apple-download {
    max-width: 35%;
    padding: 3px;
}


.android-download {
    max-width: 35%;
    padding: 3px;
}


/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero { 
    background-image: url(../images/upstay-hero-bg-trans.png); 
    background-repeat: no-repeat;
    background-size: cover;   
    text-align: center;  
    height: 100%;
    padding-bottom: 100px;
    margin-top: -150px;
}

.hero-heading {
    margin-top: 150px;
}

.hero-subheading {
    padding-bottom: 30px;
}


/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.value-heading {
   margin-top: 0px;    
   margin-bottom: 40px;
}

.button.download {
    margin-top: 30px;

}

.values .phone {
    margin-top: -5px;
    padding: 50px;
    width: 70%;
}

/* Features
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.features {
    margin-top: -80px;    
    position: relative;
    background-color: #EDE9E8;   
    padding-bottom: 0px;
    padding-top: 50px
}

.features-description {
  margin-bottom: 6.0rem;
}

.features-icons {
    margin-bottom: 30px;
}

.book-icon, .bell-icon, .relax-icon {
    max-width: 20%;
}

/* Services
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.services {
  padding-top: 70px;
  padding-bottom: 70px;
  text-align: center;    
} 

.services-content {
    padding-bottom: 20px;
}

.service {
    margin-top: 43px;
}

.services-heading {
    margin-top: 20px;
}

.dining.services-heading {
    margin-top: 13px;
}

.housekeeping.services-heading {
    margin-top: 12px;
}

.services-list p {
    line-height: 10px;
}


/* Vacation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.vacation {   
  background-image: url('../images/vacation-bg.png');
  background-repeat: no-repeat;    
  text-align: center;
  height: 411px;
}

.vacation-heading {
        margin-top: 20px;
}


/* Download
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.download-app {
    background-image: url(../images/download-phone-trans.png);
    background-repeat: no-repeat;    
    background-size: cover;
    max-width: 100%;
    height: 120px;
    padding-bottom: 20px;
}

.download-content {
    float: right;
    margin-top: -180px;
    padding-top: 20px;
}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer {
    background-color: #2B2B2B;
    margin: auto;
    height: auto;
    color: #EDE9E8;
    padding-top: 60px;
    padding-left: 20px;
}

.footer-logo {
    padding-bottom: 15px;
}

.footer h3 {
    padding-bottom: 0px;
    font-size: 17px;
}

.footer p {
    font-size: 15px;
}

.footer li {
    margin-bottom: -15px;
}

.footer-link {
    text-decoration: none;
    color: #EDE9E8;
}
    
.footer-links {
    padding-bottom: 15px;
}

/* Only applies to larger than 550 */
@media (min-width: 550px) {
.navbar-menu {   
    display: inline;
    padding-left: 50px;
}

.navbar-item {
    display: inline;
    padding-right: 10px;
    padding-left: 10px;
}
    
.hero {
    padding-bottom: 150px;
    background-image: url(../images/upstay-hero-bg.png);
} 
    
.hero-subheading {
    padding-left: 100px;
    padding-right: 100px;
}
    
.values {
    margin-top: -20px;  
}
    
.value-heading {
    margin-top: 70px;  
}
    
.values .phone {
    padding-top: 50px;
    padding-left: 40px;
    margin-bottom: 50px;
    width: 100%;
}
    
.value-desc {
    padding: 0px;
}   
    
.book-icon, .bell-icon, .relax-icon {
    max-width: 60%;
}
    
.service {
    display: block;
}
    
.housekeeping-icon {
    margin-top: -10px;
}
    
.services-list p {
    line-height: 20px;
}
    
.services-heading {
    line-height: 20px;
    padding-bottom: 20px;    
}
    
.dining.services-heading {
    line-height: 20px;
    padding-bottom: 5px;    
}
    
.housekeeping.services-heading {
    margin-top: 13px;
}
    
.vacation .section-heading {
    padding-top: 50px;    
}   
    
.download-app {
    background-image: url(../images/download-phone-trans.png);
    margin-top: -230px;
    height: 250px;
}
    
.download-content {
    margin-top: 0px;
    float: right;
    padding-top: 20px;
    padding-left: 0px;
} 
}

/* Only applies to larger than 860 */
@media (min-width: 860px) {
.features {
    margin-top: -100px;
} 
    
.dining.services-heading {
    padding-bottom: 20px;    
}
}
    
/* Only applies to larger than 880
@media min-width: 800px) {
  }
*/
    
/* Only applies to larger than 1000 */
@media (min-width: 1000px) {

.hero-subheading {
    padding-left: 255px;
    padding-right: 255px;
}

.value-heading {
    margin-top: 70px;  
}
    
.values .phone {
    padding-top: 0px;
    padding-left: 40px;
}    
    
.values .phone {
    padding: 0px;
    padding-left: 60px;
    max-width: 271px;
}


.book-icon, .bell-icon, .relax-icon {
    margin-left: 50px;
}    
    
.features {
    margin-top: -180px;    
    padding-bottom: 20px;
}
  
    
.services-content {
    margin-top: 40px;
    padding-left: 150px;
    padding-right: 150px;
}

.housekeeping-icon {
    margin-top: -10px;
}
    
.services-list p {
    line-height: 20px;
}
    
.housekeeping.services-heading {
    padding-top: 15px;
}

.concierge.services-heading {
    padding-top: 5px;
}
    
.front-desk.services-heading {
    padding-top: 12px;
}

.dining.services-heading {
    padding-top: 19px;
}
    
.vacation-heading {
    margin-top: 50px;
}
   
.download-app {
    background-image: url(../images/download-phone.png);
    margin-top: -200px;
    height: 400px;
}

.download-content {
    padding-left: 500px;
    margin-top: 50px;
}

.navbar-menu {
    display: inline;
    text-align: right;
}
    
.navbar-logo img {
    margin-left: -200px;
}
    
.navbar-item {
    padding-right: 25px;
    padding-left: 25px;
}  
    
.navbar-link {
    font-size: 13px;
}   
}