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

body {
  font-size: 16px;
  font-family: 'Montserrat', sans-serif; /* Arial, Helvetica, Verdana, .... Verdana, Geneva, sans-serif; */
  font-style:normal;
  font-weight:400;
  background-color:#FFF;
}

/* .reset-transforms * { */
  /* reset image scale prior to page loading when browser back button is used */ 
/*  -webkit-transform: none !important; */
/*  transform: none !important; */
/*  -webkit-transform: scale(1.0); */
/*  transform: scale(1.0); */
/* } */

.page {
  display: flex;
  flex-wrap: wrap;
}

/* This makes the new semantic elements behave like <div> elements */
/* (which are block boxes, not inline boxes) in legacy browsers.   */
section, article, aside, footer, header, nav {
  display: block;
}

/* SECTIONS ------------------------------------------------------ */
.section {
  width: 100%;
  display: flex;
  justify-content: center;  /* aligns items horizontally */
  align-items: center;      /* aligns items vertically   */
  border:none;
}

.subsection {
/*  width: 100%;  */
  display:flex;
  flex-direction: column;
  margin: 0px 0px 0px 0px;
}

.subsection-about-contact {
  margin-left:0px; 
  margin-right:0px;
}

.art {
  display:flex;
  flex-direction: column;
}

.main-art-image {
    width:100%;
    overflow:hidden; /* keeps image within bounds when scaled ... see .main-art-image img:hover */
}

.main-art-image #art-image {
  display: block; 
  width:100%;
  /*smooth return to normal scale */ 
  -webkit-transform: scale(1.0);
  transform: scale(1.0); 
  transition: transform 0.2s linear; 
}


.main-art-image #art-image:hover {
  /*smooth scale larger */ 
  -webkit-transform: scale(1.04);    /* was scale(1.1) */
  transform: scale(1.04);            /* was scale(1.1) */
  transition: transform 0.2s linear; 
  opacity: 1.0;                      /* was 0.8 */
  cursor:pointer;
}

.shop {
  display:flex;
  flex-direction: column;
}

.section-image {
  overflow:hidden; /* keeps image within bounds when scaled ... see .section-image img:hover */
}

.section-image img {
  display: block;
  width:100%;
  /*smooth return to normal scale */ 
  -webkit-transform: scale(1.0);
  transform: scale(1.0); 
  transition: transform 0.2s linear; 
}

.section-image img:hover {
  /*smooth scale larger */ 
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  transition: transform 0.2s linear; 
  opacity: 1.0; /* was 0.8 */
  cursor:pointer;
}

.section-image .section-image-wide {
  display:none;
}

.welcome-image {
/*  max-width:720px;*/
  width:100%;  /* snap to 100% width below 800px wide screen ... see media queries for widths greater than 800px */
}

/* Remove hover transition effect that comes with section-image */
.welcome-image img:hover {	
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
  transition: transform 0.0s linear; 
  opacity: 1.0;
  cursor:auto;
}

.news { 
  display:flex;
  flex-direction: column;
}

/*.news-2 { 
  display:flex;
  flex-direction: column;
}*/

.about {
  display:flex;
  flex-direction: column;
}

/*.about-2 { 
  display:flex;
  flex-direction: column;
}*/

.contact {
  display:flex;
  flex-direction: column;
}

/*.contact-2 {
  display:none;
}*/

.section-label {
  display:flex;
  flex-direction: column;
  justify-content: flex-end;   /* aligns items vertically   */
  align-items: center;         /* aligns items horizontally */
  padding:60px 40px 10px 40px;
}

/* changes appearance on hover */
.section-label a:hover {
  box-shadow:0px 4px 0px 0px #FC0; /* place yellow line below menu text item */
  transition: 0.2s; 
}

/* give keyboard navigation the same hover experience as using a mouse. */
.section-label a:focus {
  box-shadow:0px 4px 0px 0px #FC0; /* place yellow line below menu text item */
  transition: 0.2s; 
}

/* give keyboard navigation the same hover experience as using a mouse. */
.section-label a:active {
  box-shadow:0px 4px 0px 0px #FC0; /* place yellow line below menu text item */
  transition: 0.2s; 
}

.section-label img {
  display:block;
  max-width: 360px;	
  width:100%;
}

.flex-row-centered-wrap {
  flex-direction:row; 
  justify-content:center; 
  flex-wrap:wrap;	
}

/* add space below CONTACT to even out spacing in NEW/ABOUT/CONTACT column */
#contact-label {
  padding:30px 40px 40px 40px;	
}

