/* @override 
	https://popcycle-local:8890/?*
	https://popcycle.ca/?css=popcycle_home/popcycle_styles.v.1764788757 */


:root {

    --font-size-base: 1em;
	--font-family-sans: "liberation-sans", sans-serif;
	--font-family-sans-italics: "liberation-sans", sans-serif;
	--font-family-sans-heading: "cooper-black-std", serif;
	


	
    --ratio: 1.618;
    /* Modular scale using Golden Ratio (1.618) */
    --font-size-xs: calc(var(--font-size-base) / var(--ratio) / var(--ratio));
    /* 0.382rem */
    --font-size-sm: calc(var(--font-size-base) / var(--ratio));
    /* 0.694rem */
    --font-size-md: var(--font-size-base);
    /* 1rem */
    --font-size-lg: calc(var(--font-size-base) * var(--ratio));
    /* 1.618rem */
    --font-size-xl: calc(var(--font-size-lg) * var(--ratio));
    /* 2.618rem */
    --font-size-2xl: calc(var(--font-size-xl) * var(--ratio));
    /* 4.236rem */
    --font-size-3xl: calc(var(--font-size-2xl) * var(--ratio));
    /* 6.854rem */
    --font-size-4xl: calc(var(--font-size-3xl) * var(--ratio));
    /* 11.089rem */

    /* Optional: Line heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-loose: 1.75;

    /* Optional: Font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
 
	--gap: 1em;

	--color1: #66bfbf;
	--color2: #eaf6f6;
	--color3: #fcfefe;
	--color4: #f76b8a;
	--color5: #6cc293;
	--color6: #347474;
	--color7: #35495e;
	--color8: #ff7e67;
	--white: #ffffff;
	--black: #000000;
	/*--bg_color1: #66bfbf;
	--bg_color2: #eaf6f6;
	--bg_color3: #fcfefe;
	--bg_color4: #f76b8a;
	--bg_color5: #42b883;
	--bg_color6: #347474;
	--bg_color7: #35495e;
	--bg_color8: #ff7e67;*/

}


body {
    font-family: var(--font-family-sans);
    line-height: var(--line-height-normal);
    padding: var(--gap);
	
	font-weight: 400;
	font-style: normal;
	color: var(--color7);
	display: grid;
	grid-template-columns: 1fr;
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
	
}

.parent {
    display: flex;
	flex-direction: column;
    gap: 18px;
	
	margin: 0;
	padding: 0;
	background-color: var(--white);
	
}

@media screen and (min-width : 48em) { 

	.parent {
	    display: grid;
	    grid-template-columns: repeat(6, 1fr);
	    grid-template-rows: repeat(5, auto);
	    gap: 18px;
		
		margin: var(--gap);
		padding: var(--gap);
		background-color: var(--white);
	}


}


@media screen and (min-width : 18em) { 
	.div1 {
	    grid-column: span 6 / span 6;
		margin: 0;
	    padding: var(--gap);
	}
	
	.div2 {
	    grid-column: span 3 / span 3;
	    grid-row-start: 2;
		margin: 0;
	    padding: var(--gap);
		border: 15px solid var(--color4);
	}
	
	.div3 {
	    grid-column: span 3 / span 3;
	    grid-column-start: 4;
	    grid-row-start: 2;
		margin: 0;
		padding: var(--gap);
		border: 15px solid var(--color5);
	}
	
	.div4 {
	    grid-column: span 6 / span 6;
	    grid-row-start: 3;
		margin: 0;
	    padding: var(--gap);
		background-color: var(--color2);
	}
	
	.div5 {
	    grid-column: span 3 / span 3;
	    grid-row-start: 4;
		margin: 0;
	    padding: var(--gap);
	}
	
	.div6 {
	    grid-column: span 3 / span 3;
	    grid-column-start: 4;
	    grid-row-start: 4;
		margin: 0;
	    padding: var(--gap);
	}
	
	.div7 {
	    grid-column: span 2 / span 2;
	    grid-column-start: 3;
	    grid-row-start: 5;
		margin: 0;
	    padding: var(--gap);
	}
}
.center {
    text-align: center;
}





img {
	width: 100%;
	height: auto;
}


img {
	width: 100%;
}

header,
footer,
nav,
article,
section {
    border: 1px solid #ccc;
    padding: 1rem;
    margin-bottom: 1rem;
}

h1,h2,h3,h4,h5,h6 {
	overflow: hidden;
	text-overflow: ellipsis;
}

h1 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
	font-family: var(--font-family-sans-heading);
	line-height: var(--line-height-normal);
	
	
}

h2 {
    font-size: var(--font-size-3xl);
	font-family: var(--font-family-sans-heading);
	line-height: var(--line-height-normal);
	margin-bottom: .5em;
	white-space: nowrap;

}

h3 {
    font-size: var(--font-size-2xl);
	font-family: var(--font-family-sans-heading);
	line-height: var(--line-height-tight);
	
	
}

h4 {
    font-size: var(--font-size-xl);
	font-family: var(--font-family-sans-heading);
	line-height: var(--line-height-tight);
	
}

h5 {
    font-size: var(--font-size-lg);
	font-family: var(--font-family-sans-heading);
	
	
}

