@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&family=Grenze+Gotisch:wght@500&family=Staatliches&display=swap');
@import "compass/css3";


*	{
margin: 0;
padding: 0;
list-style-type: none;
}



ul, li {
  list-style-type: none;

}

.navi-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.navi-list li:not(.centered-logo) {
  flex: 1 0 auto;
  /*text-align: center;*/
}

.logo {
	width: 50%;
}

.reg-nav {
    
border-bottom: 2px solid slategray;
border-top: 2px solid slategray;
/*outline: 1px solid black;
outline-offset: -1px;*/
padding-top: 4px;
padding-bottom: 4px;
padding-right: 20px;
padding-left: 20px;
margin:10px;
}


.uneven-nav1 {
    
border-bottom: 2px solid slategray;
border-top: 2px solid slategray;
/*outline: 1px solid black;
outline-offset: -1px;*/
padding-top: 4px;
padding-bottom: 4px;
padding-right: 20px;
padding-left: 20px;
margin-left:100px;
margin-right:-50px;
}

.uneven-nav2 {
    
border-bottom: 2px solid slategray;
border-top: 2px solid slategray;
/*outline: 1px solid black;
outline-offset: -1px;*/
padding-top: 4px;
padding-bottom: 4px;
padding-right: 20px;
padding-left: 20px;
margin-left:-125px;
margin-right:-50px;
}



/*.current-page {
		font-family: Bebas Neue; color: #201B51; font-size: 15pt;
		text-decoration: underline;
	}

/*general styles*/

/*body {
	 display:flex;
  height:100vh;
  align-items:center;
  justify-content: center;
}*/

#wrapper { /*background-image:url("../images/edibowls background.png");*/ background-color: lightblue; /*border-top:100px solid white;*/ margin:0 auto; /*will center the wrapper*/ /*text-align:left;*/}

header {height:160px; background-color: white;/*width: 100%;*//*background-color:transparent;*/}

/*


*/