/* add space below page heading */
#page-heading {
  padding-bottom: 30px;	
}

/* container for SHOP and NEWS/ABOUT/CONTACT */
.flex-container-1 {
  display: flex;
  justify-content: center; 
  flex-direction: column;
  width:100%;
}
  
  /* container for NEWS/ABOUT/CONTACT */
/*.flex-container-2 {
  display: flex;
  flex-direction: column;
}*/

/* container for FOOTER */
.flex-container-3 { 
  display: flex;
  justify-content: center;
  flex-direction: column;
  width:100%;
}

.header-logo-title-group {
  display:flex; 
  flex-direction:row; 
  justify-content:flex-start; 
  align-items:center;
}

.header-logo {
  max-width:70px; 
  margin-left:20px;
}

.header-logo img {
  display:block;
  width:100%;
}
 
.header-title {
  max-width:664px;
  padding:0px 30px 0px 20px; 	
}

.header-title img {
  display:block;
  max-width: 360px;	
  width:100%;
}



.footer {
  background: #666;
  color: #DDD;
  border-top:solid #FFF 4px;
}

.footer-title {
  max-width:664px;
  padding:30px 30px 30px 30px; 	
  margin:auto;
}

/* add invisible border (background color) to bottom of menu items          */
/* for the purpose of adding space between the text and the hover underline */
.footer-title img {
  border-bottom: solid #666 3px;
}

.footer-menu {
  display:flex;
  flex-direction:row;
  justify-content: center;
}

/* footer menu items: text images ---------------------------------------- */
.footer-menu li {
  list-style: none;
  
  width:150px;
  margin:6px; /* sets spacing around items */
  /* center list items */
  text-align:center;
}

/* add invisible border (background color) to bottom of menu items          */
/* for the purpose of adding space between the text and the hover underline */
.footer-menu li img {
  border-bottom: solid #666 1px;
}
  
.footer-menu li a:hover {
  box-shadow:0px 4px 0px 0px #FC0;  
  transition: 0.2s;
}

/* give keyboard navigation the same hover experience as using a mouse. */
.footer-menu li a:focus {
  box-shadow:0px 4px 0px 0px #FC0;  
  transition: 0.2s;
}

/* give keyboard navigation the same hover experience as using a mouse. */
.footer-menu li a:active {
  box-shadow:0px 4px 0px 0px #FC0;  
  transition: 0.2s;
}

.footer-menu-1 {
  display:flex;	
  flex-direction:column;
  justify-content: center;
}

.footer-menu-2 {
  display:flex;	
  flex-direction:column;
  justify-content: center;
}





.footer-social-logo-container {
  display:flex;	
  flex-direction: row;
  justify-content: center;
  width:36px;
  height:36px;
  margin: auto; /* centers logo horizontally */
  margin-top:4px;
  margin-bottom:16px;
}





.footer-twitter-logo {
  /* text-align:center; */
  width:32px;
  height:32px;
  margin:auto;
  background-image:url(../_images/twitter-social-icon_CIRCLE-WHITE-TRANSP_32x32_2x.png); 
  background-position: center;   /* center the image */
  background-repeat: no-repeat;  /* Do not repeat the image */
  background-size: cover;  /* Resize the background image to cover the entire container */
  /*smooth return to normal scale */ 
  -webkit-transform: scale(1.0);
  transform: scale(1.0); 
  transition: transform 0.2s linear;
}

.footer-twitter-logo:hover {
  margin:auto;
  background-image:url(../_images/twitter-social-icon_CIRCLE-BLUE-WHITE_32x32_2x.png);
  /*smooth return to normal scale */ 
  -webkit-transform: scale(1.1);
  transform: scale(1.1); 
  transition: transform 0.2s linear;
}

/* give keyboard navigation the same hover experience as using a mouse. */
.footer-twitter-logo:focus {
  margin:auto;
  background-image:url(../_images/twitter-social-icon_CIRCLE-BLUE-WHITE_32x32_2x.png); 
  /*smooth return to normal scale */ 
  -webkit-transform: scale(1.1);
  transform: scale(1.1); 
  transition: transform 0.2s linear;
}

/* give keyboard navigation the same hover experience as using a mouse. */
.footer-twitter-logo:active {
  margin:auto;
  background-image:url(../_images/twitter-social-icon_CIRCLE-BLUE-WHITE_32x32_2x.png);  
  /*smooth return to normal scale */ 
  -webkit-transform: scale(1.1);
  transform: scale(1.1); 
  transition: transform 0.2s linear;
}







