/* 
main colors are #cae6e2 and #aad3ce, with borders #3084E8
Fonts color is headings #2e5f79
#818589; <!-- gunmetal grey>
#008080 for h1
#004c4c for p

*/
:root {
        --primary-grey: #d9d9d9;  /*background main light grey color*/
        --secondary-dark: #008080; /*#04d3bc; text - teal*/
        --secondary-light: #a4a4a4; /*8f8f8f;*/  /*text - dark grey*/
        --back-color-light: #e7e9ec;  /*background - white*/
        --text-color:  #666769;   /*text -  dark grey*/
        --dark-grey: #a4a4a4; /*8f8f8f;*/
        --med-grey: #d9d9d9;
        --light-grey: #e7e9ec;
        --teal: #008080; /*#04d3bc;*/
        --nav-bkgd: #a4a4a4; /*8f8f8f;*/ /*#818589; */
        --nav-links: #ffff; /*#666769; */
        --heading-text: #008080; /*#04d3bc; */
        --nav-border: #008080; /*#04d3bc; */
        --nav-hover-text: #8f8f8f;
        --nav-hover: #e7e9ec;
        --main-border: #008080; /*#04d3bc; */
        --header-heading: #ffff;
        --header-text: #666769;
        --section-bkgd-1: #ffff;
        --section-bkgd-2: #e7e9ec;
        --section-bkgd-3: #d9d9d9;
        --footer-link: #008080;
        --footer-hover: #e7e9ec;
}


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

 a {
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
a:hover{
    background-color: var(--primary-grey);
    color: black;
}

.clearfix {
    overflow: auto;
}
html {
    font-size:100%  /*Use with other font-size declarations to make consistant across platforms   */
}

body,td,th {
	font-family: Quicksand, Avantgarde, 'URW Gothic L', sans-serif;/*Square Sans Text VF,Square Sans Text,"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",helvetica,arial,sans-serif;*/ /* Lora, serif; */ /*Verdana, Arial, Helvetica, sans-serif;*/
	font-size:80%; 
}

p {
    color: var(--text-color); font-size: 1.2em; font-style: Normal; margin: 0px; 
padding: 2px 0px 5px 0px; line-height: 1.5}

body{
    margin:0px; background-color:white; color: var(--text-color);
}

/*p+p {
text-indent: 1.5em;
}*/

h1 {
	font-size:2.0em;
 padding: 2px;
}

h2 {
	font-size:1.8em;
 padding: 2px;
}

h3 {
	font-size:1.5em;
 padding: 2px; 
}

h4, h5 {
font-size:1.2em;
margin: 0px;
padding: 2px 0px;
}

h1,h2,h3,h4,h5,h6 {
	font-family: Comfortaa, "Century Gothic", Avantgarde, "URW Gothic L", sans-serif;/*Square Sans Text VF,Square Sans Text,helvetica,arial,sans-serif; */ /* Lora, serif; */ /*Verdana, Arial, Helvetica, sans-serif;*/
    font-weight: bold;
    color: var(--heading-text);
}
h1[id] {  /* so that anchors to different sections are not hidden by the nav bar*/
    padding-top: 90px;
    margin-top: -90px;
}
ul {
    margin:0px 20px;
    font-size: 1.2em;
}
li{padding:2px;}

sup {
    font-size:70%
}

hr {
border-top: 1px solid var(--teal); 
border-bottom: 1px solid var(--teal);
} 

.NavBar {
  display: flex; 
overflow: hidden;
 justify-content: start;
  background-color: var(--nav-bkgd);
    align-items: center;
position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
/*border-bottom:.5px solid var(--nav-border); */

}

.logo1 {
flex: 1 1 10%;
}
.space {
flex:0 1 5%;
}
.nav {
flex: 2 1 75%;
}
.lang {
flex: 1 1 10%;
flex-wrap: nowrap;
}

.NavBar a {    
    display: block;
    color: var(--nav-links);
    text-align: center;
    padding: 20px 25px 12px 25px;  /*sets the size of the hover and spacing */
    text-decoration: none;
    font-size:14px;
    height: 60px;
}


/* Change the link color on hover */
.NavBar a:hover {
    background-color: var(--nav-hover);
    color: var(--nav-hover-text); 
    /*display:block;*/
    /*height: 50px; */

}
.NavBar a.active {
    background-color: #04AA6D;
    color: white;
}

.NavBar .icon {
    display: none;
}
.NavBar .logo-mobile {
    display: block;
    padding: 5px 5px;
}
.NavBar .logo-desktop {
    display: none;
    padding: 5px 5px;
}

.NavBar img {
    max-height:50px; 
}
/*.NavBar > div { 
background-color: #818589;
text-align: center;
align-content: stretch;
} */


.Main {  
    display: flex;
    flex-wrap: wrap;
/*flex-direction: row; */
/* border-bottom:1px solid var(--main-border); */
background-color: var(--primary-grey);

}

.Main>div {
/* background-color: var(--section-bkgd-1); */ /*var(--back-color-light); */
padding: 20px 80px;
margin: 10px;
/*border: 1px solid var(--main-border); */
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}
.side {
flex: 30%;
background-color: var(--section-bkgd-2);
padding: 10px;
/*border-radius: 30px 15px; */
}

.centre { 
background-color: var(--section-bkgd-1);
flex: 100%;
padding: 10px;
/*border-radius: 15px 50px; */
}

.centre img{
float:none;
width:80%;
/*min-width:150px; */
max-width: 600px;
height: auto;
}
.side img{
float:none;
width:100%;
/*min-width:150px; */
/*max-width: 300px; */  /*this was recently commented out to make store image bigger*/
height: auto;
}
.centerImg  {
padding:10px;
}
.centerImg img {
float:none;
max-height: 300px;
min-width: none;
}

.centerFlex {
display:flex;
 flex-flow: row wrap;
}

.centerFlex div{
flex: 50%;
padding: 0px 5px 10px 5px;
min-width:150px;
}

@media screen and (max-width: 1000px) {
   .Main {   
flex-direction: column;
align-items: stretch;
    }

}

@media screen and (max-width: 700px) {
    .Main>div {
padding: 20px 20px;
margin: 10px;
}
    .gallery {
          flex-direction: column;
          align-items: center;
        }

    .Footer {
padding: 30px 20px;
}
    .NavBar a {display:none;}
    .NavBar a.icon {
   /* float: left; */
    display: block;
    }
    .NavBar a.logo-mobile {
  /*  float: left; */
    display: block;
    position: absolute;
    right: 30%;
    top: 0px;
   /* padding: 0px 5px; */
    }
    .NavBar a.logo-desktop {display: none;}
}
@media screen and (max-width: 700px) {
    .NavBar.responsive {
        display: block;        
        position: relative;
position: -webkit-sticky; /* Safari */
    position: sticky;
    }
    .NavBar.responsive .icon{
    position: absolute;
  right: 0;
    top: 1px; 
    }
    .NavBar.responsive a {
    display: block;
    float: none;
    text-align: left;
    height: 50px;
    }
    .NavBar.responsive a.logo-mobile { display: none;
   /* position: absolute;
    right:50%;
    top:0px; */
    }
    .NavBar.responsive a.logo-desktop { display: none; }

    .centerFlex {
flex-direction: column;
    }
   .NavBar.responsive img {
    max-height:50px; 
    }
}


.Header {
 /*align-content: top;*/
justify-content: center;
text-align: center; 
height:250px;
padding: 50px;
background-color: var(--primary-grey);
background: url("../images/yarn header bckgrd.png") no-repeat !important;
/* background-size: auto; /* cover; */
/*background-attachment: fixed; */ 
background-position: center; 
/*background-size: 1400px; */
border-bottom: 1px solid var(--main-border);
border-top:.5px solid var(--main-border);
}

.Header h1 {
font-size:25pt;
color:var(--header-heading); /* var(--primary-grey); */ /*var(--secondary-dark); */
padding: 30px;
}

.Header h2 {
font-size:20pt;
color:var(--header-text);
padding: 20px;
}
.Header p { color:var(--header-heading);}

 .gallery {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        margin-top: 20px;
      }

      .gallery img {
        flex: 1 1 200px;
        max-width: 80%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

.caption {
font-size: small; 
text-align: center;
padding: 0px;
margin: 0px;
max-width: 500px;
}
.caption-full {
font-size: small; 
text-align: center;
padding: 0px;
margin: 0px;

}

.Footer {
/*height:80px; */
display: flex;
    flex-wrap: wrap;
margin:0px;
padding: 30px 80px;
/*width:100%; */
background-color: var(--back-color-light);
}

.footside {
flex: 50%;
padding: 10px;
}
.footcenter {
flex: 80%;
padding: 10px;
text-align: center;
}
.Footer p {
font-size:10pt;
/*text-align:center; */
}
.Footer img{
max-height: 120px;
}

.social img{
display:inline-block;
height: 40px;
width: 40px;
}

.Footer a:link, .Footer a:visited, .Footer a:active {
text-decoration:none;
color: var(--footer-link);
padding: 10px
}

.Footer a:hover {
text-decoration:none;
color: black;
background-color: var(--footer-hover);
}

.qrcode img{
float: right;
width: 60px;
height:60px;
min-width:50px;
padding:0px 0px 0px 10px;
}