a {/*padding:10px;*/font-family: 'Staatliches', cursive}
a:link {text-decoration:none; text-align:center; background-color:transparent; color:#083578;}
a:visited {text-decoration:none; color:#083578;}
a:hover {color:#fddd19; background-color:#0964b6;}/*Alt colors: text:#ffff00 dividers:#ffff82, OG color:#868FDA*/
a:active {color:white; background-color:#bd1616;} /*OG color:#6CCCDF, Alt color:#250076*/

#current-page { font-family: 'Staatliches', cursive; color:white; background-color:#bd1616;}


h1 {font-family: 'Staatliches', cursive; text-align: center; color:#083578; }
h2 {font-family: 'Grenze Gotisch', cursive; color:#0964b6; }
h3 {font-family: 'Staatliches', cursive; font-size: 15pt; color: #ed91a3; text-align: center; letter-spacing: 2px; margin-top: 10px;}
h4 {font-family: 'Grenze Gotisch', cursive; font-size: 16pt; text-align: center; color:#ed91a3; letter-spacing: 2px; margin-top: 7px;}
h5 { font-family: 'Staatliches', cursive; text-align: center; font-size: 35pt; color:#083578; margin-top: 4%; letter-spacing: 1pt; 
line-height: 35pt; float: left;}
h6 {font-family: 'Staatliches', cursive; font-size: 15pt; color: #ed91a3;  letter-spacing: 1px; margin: 2.5%;}

p {font-family: 'Crimson Text', serif; font-size: 10pt; color: #083578; font-weight: bold;}


#inline-filigree-span {height:100px; background-color: transparent; }

#inline-filigree-container { width:68%; height:100px; background-color: white; margin:0 auto;}

.top-decal-centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
}


#hero-image-container { width:68%; height: 600px; background-color: white; margin:0 auto;}


.hero-image {
	display: block;
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid;
  border-color: #2577bd;
  padding: 20px;
  padding-left:35px;
  padding-right:35px;

}

#content1 { height:180px; background-color: white; padding-bottom: 10px; border-bottom:1px solid; border-color: #2577bd; margin:0 auto;}











#content2 { height:550px; display: flex; background-color: white; margin:0 auto; padding-bottom: 10px;}


#olsons-pictures-container {
	width: 60%;
	height: 98%;
	border-right: 5px dotted;
	border-color: #c72f3f;
	background-color: transparent;
	
	margin-right: 1%;
	padding-right: 1%;
	
}


section {
	float: left;
}

article {
	float: right;
}

	section.olsons-picture-box-one {
		width: 33.3%;
		height: 50%;
		
	}

	section.olsons-picture-box-two {
		width: 33.3%;
		height: 50%;
		
	}

	section.olsons-picture-box-three {
		width: 33.3%;
		height: 50%;
		
	}

	section.olsons-picture-box-four {
		width: 33.3%;
		height: 50%;
		
	}

	section.olsons-picture-box-five {
		width: 33.3%;
		height: 50%;
		
	}

	section.olsons-picture-box-six {
		width: 33.3%;
		height: 50%;
		
	}

		article.ribbon-container {
		width: 97%;
		height: 25%;
	}

.olsons-picture {
	width: 80%;
	height: 72.5%;
	display: block;
  margin-right: 14px;
  float: right;

}



.ribbon {
  height: 50px;
  border: 2px solid;
  border-color: #083578;
  border-left: 0;
  border-radius:0 5px 5px 0;
  position:relative;
  overflow:hidden;
  z-index:0;
  margin-top: 15px;
  margin-right: 10px;
}
.ribbon:before,
.ribbon:after{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  height:50%;
  border-left:3px solid;
  border-color: #083578;
  background-color: #083578;
}
.ribbon:before {
  top:0;
  transform:skew(45deg);
  transform-origin:top;
}
.ribbon:after {
  bottom:0;
  transform:skew(-45deg);
  transform-origin:bottom;
}



#hompage-statement {
	width: 30%;
	height: 98%;
	display: flex;

	
}

.homepage-statement-h1 {
	margin-top: 2%; margin-bottom: 2%;
}


#skinny-column {
border-left: 5px dotted;
border-color: #c72f3f;
width: 10%;
height: 98%;

}

.flags {
	width: 175%; height: 100%; background-color: floralwhite; padding-top: 8%;  padding-bottom: 8%
}


#peppermintbar { height:15px; background-color: white; border-top:1px solid slategray; border-left:1px solid white; margin:0 auto; }

	section {float:left;}

	section.peppermintred {width:1.052%; height:100%;}

	section.peppermintwhite {width:1.052%; height:100%;}

		.peppermintred { background-color: #c72f3f;}

		.peppermintwhite { background-color:white;}







/*///MENU CONTENT ////*/ 

#content1long { width:68%; height:1000px; background-color: white; margin:0 auto;}

.menu-label-container { width:100%; height: 8%; background-color: white; padding-top: 1%; margin:0 auto;}

#menu-container {

	width: 80%; height:80%;  
	margin-left: auto;
  margin-right: auto;
  border: 2px solid;
  border-color: #2577bd;
  padding: 20px;
  padding-left:35px;
  padding-right:35px;
}


.menu-h2 {text-decoration: underline; font-size: 14pt; display: inline;}

.red-dot-h2 {color: #c72f3f;  font-size: 18pt; letter-spacing: 2pt; display: inline; }

.prices-h2 { color: #083578; font-size: 15pt; display: inline;}



section.menu-half-1 {
	width:50%;
	height:100%;
	background: white;
	float: left;
}



section.menu-half-2 {
	width:50%;
	height:100%;
	background: white;
}


article.menu-item { margin: 2%; }





#peppermintbarshort { width:68%; height:15px; background-color: white; border-top:1px solid slategray; padding-left:1px; margin:0 auto; }

	section {float:left;}

	section.peppermintred2 {width:1.4925%; height:100%;}

	section.peppermintwhite2 {width:1.4925%; height:100%;}

		.peppermintred2 { background-color: #c72f3f;}

		.peppermintwhite2 { background-color:white;}*/





/*// SCANDI-CANDY CONTENT //*/


#sweets-container {

	width: 80%; height:80%;  
	margin-left: auto;
  margin-right: auto;
  border: 2px solid;
  border-color: #2577bd;
  padding: 20px;
  padding-left:35px;
  padding-right:35px;
}


.candy {
	width: 100%;
	

}


#candy-drawer {
	width: 23.95%;
	height: 23%;
	border: 5px outset white;
	position:relative;
	text-align: center;
	float:left;

}


.centered {
  position: absolute;
  height:15%;
  width:65%;
  background-color:#083578;
  border: 5px dotted; 
  border-color: #0964b6;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


h4.candy-h4 {
	font-size: 40pt;
}





/*// ABOUT CONTENT //*/

.menu-label-container { width:100%; height: 8%; background-color: white; padding-top: 1%; margin:0 auto;}

#menu-container {

	width: 80%; height:80%;  
	margin-left: auto;
  margin-right: auto;
  border: 2px solid;
  border-color: #2577bd;
  padding: 20px;
  padding-left:35px;
  padding-right:35px;
}

section.about-header {
	width:100%; margin:0 auto;
}


h4.about-us {
	font-size: 65pt; float: left;
}

.about-floral-1 {
	width:38%;
	float:left;
}

.about-floral-2 {
	width:20%;
	padding-right: -5px;
}

p.about-text-body {
	text-align: right; padding: 20px;
}


.about-floral-3-left {
	width: 25%; 
	float: left;
	padding-left: 7%;
	padding-top: 7%;

}

.about-floral-3-right {
	width: 25%;
	padding-top: 7%;
}

.olsons-facade {
	text-align: center; width: 36%; border: 3px ridge lightblue; float: left; 

}




/*************  VISIT US CONTENT  ******************/


#top-deck-span {height: 688px; background-color: transparent; }

#top-deck-container { width:68%; height: 688px; background-color: white; margin:0 auto;}



#visit-us-container {

	width: 85%; height:95%;  
	margin-left: auto;
  margin-right: auto;
 border: 2px solid;
  border-color: #2577bd;
  padding-top: 20px;
  
  
}

section.visit-us-header {
	width:100%; height: 18%; background-color: white; margin:0 auto; 
}


.visit-us-floral-left {
	width: 15%;
	height: 80%;
	float: left;
	margin-left: 24%;
	margin-right: 2.5%;
}

.visit-us-floral-right {
	width: 15%;
	height: 80%;
	margin-left: 2.5%;
	
}


section.visit-us-top-container {
	width:100%; height: 82%; background-color: white; margin:0 auto;  
}

.gnome-trumpet {
	width: 35%; height: 40%; margin-left: 10%; float: left; background-color: white;
}


article.visit-us-hours { width: 45%; height: 30%; background-color: white; margin-left: 5%; margin-right: 5%; }

h2.visit-us-h2 { font-size: 26pt; text-align: center; text-decoration: underline; margin-bottom: 5%;}

h1.visit-us-info { font-size: 15pt; letter-spacing: 1pt; line-height: 125%}

h4.visit-us-contact { font-size: 20pt; margin-top: 15%; text }

article.visit-us-location { width: 90%; height: 20%; background-color: white; padding-top: 4%; margin-left: 10%; display: inline-block; float: left;}
 
h2.visit-us-mid-city { margin-top: 5%; font-size: 13pt; text-align: center;}


#visit-us-location-left { float: left; margin-right: 15%; margin-left: }

.olsons-facade2 {
	 width: 30%; border: 5px ridge lightblue; display: inline-block;  margin-top: -6%;

}




.flags-string {
text-align: center;
	width: 68%;
	height:175%;
	margin-right: auto;
	margin-left: auto;
	margin-top: -75px;


}


#holidays {
	width: 40%;
	height: 98%;
	

	
}


.homepage-statement-h1 {
	margin-top: 2%; margin-bottom: 2%; 
}


.jul { display: flex; }

.ornament {
	width: 14%; float:left;
}

.ornament-last
{
	width: 14%; float:left; margin-right: 2%;

}

 article.midsommar-info {
 	float: left; margin-top: 10px; 
 }

 .flower-crown {
 	width: 40%; margin-top: 5%; margin-left: 1%;
 }







/***************************GIFT SHOP*****************************/


#content2long { width:68%; height:700px; background-color: white; margin:0 auto;}

.shop-label-container { width:100%; height: 12%; background-color: white; padding-top: 1%; margin:0 auto;}

#shoppe-container {

	width: 80%; height:70%;  
	margin-left: auto;
  margin-right: auto;
  border: 2px solid;
  border-color: #2577bd;
  padding: 20px;
  padding-left:35px;
  padding-right:35px;

}



#gift-shop-container {
	width: 100%;
	height: 100%;
	background-color: white;
	
	margin-right: 1%;
	padding-right: 1%;
	
}


section {
	float: left;
}

article {
	float: right;
}

	section.olsons-picture-box-one {
		width: 33.3%;
		height: 50%;
		
	}

	section.olsons-picture-box-two {
		width: 33.3%;
		height: 50%;
		
	}

	section.olsons-picture-box-three {
		width: 33.3%;
		height: 50%;
		
	}

	section.olsons-picture-box-four {
		width: 33.3%;
		height: 50%;
		
	}

	section.olsons-picture-box-five {
		width: 33.3%;
		height: 50%;
		
	}

	section.olsons-picture-box-six {
		width: 33.3%;
		height: 50%;
		
	}

		article.ribbon-container {
		width: 97%;
		height: 25%;
	}

.olsons-picture {
	width: 80%;
	height: 72.5%;
	display: block;
  margin-right: 14px;
  float: right;

}



.ribbon {
  height: 50px;
  border: 2px solid;
  border-color: #083578;
  border-left: 0;
  border-radius:0 5px 5px 0;
  position:relative;
  overflow:hidden;
  z-index:0;
  margin-top: 15px;
  margin-right: 10px;
}
.ribbon:before,
.ribbon:after{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  height:50%;
  border-left:3px solid;
  border-color: #083578;
  background-color: #083578;
}
.ribbon:before {
  top:0;
  transform:skew(45deg);
  transform-origin:top;
}
.ribbon:after {
  bottom:0;
  transform:skew(-45deg);
  transform-origin:bottom;
}

















/*///BOTTOM SHARED CONTENT ////*/ 



#content3 {height:150px; background-color: transparent; margin:0 auto;}

footer {height:300px;  background-color: black; }

#top-footer-buffer {height:8%; background-color: black; border-top: 3px ridge white;  }

#footer-embellishments {height:17%; background-color: black; margin:0 auto; }


.footer-decal-centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 18%;
  
}



#main-footer-body {
height:100%; 
display: flex; 
background-color: black; 
margin:0 auto; 
padding-bottom: 10px;	
}


#left-footer-container {
	width: 38%;
	height: 100%;
	background-color: black;
	display: flex;
	flex-direction: column;
	
	/*margin-right: 1%;
	padding-right: 1%;*/
}