.footer-instagram-logo {
  /* text-align:center; */
  width:32px;
  height:32px;
  margin:auto;
  background-image:url(../_images/instagram-social-icon_WHITE-TRANSP_32x32_2x.png); 
  background-position: center;   /* center the image */
  background-repeat: no-repeat;  /* Do not repeat the image */
  background-size: cover;  /* Resize the background image to cover the entire container */
  /*smooth return to normal scale */ 
  -webkit-transform: scale(1.0);
  transform: scale(1.0); 
  transition: transform 0.2s linear;
}

.footer-instagram-logo:hover {
  margin:auto;
  background-image:url(../_images/instagram-social-icon_BLUE-TRANSP_32x32_2x.png);
  /*smooth return to normal scale */ 
  -webkit-transform: scale(1.1);
  transform: scale(1.1); 
  transition: transform 0.2s linear;
}

/* give keyboard navigation the same hover experience as using a mouse. */
.footer-instagram-logo:focus {
  margin:auto;
  background-image:url(../_images/instagram-social-icon_BLUE-TRANSP_32x32_2x.png); 
  /*smooth return to normal scale */ 
  -webkit-transform: scale(1.1);
  transform: scale(1.1); 
  transition: transform 0.2s linear;
}

/* give keyboard navigation the same hover experience as using a mouse. */
.footer-instagram-logo:active {
  margin:auto;
  background-image:url(../_images/instagram-social-icon_BLUE-TRANSP_32x32_2x.png);  
  /*smooth return to normal scale */ 
  -webkit-transform: scale(1.1);
  transform: scale(1.1); 
  transition: transform 0.2s linear;
}








.footer-copyright {
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:0px 0px 20px 0px;
}

.footer-copyright img {
  margin:0px 10px 0px 10px;
}

/* end ----------------------------------------------------------- */













/* MEDIA QUERIES ------------------------------------------------- */

/* PORTRAIT Extremely Narrow (Mobile) Styles ... iPhone 4S */
/* was @media only screen and (max-width: 360px) and (orientation: portrait) */
@media only screen and (min-width: 1px) and (orientation: portrait) {
  .header-logo {
    max-width:40px; 
    margin-left:8px;
  }
  
  .header-title {
    padding:0px 0px 0px 10px; 	
  }
  
  .contact-2 {
    display:block;
  }
  
/*  .flex-container-2 {
	display:none;
  }*/
}
/* PORTRAIT Very Narrow (Mobile) Styles */
/* was @media only screen and (min-width: 360px) and (max-width: 470px) and (orientation: portrait)  */
@media only screen and (min-width: 360px) and (orientation: portrait) {
  .header-logo {
    max-width:50px; 
    margin-left:16px;
  }
  
  .header-title {
    padding:0px 0px 0px 10px; 	
  }
  
  .contact-2 {
    display:block;
  }
  
/*  .flex-container-2 {
	display:none;
  }*/
}

/* PORTRAIT Narrow (Mobile) Styles */
/* was @media only screen and (min-width: 470px) and (max-width: 800px) and (orientation: portrait) */
@media only screen and (min-width: 470px) and (orientation: portrait) {
  .header-logo {
    max-width:60px; 
    margin-left:16px;
  }
  
  .header-title {
    padding:0px 0px 0px 10px; 	
  }
  
  .news-2 {
    display:flex;
  } 
  
  .about-2 {
    display:flex;
  } 
  
  .contact-2 {
    display:block;
  }
  
/*  .flex-container-2 {
	display:none;
  }*/

} /* end PORTRAIT Narrow (Mobile) Styles */




/* LANDSCAPE Narrow (Mobile) Styles */
/* was @media only screen and (min-width: 470px) and (max-width: 800px) and (orientation: landscape)*/
@media only screen and (min-width: 470px) and (orientation: landscape) {
	
  /* Prevent mobile devices from rescaling text when in landscape orientation  */
  body {
	-webkit-text-size-adjust: 100%;
	   -moz-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
	        text-size-adjust: 100%;
  }
  
  .header-logo {
    max-width:60px; 
    margin-left:16px;
  }
  
  .header-title {
    padding:0px 0px 0px 10px; 	
  }
  
 .subsection {
    margin: 0px 0px 0px 0px;
  }
  
  .news-2 {
    display:flex;
  } 
  
  .about-2 {
    display:flex;
  } 
   
  .contact-2 {
    display:block;
  }
  
/*  .flex-container-2 {
	display:none;
  }*/

} /* end LANDSCAPE Narrow (Mobile) Styles */




