* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


/* ----- Universal Image Styles ----- */

.bg-image {
    background-image: url('/images/the-sleep-co-yellow.jpg');
    background-color: rgb(240,240,240);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}

/* ----- Aspect Ratios ----- */

.portrait-tall  { padding-bottom: 175%; }
.portrait       { padding-bottom: 125%; }
.square         { padding-bottom: 100%; }
.landscape      { padding-bottom: 66%; }
.landscape-wide { padding-bottom: 56%; }

/* Background Image Positions */

.bg-pos-t { background-position: top; }
.bg-pos-b { background-position: bottom; }
.bg-pos-l { background-position: left; }
.bg-pos-r { background-position: right; }


/* Universal Styles & Utility Classes */

body {
    font-family: "Catamaran", sans-serif;
    color: #192B37;
}

.padded     {padding: 5%;}
.padding-sm {padding: 1rem;}
.padding-lg {padding: 10%;}

.bg-dark {
    background-color: #192B37;
    color: white;
}

.tall-50    { min-height: 50vh; }
.tall-60    { min-height: 60vh; }
.tall-70    { min-height: 70vh; }
.tall-80    { min-height: 80vh; }
.tall-90    { min-height: 90vh; }
.tall-100   { min-height: 100vh; }


/* ----- Typography Styles ----- */

h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    line-height: 1.1;
}

h2 { font-size: 2.5rem; }

p {
    font-weight: 200;
    line-height: 1.5;
    margin-bottom: 1rem;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid;
}

a:hover {
    color: #ffbe00;
}


.bg-featured  { background-color: #ffbe00; }
.bg-accent { background-color: #e3ecf2;}

.featured-text  { color: #ffbe00; }
.white-text  { color: white; }

.small-text     { font-size: 1.5rem; }

.medium-text    { 
    font-size: 2rem;
    line-height: 1.1; 
}

.big-text       { font-size: 4.5rem; }

.subtitle {
    font-size: 1.2rem;
    color: rgb(120,120,125);
}

.quote {
    font-size: 6rem;
    display: inline-block;
    color: rgb(120,120,125);
    line-height: 1;
}

.font-weight-light      { font-weight: 200; }
.font-weight-normal     { font-weight: 400; }
.font-weight-extra-bold { font-weight: 800; }

.text-left      { text-align: left; }
.text-center    { text-align: center; }
.text-right     { text-align: right; }


/* ----- Header & Footer Styles ----- */

header {
    background-image: url('/images/the-sleep-co-white.jpg');
    background-size: cover;
    background-position: center;
    padding: 2% 5%;
    position: relative;
}

header h3 {
    font-size: 5.5rem;
    line-height: 1;
}

footer a {
    border: none;
}

nav a {
    display: inline-block;
    padding: 0.5rem;
    border: none;
}

.logo h2 {
    margin-bottom: 0;
}

.mvs {
    font-size: 0.8rem;
    opacity: 0.8;
    
}

/* ----- Burger Menu Styles ----- */

.burger-menu {
    display: none;
    /* position: fixed; */
    position: absolute;
    top: 12%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

.burger-menu a {
    display: block;
    font-size: 1.5rem;
    padding: 0.5rem;

}


.burger {
    position: relative;
    cursor: pointer;
    
}

.burger.active i {
    color: #ffbe00;

}

.burger i {
    font-size: 2.2rem;
    margin-bottom: 0;
    
}

/* ----- Background Images ----- */

.bg-bed { background-image: url('/images/the-sleep-co-bed.jpg');

}

.bg-dog { 
    background-image: url('/images/the-sleep-co-dog.jpg');
    background-position: 50% 35%;

}

.bg-pillow {
    background-image: url('/images/the-sleep-co-yellow.jpg');
    background-position: 50% 57%;
}

/* ----- Image Gallery ----- */

.gallery [class*=col-] {
    padding: 0.5%;
  }

.gallery a {
    border-bottom: none;
}

/* ----- Active Popup Background  ----- */

.lg-backdrop {
    background-color: rgb(120,120,125);
}

.lg-backdrop.in {
    opacity: 0.9; 
}

/* ----- Icon Grid ----- */

.fa-solid {
    display: block;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 3rem;
}

/* ----- Buttons and Forms ----- */

input, textarea {
    width: 100%;
    display: block;
    margin-bottom: 0.3rem;
    padding: 0.5rem;
    border: 2px solid transparent;
    font-family: inherit;
    font-size: 0.9rem;
}

input:focus,
textarea:focus {
    border: 2px solid #ffbe00;
    outline: none;
}

.button {
    padding: 0.5rem 2rem;
    background-color: #ffbe00;
    color: inherit;
    appearance: none;
    border: 2px solid #ffbe00;
}

/* ----- General CSS Responsive Styles (Apply everywhere unless overridden) ----- */

.show-xs,
.show-sm,
.show-md { 
    display: none; 
}


/* ----- MD Media Query (64em / 1024px) ----- */

@media (max-width: 64em) {
    .show-md { display: block; }
    .hide-md { display: none;  }

    .md-tall-80 { min-height: 80vh; }
}

/* ----- SM Media Query (48em / 768px) ----- */

@media (max-width: 48em) {
    .show-sm { display: block; }
    .hide-sm { display: none;  }

    .flex-flip-sm { flex-direction: column-reverse; }

    .sm-text-center { text-align: center;}
    .sm-text-left   { text-align: left;  }
    .sm-text-right  { text-align: right; }

    .sm-padded      { padding: 5%;       }
    .sm-padded-1    { padding: 1rem;     }
    .sm-padded-05   { padding: 0.5rem;   }

    .sm-padded-t-0  { padding-top: 0;    }
    .sm-padded-b-0  { padding-bottom: 0; }
    .sm-padded-l-0  { padding-left: 0;   }
    .sm-padded-r-0  { padding-right: 0;  }
  
    .sm-margin-t-0  { margin-top: 0;     }
    .sm-margin-b-0  { margin-bottom: 0;  }
    .sm-margin-l-0  { margin-left: 0;    }
    .sm-margin-r-0  { margin-right: 0;   }

    .logo h2 { font-size: 2rem; }

    header h3 { font-size: 11vw; }

}

/* ----- XS Media Query (36em / 576px) ----- */

@media (max-width: 36em) {
    .show-xs { display: block; }
    .hide-xs { display: none;  }

    h1 {
        font-size: 1.4rem;
        line-height: 1.1;
    }
}

/* ----- XXS Media Query (25em / 400px) ----- */

@media (max-width: 25em) {

    [class*="grid-"] .xxs-stack {
        flex-basis: 100%;
        max-width: 100%;
    }

    
}