@charset "UTF-8";
:root {

/* Gray scale */
    --gramado-color-black:  #000000;
    --gramado-color-gray1:  #202020;
    --gramado-color-gray2:  #404040;
    --gramado-color-gray3:  #606060;
    --gramado-color-gray4:  #808080;
    --gramado-color-gray5:  #a0a0a0;
    --gramado-color-gray6:  #c0c0c0;
    --gramado-color-gray7:  #e0e0e0;
    --gramado-color-white:  #ffffff;

/* ... */

}

/*
 * gramado.css minimalist css library.
 * Created by Fred Nora.
 * (This is a work in progress)
 */

/*
 * Library components:
 * ===============================================
 *   0 ) Initialization     - Global scope
 * -------------------------------------
 *   1.1 ) .gramado-banner    - Banner
 *   1.2 ) .gramado-nav       - Navigation bar
 *   1.3 ) .gramado-container - Container
 *   1.4 ) .gramado-header    - Header
 * -------------------------------------
 *   2.1 ) .gramado-text      - Text
 *   2.2 ) .gramado-image     - Image
 *   2.3 ) .gramado-button    - Button
 * -------------------------------------
 *   3.1 ) .gramado-footer    - Footer
 */

/*   0 ) Initialization     - Global scope */
html, body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #F2EFEF;
}
h1,h2,h3,h4,h5,h6 {
    margin: 0;
    padding: 0;
}
a {
  color: #0069d6;
}
a:hover {
  color: #0050a3;
}


/* 
 * Small screen: ------------------------------
 * Mobile first?
 */

/* 1.1 ) .gramado-banner    - Banner */

/* 1.2 ) .gramado-nav       - Navigation bar */
.gramado-nav {
    font-size: 4.5vw;
    border-top: 2px solid rgba(88, 88, 88, .3);
    border-bottom: 2px solid rgba(129, 129, 129, .3);

    top: 0;
    position: sticky;
    align-items: center;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
/*
    position: sticky;
    top: 0;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    padding: 0.5rem 1.5rem;
    z-index: 100;
    display: flex;
    align-items: center;
*/
}
.gramado-nav ul {
    text-align: center;
    margin: 0;
}
.gramado-nav li {
    width: fit-content;
    text-align: center;
    display: block;
    padding: 0.4% 0.2% 0.2% 0.2%;

    transition: color .2s;
}
.gramado-nav a {
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #808080;
    display: inline-block;

    transition: color .2s;
}
.gramado-nav a:hover {
    background-color: rgba(200, 200, 200, .6); 
}

.gramado-logo {
    width: 40px;
    height: 40px;
    margin-right: 1rem;
    border-radius: 50%;
}

/* 1.3 ) .gramado-container - Container */
.gramado-container {
    font-size: 4.4vw;
    text-align: center;
}

/* 1.4 ) .gramado-header    - Header */
.gramado-header{
    font-size: 3.5vw;
    color: #202020;
    text-align: center;
    text-transform: uppercase;
}
.gramado-header-image {
    text-align: center;
    width: 11%;
    height: auto;
}

/* 2.1 ) .gramado-text      - Text */
.gramado-text{
    font-size: 3.5vw;
}

/* 2.2 ) .gramado-image     - Image */
.gramado-image {
    width: 96%;
    height: auto;
}
.gramado-image-container {
    text-align: center;
    border-top: 4px solid rgba(222, 222, 222, .3);
}

/* 2.3 ) .gramado-button    - Button */
.gramado-button {
    font-size: 4.5vw;
    text-align: center;
    color: #fff;
    background-color: #007bff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.25);
    border-radius: .25rem;
    padding: .375rem .75rem;
    display: inline-block;
}
.gramado-button:hover {
    background-color: #0069d9;
    text-decoration: none;
}
.gramado-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px lightskyblue;
}
.gramado-button:active {
  background-color: #333;
  border-color: #333;
  color: #eee;
}

/* 3.1 ) .gramado-footer    - Footer */
.gramado-footer {
    font-size: 3.5vw;
    text-align: center;
    color: #808080;
    padding-bottom: 2%;
}
.gramado-footer-logo {
    text-align: center;
    border-top: 4px solid rgba(222, 222, 222, .3);
}


/*
 * ------------------------------------------------------
 * Component: Media queries. 
 */


/* large screen */
@media (min-width: 640px) {

/* 1.1 ) .gramado-banner    - Banner */

/* 1.2 ) .gramado-nav       - Navigation bar */
.gramado-nav {
    font-size: 2.2vw;
    border-top: 2px solid rgba(80, 80, 80, .3);
    border-bottom: 2px solid rgba(123, 123, 123, .3);
}
.gramado-nav ul {
    text-align: center;
    margin: 0;
}
.gramado-nav li {
    text-align: center;
    display: inline;
    padding: 0 2%;
}
.gramado-nav a {
    text-decoration: none;
    text-transform: uppercase;
    color: #202020;
    display: inline-block;
}
.gramado-nav a:hover {
    background-color: rgba(200, 200, 200, .6); 
}

/* 1.3 ) .gramado-container - Container */
.gramado-container {
    font-size: 4.0vw;
    text-align: center;
}

/* 1.4 ) .gramado-header    - Header */
.gramado-header{
    font-size: 1.8vw;
    color: #202020;
}
.gramado-header-image {
    text-align: center;
    width: 11%;
    height: auto;
}

/* 2.1 ) .gramado-text      - Text */
.gramado-text{
    font-size: 2.2vw;
    color: #202020;
}

/* 2.2 ) .gramado-image     - Image */
.gramado-image {
    width: 50%;
    height: auto;
}
.gramado-image-container {
    text-align: center;
    border-top: 4px solid rgba(222, 222, 222, .3);
}

/* 2.3 ) .gramado-button    - Button */
.gramado-button {
    font-size: 2.2vw;
    text-align: center;
    color: #fff;
    background-color: #007bff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.25);
    border-radius: .25rem;
    padding: .375rem .75rem;
    display: inline-block;
}
.gramado-button:hover {
    background-color: #0069d9;
    text-decoration: none;
}
.gramado-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px lightskyblue;
}
.gramado-button:active {
  background-color: #333;
  border-color: #333;
  color: #eee;
}

/* 3.1 ) .gramado-footer    - Footer */
.gramado-footer {
    font-size: 1.4vw;
    text-align: center;
    color: #808080;
    padding-bottom: 2%;
}
.gramado-footer-logo {
    text-align: center;
    border-top: 4px solid rgba(222, 222, 222, .3);
}


}