/* Medium width (Tablet) Styles */
/* min width determined by title + menu-icon */
/* was @media only screen and (min-width: 800px) and (max-width: 1200px) */
@media only screen and (min-width: 800px) {
  .header-title img {
    max-width: 440px;	
  }

  .subsection {
    margin: 0px 1px 0px 1px;
  }
  
  .subsection-about-contact {
    margin-left:20px; 
    margin-right:20px;
  }
  
  .shop {
	display: flex;
    flex: 1;    /* equal widths (50%) */
	width:50%;
    margin: 0px 20px 40px 40px; 
  }
  
  .section-image .section-image-narrow {
    display:none;
  }
 
  .section-image .section-image-wide {
    display: block;
  }

  .welcome-image {
    max-width:720px;
  }
  
  .news-2 {
    display:none;
  } 
  
  .about-2 {
    display:none;
  } 
  
  .contact-2 {
    display:none;
  }
  
  /* switch from column to row */
  .flex-container-1 {
    flex-direction: row; 
	flex: 1;  /* equal widths (50%) */
  }

/*  .flex-container-2 {
	display: flex;
	flex: 1; 
	width:50%;
	margin: 0px 40px 0px 20px;
  }*/
  
/*  .flex-container-2 {
	display:none;
  }*/
  
  .footer-copyright {
	flex-direction:row;
	justify-content:center;
  }

} /* end Medium width (Tablet) Styles */




/* Wide (Desktop) Styles */
/* min width determined by title + menu-text */
@media only screen and (min-width: 1200px) {
  .header-title img {
    max-width: 360px;	
  }
  
  .subsection {
    margin: 0px 1px 0px 1px;
  }
  
  .subsection-about-contact {
    margin-left:20px; 
    margin-right:20px;
  }
  
  .shop {
	display:flex;
	flex: 1; /* equal widths (50%) */
	margin: 0px 20px 40px 40px;
  }
  
  .section-image .section-image-narrow {
    display:none;
  }
  
  .section-image .section-image-wide {
    display:block;
  }
  
  .welcome-image {
    max-width:520px;
  }
  
  .news-2 {
	display:flex;
	flex: 1; /* equal widths (50%) */
	margin: 0px 20px 40px 20px;
  }
  
  .main-news-image {
    display:block;
	width: 100%; /* 1500px; */
  }
  
  .about-2 {
	display: flex;
	flex: 1; /* equal widths (50%) */
	margin: 0px 40px 40px 20px;
  }
  
  .contact-2 {
    display:block;
  }
  
  #contact-label-2 {
	padding-top:0px;
	padding-bottom:20px;
	width:36%;
	margin:auto;
  }
  
  /* switch from column to row */
  .flex-container-1 {
    flex-direction: row; 
	flex: 1;  /* equal widths (50%) */
  }
  
/*  .flex-container-2 {
	display:none;
  }*/
  
  .footer-copyright {
	flex-direction:row;
	justify-content:center;
  }
  
} /* end Wide (Desktop) Styles */






/* COLORS ------------------------------------------------------- */
/*

#FFF white
OLD .menu-bar background  
#dropdown-links a color (text)
.bar background-color (hamburger lines)
NOT USED    .main-title background (text title image ... narrow only)
.art background-color
.shop background-color
.news background-color
.about background-color
.contact background-color

#DDD almost white
.footer color (text)

#BBB light gray (slightly darker)
#dropdown-links a:active background-color (contact.php)

#B3B3B3
#submit:hover background-color:
	
#999 medium gray 
#dropdown-links li background-color 
OLD .menu-icon:hover background-color
.change .menu-icon background-color ---------- DOESN'T WORK
 
#666 dark gray
#dropdown-links a:hover background-color
.menu-text > li
OLD .menu-icon background-color
.footer background

rgb(0, 66, 89) medium blue-green 
.menu-bar background-color
.menu-icon background-color

rgb(51, 117, 140) lightened 20% medium blue-green 
.menu-icon:hover background-color

#FC0 yellow 
#dropdown-links a:hover box-shadow (line inside bottom of gray bar)
.section-label a:hover  box-shadow (underline)

#0FF bright cyan
a:hover, a:active, a:focus 

#0CF cyan
.separator-news gradient (#FFF, #0CF 50%, #FFF) white / cyan / white
a:link, a:visited 

#00AEEF darker cyan
#submit background-color (contact.php)
p.required color (contact.php)


NOT NEEDED
 
.brand background:#09F; (MAIN BRANDING IMAGE)
*/