.hours {
width:75%;
height:40%;
background-color: black;

}


h3.footer-h3 {
	font-size: 18pt; color: white; letter-spacing: normal; text-align: left; margin-left: 20%;
}

h3.footer-h3-subhead {
	font-size: 12pt; color: white; text-align: left; margin-left: 15%; display: inline-block;
}





section.location {
	width:100%;
	height:60%;
	background-color: black;
	/*display:flex;

flex-direction:row;*/

}


article.street-address {

width:40%;
height:100%;
background-color: black;
/*display: inline-block;*/
float: left;

}

article.map {

width:60%;
height:100%;
background-color: black;
/*display: inline-block;*/
}


#middle-footer-container {

	width:24%;
	height:100%;
	background-color: black;
	display: flex;
	flex-direction: column;
}

.mid-footer-buffer {
	width:100%;
	height:64%;
	background-color: black;
}

.social-media {
	width:100%;
	height:36%;
	background-color: black;

}

.social-media-bar {
	width:55%;
	margin-top: 5%;
	 margin-left: 22%
  	
}


#right-footer-container {

	width: 38%;
	height:100%;
	background-color: black;
	display: flex;
	flex-direction: column;
}



.contact {
width:100%;
height:45%;
background-color: black;
text-align: right;

}


h3.footer-h3-subhead2 {
	font-size: 13pt; color: white; text-align: left; margin-left: 60%; line-height: 30pt; 
	/*display: inline-block;*/
}