h6 {
    font-size: var(--font-size-md);
	font-family: var(--font-family-sans);
	
	
}

p,
li,
td,
th,
caption {
    font-size: var(--font-size-md);
}

small {
    font-size: var(--font-size-sm);
}

code,
pre {
    font-family: var(--font-family-mono);
    background: #f4f4f4;
    padding: 0.5rem;
    display: block;
}

blockquote {
    border-left: 4px solid #ccc;
    padding-left: 1rem;
    font-style: italic;
}

.color1 {
color: var(--color1);
}

.color2 {
color: var(--color2);
}

.color3 {
color: var(--color3);
}

.color4 {
color: var(--color4);
}

.color5 {
color: var(--color5);
}

.color6 {
color: var(--color6);
}

.color7 {
color: var(--color7);
}

.color8 {
color: var(--color8);
}

.color1-bg {
background: var(--color1);
}

.color2-bg {
background: var(--color2);
}

.color3-bg {
background: var(--color3);
}

.color4-bg {
background: var(--color4);
}

.color5-bg {
background: var(--color5);
}

.color6-bg {
background: var(--color6);
}

.color7-bg {
background: var(--color7);
}

.color8-bg {
background: var(--color8);
}



.footer_logo img {
	height: 100px;
	width: auto;
}

    	


/* corners */
.corners--repeated-circles {
  -webkit-mask-image: radial-gradient(circle at 1.5rem 1.5rem, transparent 0, transparent 1rem, gold 0, gold 1.25rem, transparent 0, transparent 1.5rem, gold 0);
          mask-image: radial-gradient(circle at 1.5rem 1.5rem, transparent 0, transparent 1rem, gold 0, gold 1.25rem, transparent 0, transparent 1.5rem, gold 0);
  -webkit-mask-position: -1.5rem -1.5rem;
          mask-position: -1.5rem -1.5rem;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
}
/* end corners */


.close {
  /* background-color: #fff;	 */
  /*color: var(--color2);*/
  text-shadow:
    0 1px var(--color3),
    -1px 0 var(--color7),
    -1px 2px var(--color3),
    -2px 1px var(--color7),
    -2px 3px var(--color3),
    -3px 2px var(--color7),
    -3px 4px var(--color3),
    -4px 3px var(--color7),
    -4px 5px var(--color3),
    -5px 4px var(--color7),
    -5px 6px var(--color3),
    -6px 5px var(--color7),
    -6px 7px var(--color3),
    -7px 6px var(--color7),
    -7px 8px var(--color3),
    -8px 7px var(--color7);
}


.roses {
    
    color: var(--color4);
    background: transparent;
    text-shadow: 5px 5px 0px var(--white),
        10px 10px 0px var(--white),
        15px 15px 0px var(--white),
        20px 20px 0px var(--white),
        25px 25px 0px var(--white),
        30px 30px 0px var(--white);
}
/* Original Roses */
/* .roses {
		  font-size: 15rem;
	    text-align: center;
      height:90vh;
      line-height: 90vh;
	    color: #fcedd8;
	    background: #d52e3f;
	   	font-family: 'Niconne', cursive;
	    font-weight: 700;
      text-shadow: 5px 5px 0px #eb452b, 
                  10px 10px 0px #efa032, 
                  15px 15px 0px #46b59b, 
                  20px 20px 0px #017e7f, 
                  25px 25px 0px #052939, 
                  30px 30px 0px #c11a2b, 
                  35px 35px 0px #c11a2b, 
                  40px 40px 0px #c11a2b, 
                  45px 45px 0px #c11a2b;
} */


/* FLAVOUR SORTING FILTER */

.hidden {
    display: none;
}
.flavour_categories {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
}


/* a ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
} */

/* li,
input,
label {

    padding: 1em;
    margin: 1em;
} */

span {
    border: 1px dashed #eee;
}

/* END FLAVOUR SORTING FILTER */


/* Buttons */

button a {
	text-decoration: none;
	color: var(--color7);
}

/* Shadow */
.shadow {
  color: var(--color7);
  background: transparent;
  border: 1px solid var(--color7);
  box-shadow: var(--color7) .3em .3em 0;
  transition: box-shadow .2s ease-in-out;
  padding: calc(var(--gap)*.5);
  margin: calc(var(--gap)*1) 0 calc(var(--gap)*1);
}
.shadow:hover,
.shadow:focus {
  color: var(--color7);
  text-shadow: none;
  background: transparent;
  box-shadow: var(--color1) .2em .2em 0;
  cursor: pointer;
}
.shadow:active {
  color: var(--color7);
  box-shadow: var(--color7) 0 0 0;
}

.small {
  font-size: 10pt;
}
.large {
  font-size: 20pt;
}

/* END Buttons */



/* Flavours items list */

#item-list {
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	list-style: none;
	padding: 0;
}

#item-list img {
	width: 100%;
	max-width: 150px;
	height: auto;
	padding: calc(var(--gap)*.5);
	margin: calc(var(--gap)*.5);
}

#item-list li {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	/*flex-grow: 1;*/
	text-align: center;
	
}

/* END Flavours items list */