/*  NOTES
Headings: Italiana - 400
Body: Lato - 300, 400

light-featured-rust: #C3A490
dark blue: #142A37
dark red: #781807, alternative : #ca2203
*/

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

img { max-width: 100%; }


/*  Gridlex reset */
[class*=grid] { 
    padding: 0;
}
[class*=grid] {
    margin:0;
}

[class*=col-], [class*=col_], [class~=col] {

    padding: 0}


/* Reusable utility classes---------*/

/* Padding Utility Classes */ 

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

.padded-05 { padding: 0.5rem; }
.padded-1 { padding: 1rem; }
.padded-2 { padding: 2rem; }

.padded-t { padding-top: 5%; }
.padded-b { padding-bottom: 5%; }
.padded-l { padding-left: 5%; }
.padded-r { padding-right: 5%; }


.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; }


.bg-dark      { background-color: #142A37;  }
.bg-featured  { background-color: #ca2203; }

.light-text          { color: white;   } 
.dark-text          { color: #142A37;   } 
.light-featured-text { color: #c4afa3; }
.featured-text       { color: #ca2203;}


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


/*General typography & universal styles ----------*/

body {
    font-family: 'Lato', sans-serif;
    font-weight: 200;
}

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

h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-family: 'Italiana', serif;
}

h1 {
    font-size: 4.5rem;
    line-height: 0.9;
}

h1 span {
    display: block;
    font-size: 6.2rem;
}

h2 {
    font-size: 2.5rem;
}

h2 span {
    display: block;
    font-size: 2rem;
    line-height: 0.9;
}

h3 {
    font-size: 2.5rem;
}

p {
    font-weight: 300;
    font-size: 1.1rem;
}

a {
    color: inherit;
    text-decoration: none;
}

/* h1:last-child, 
h2:last-child, 
h3:last-child, 
h4:last-child, 
h5:last-child, 
h6:last-child, 
p:last-child {
    margin-bottom: 0;
} */


/* Unique typography styles----  */

.tight-text {
    line-height: 0.8;
}

.lg-text { font-size: 4.7rem; }
.xl-text { font-size: 6rem; }

.price { 
    display: block;
    font-weight: 400;
    text-align: right;
    margin-top: 0.5rem;
}

.menu p {
    margin-top: 0.5rem;
    font-size: 1rem;
}

.menu h3 {
    margin: 1rem 0;
}

.italic { font-style: italic;}



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

footer {
    padding: 5%;
    padding-bottom: 1rem;
}

footer a {
    line-height: 1.4;
}


footer h2 {
    margin-bottom: 0.5rem;
}

.sub-footer {
    padding-top: 4%;
}

.sub-footer p {
    font-size: 0.8rem;
    opacity: 0.7;
}



/* Images & Background Images—————————-—— */

.bg-image {
    background-color: #142A37;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.bg-pour        {background-image: url('/images/the-article-cocktail-1.jpg'); }
.bg-martini {
    background-image: url('/images/the-article-cocktail-3.jpg');
    background-position: 50% 0%;
 }
.bg-bartender-1 {background-image: url('/images/the-article-cocktail-4.jpg'); }
.bg-bartender-2 {background-image: url('/images/the-article-cocktail-5.jpg'); }
.bg-cheers      {background-image: url('/images/the-article-cocktail-6.jpg'); }
.bg-banner {
    background-image: url('/images/the-article-cocktail-banner.jpg');
    background-position: 50% 54%;
}
.bg-venue       {background-image: url('/images/the-article-cocktail-venue.jpg'); }
.bg-whiskey     {background-image: url('/images/the-article-header-unsplash.jpg');}
.bg-light-water {background-image: url('/images/water-light.jpg'); }

/* Aspect Ratio  */
.portrait { padding-bottom: 125%; }
.square { padding-bottom: 100%; }

/* Background Position */
.bg-pos-t { background-position: top; }
.bg-pos-b { background-position: bottom; }
.bg-pos-l { background-position: left; }
.bg-pos-r { background-position: right; }
.bg-pos-unique { background-position: 50% 38%; }

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



/* Gridlex SM  */
@media(max-width: 48em) {

    h1      { font-size: 6rem;   }
    h1 span { font-size: 3rem; }

    .mob-hide { display: none; }

    .mob-padded-t-0 { padding-top: 0;}

    .mob-light-text { color: white; }

    .mob-center     { text-align: center;}

    .mob-padded-1-lr {padding-left: 1rem; padding-right:1rem;}


    footer a { font-size: 1rem; }

}

/* Custom Media Query XXS  */
@media(max-width: 25em) {
    h1 {
        font-size: 4.5rem;
    }
    h1 span {
        font-size: 2.5rem;
    }
}