section.right-footer-bottom {
	width:100%;
	height:55%;
	background-color: black;
	/*display:flex;

flex-direction:row;*/

}


article.right-footer-buffer {

width:75%;
height:100%;
background-color: black;
/*display: inline-block;*/
float: left;

}

article.copyright {

width:25%;
height:100%;
background-color: black;
/*display: inline-block;*/
}

p.copyright-text {
	font-family:'Grenze Gotisch', cursive; font-size: 9pt; color: white; text-align: right; margin-top: 15%; margin-right: 5%;
}

 




/*********************************************MOBILE*****************************************************************/


@media screen and (max-width: 479;) {


*	{
margin: 0;
padding: 0;
list-style-type: none;
}



 nav ul, li {
  list-style-type: none;

}


button#hamburger-button {
	position: fixed;
	z-index: 1;
	font-size: 4em;
	line-height: 1em;
	padding: 0.1em 0.2em 0.2em 0.2em;
	margin: 0.2em;


}


button#hamburger-button:hover {
	color:#fddd19;
	background-color:#0964b6;
}



	nav {
		position: fixed;
		top: 0;
		font-size: 3em;
		padding: 20vh 5vw 0 5vw;
		background-color: white;
			left: -35vw;
			transition: transform 1s;

	} 

	.slide-the-drawer {
		transform: translateX(35vw);
	}

	nav ul li a {
		text-decoration: none;
		color: #083578;
	}

		nav ul li a:hover {
			text-decoration: none;
			color:#fddd19;
			background-color:#0964b6;

		}

		nav ul li a:active {
			text-decoration: none;
			color:white;
			background-color:#bd1616;

		}

