/* -------------
@viewport {
  width: device-width;
  zoom: 1.0;
}

@-ms-viewport {
  width: device-width ;
}
------------ */


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    
    /* hide all links, except for the first one ("Home"). Show the link that contains and should open and close the topnav (.icon) */
    .shop-topnav a:not(:first-child) {display: none;}
    .shop-topnav a.shop-icon {
        float: right;
        display: block;
    }
    
    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    .shop-topnav.responsive {position: relative;}
    .shop-topnav.responsive a.shop-icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .shop-topnav.responsive a {
        float: none;
        display: block;
        text-align: center;
    }
    
    .shop-name {
         display: none;
         padding-top: 50px;
         font-size: 2.0em;
    }
    .shop-top-box-small {
        display: block;
        margin: auto;
        width: 80%;
        font-size: 0.9em;
    }
    .shop-padding {
        padding-top:32px;
        padding-bottom:16px;
    }
    /* redefine -> new line */
    .w3-col.s6 {
        width: 100%;
        padding-bottom: 0.7em;
    }
 
    
} 
@media only screen and (max-width: 400px) {
    .shop-name {
        font-size: 2.0em;
    }
    .shop-top-box-small {
        display: block;
        margin: auto;
        width: 80%;
        font-size: 0.8em;
    }
    .shop-padding {
        padding-top:32px;
        padding-bottom:16px;
    }
        
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px)  {
   /* Hide the link that should open and close the topnav on small screens */
    .shop-topnav .shop-icon {
        display: none;
    }
    .shop-name {
        font-size: 70px;
    }
} 

/* --- eof --- */