.navi {display:none;}
.navi-list {display:none;}
.reg-nav {display:none;}
.uneven-nav1 {display:none;}
.uneven-nav2 {display:none;}

.logo {
	width: 50%;
	margin:0 auto;
}

header {height:50px; background-color: white; /*width: 100%;*//*background-color:transparent;*/}



a {/*padding:10px;*/font-family: 'Staatliches', cursive}
a:link {text-decoration:none; text-align:center; background-color:transparent; color:#083578;}
a:visited {text-decoration:none; color:#083578;}
a:hover {color:#fddd19; background-color:#0964b6;}/*Alt colors: text:#ffff00 dividers:#ffff82, OG color:#868FDA*/
a:active {color:white; background-color:#bd1616;} /*OG color:#6CCCDF, Alt color:#250076*/

#current-page { font-family: 'Staatliches', cursive; color:white; background-color:#bd1616;}


h1 {font-family: 'Staatliches', cursive; text-align: center; color:#083578; }
h2 {font-family: 'Grenze Gotisch', cursive; color:#0964b6; }
h3 {font-family: 'Staatliches', cursive; font-size: 15pt; color: #ed91a3; text-align: center; letter-spacing: 2px; margin-top: 10px;}
h4 {font-family: 'Grenze Gotisch', cursive; font-size: 16pt; text-align: center; color:#ed91a3; letter-spacing: 2px; margin-top: 7px;}
h5 { font-family: 'Staatliches', cursive; text-align: center; font-size: 35pt; color:#083578; margin-top: 4%; letter-spacing: 1pt; 
line-height: 35pt; float: left;}
h6 {font-family: 'Staatliches', cursive; font-size: 15pt; color: #ed91a3;  letter-spacing: 1px; margin: 2.5%;}

p {font-family: 'Crimson Text', serif; font-size: 10pt; color: #083578; font-weight: bold;}


#inline-filigree-span {height:100px; background-color: transparent; }

#inline-filigree-container { width:68%; height:100px; background-color: white; margin:0 auto;}

.top-decal-centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}


#hero-image-container { width:68%; height: 400px; background-color: white; margin:0 auto;}


.hero-image {
	display: block;
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid;
  border-color: #2577bd;
  padding: 20px;
  padding-left:35px;
  padding-right:35px;

}

#content1 { height:180px; background-color: white; padding-bottom: 10px; border-bottom:1px solid; border-color: #2577bd; margin:0 auto;}











#content2 { height:550px; display: flex; background-color: white; margin:0 auto; padding-bottom: 10px;}


#olsons-pictures-container {
	width: 60%;
	height: 98%;
	border-right: 5px dotted;
	border-color: #c72f3f;
	background-color: transparent;
	
	margin-right: 1%;
	padding-right: 1%;
	
}


section {
	float: left;
}

article {
	float: right;
}

	section.olsons-picture-box-one {
		width: 33.3%;
		height: 50%;
		
	}

	section.olsons-picture-box-two {
		width: 33.3%;
		height: 50%;
		
	}

	section.olsons-picture-box-three {
		width: 33.3%;
		height: 50%;
		
	}

	section.olsons-picture-box-four {
		width: 33.3%;
		height: 50%;
		
	}

	section.olsons-picture-box-five {
		width: 33.3%;
		height: 50%;
		
	}

	section.olsons-picture-box-six {
		width: 33.3%;
		height: 50%;
		
	}

		article.ribbon-container {
		width: 97%;
		height: 25%;
	}

.olsons-picture {
	width: 80%;
	height: 72.5%;
	display: block;
  margin-right: 14px;
  float: right;

}



.ribbon {
  height: 50px;
  border: 2px solid;
  border-color: #083578;
  border-left: 0;
  border-radius:0 5px 5px 0;
  position:relative;
  overflow:hidden;
  z-index:0;
  margin-top: 15px;
  margin-right: 10px;
}
.ribbon:before,
.ribbon:after{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  height:50%;
  border-left:3px solid;
  border-color: #083578;
  background-color: #083578;
}
.ribbon:before {
  top:0;
  transform:skew(45deg);
  transform-origin:top;
}
.ribbon:after {
  bottom:0;
  transform:skew(-45deg);
  transform-origin:bottom;
}



#hompage-statement {
	width: 30%;
	height: 98%;
	display: flex;

	
}

.homepage-statement-h1 {
	margin-top: 2%; margin-bottom: 2%;
}


#skinny-column {
border-left: 5px dotted;
border-color: #c72f3f;
width: 10%;
height: 98%;

}

.flags {
	width: 175%; height: 100%; background-color: floralwhite; padding-top: 8%;  padding-bottom: 8%
}


#peppermintbar { height:15px; background-color: white; border-top:1px solid slategray; border-left:1px solid white; margin:0 auto; }

	section {float:left;}

	section.peppermintred {width:1.052%; height:100%;}

	section.peppermintwhite {width:1.052%; height:100%;}

		.peppermintred { background-color: #c72f3f;}

		.peppermintwhite { background-color:white;}



















}