table {
    width: 50%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    margin-top: 20px;
	border-color: darkblue;
  }

  th, td {
    border: 1px solid #00000B;
    padding: 10px;
    
  }

  th {
    background-color: #170066;
    text-transform: uppercase;
    font-size: 14px;
	color: white;
  }

  tr {
    background-color: #0F0000;
  }

  tr, td {
    font-weight: bold;
    background-color: #FFFFFF;
    color: #000000;
  }


@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Lato&display=swap');

/*font-family: 'Goudy Bookletter 1911', 
serif;
font-family: 'Lato', sans-serif; */

header {width:100%; /*960 / 960*/ 
margin:auto;position: relative;}

nav {position: absolute; 
	bottom:20px;
right:41.67%; /* 400px / 960px */
}

nav li {display: inline-block;}

nav a {padding:5px 2.08%; /* 20px / 960px */
	text-decoration: none;color: #16325a;font-family: 'Goudy Bookletter 1911'}

nav a:hover {background-color: #16325a;
	color:#fff;}

#banner {background-image: url("images/home-banner.jpg"); 
	height:440px;}

#color-bar {background-color: #a32973;
color:#fff;text-align: center; padding: 10px 0;font-family: 'Goudy Bookletter 1911', 
serif;}

#wrapper-white {width:100%; /* 960 / 960 */ 
margin: 3.125% auto; /* 30px / 960px */
display:flex;}

section {width: 60.42%; /* 580px / 960px */
	padding: 0 1.04%;} /* 10px / 960px */

section h1 { font-size: 2.25em; /* 36 / 16 */ 
color: #a32973;
text-transform: uppercase;font-family: 'Goudy Bookletter 1911', 
serif;}

.shop-box h3,
.team h3{
	text-transform: uppercase;
	color: #a32973;
	font-family: 'Goudy Bookletter 1911', 
serif;
	text-align: center;
 font-size: 2.25em; /* 36 / 16 */
    margin: 0 0 2.92% 0; /* 28px / 960px */
}


section p {font-size: 1em; /* 16 / 16 */ 
	line-height: 1.5; margin-top: 1.56%; /* 15px / 960px */
	font-family: 'Lato', sans-serif;} 

aside {width: 31.25%; /* 300px / 960px */
	border: 3px solid #16325a; 
	 padding: 1.04% 1.04%; /* 10px / 960px */;}

aside h2 {text-align: center; margin: 1.04% 0; /* 10px / 960px */
	color:#a32973;font-size: 1.25em; /* 20 / 16 */
	font-family: 'Goudy Bookletter 1911', 
serif;}

.uppercase { text-transform: uppercase;}

aside img { display: block; margin: 0 auto;
	padding: 1.04%; /* 10px / 960px */}


#wrapper-shop {width: 100%; border:1px solid black; background-color: #f4f3f0;
	padding: 5.21% 0; /* 50px / 960px */}

#shop-content { width:100%; /* 960 / 960 */  
	margin: 0 auto; display: flex;}

.shop-box { width:31.25%; /* 300px / 960px */ 
	margin: 0 auto; text-align: center;}

#shop-content h3 {color: #a23973; text-transform: uppercase; 
	text-align: center; 
	 padding: 1.04%; /* 10px / 960px */
    font-size: 1.75em; /* 28 / 16 */
	font-family: 'Goudy Bookletter 1911', 
serif;}

#shop-content p {line-height: 1.5; 
	   font-size: 0.875em; /* 14 / 16 */
    margin: 1.04% 0 2.08% 0; /* 10px / 960px and 20px / 960px */
	font-family: 'Lato', sans-serif; }

.shop-box a {text-decoration: none; text-align: center; background-color: #a32973;
	color: #fff; 
	font-size: 0.875em; /* 14 / 16 */
    padding: 0.52%; /* 5px / 960px */ }

footer { background-color: #16325a; 
	color:#fff;
	 padding: 2.08% 0; /* 20px / 960px */}

#footer-content {width: 100%; /* 960 / 960 */  
	margin: 0 auto; display: flex;} 

#footer-left {width: 40%;}

#footer-right {width: 40%; 
	margin-left: 31.25%; /* 300px / 960px */
	text-align: right;}

#footer-content h3 {color: white; text-transform: uppercase; 
  	font-size: 1em; /* 16 / 16 */
    margin-bottom: 0.52%; /* 5px / 960px */
	font-family: 'Goudy Bookletter 1911', 
serif;}

#footer-content p{ line-height: 1.5;font-family: 'Lato', sans-serif;}

.team {width: 20.83%; /* 200px /960px */
	text-align: center;
	display: inline-block;}


aside hr {
    width: 90%;
     margin: 2.08% auto; /* 20px / 960px */
    border-top: 1px solid #16325a;
}

.team:first-of-type {
    margin-right: 2.60%; /* 25px / 960px */
}
.team:nth-of-type(2),
.team:nth-of-type(3){
     margin-left: 2.50%; /* 24px / 960px */
    margin-right: 2.50%; /* 24px / 960px */
}
.team:last-of-type {
      margin-left: 2.60%; /* 25px / 960px */
}

#wrapper-shop h1 {text-align: center;font-family: "Goudy Bookletter 1911", serif;
  text-transform: uppercase;
  font-size: 1.875em; /* 30 / 16 */ 
  color: #a32973;
  font-weight: bold;
  padding: 20px 0 0 0;}


/*Slideshow*/

#slideshow-wrapper {
	width: 100%;
	height: 441px;
}

#slideshow {
	Width: 100%;
	height: 441px;
	overflow: hidden;
	white-space: nowrap;
}

#slideshow img {
	width: 100%;
	height: 100%;
	display: inline-block;
}

.circle {
	display: inline-block;
	background-color: lightgrey;
	width: 1.25%; /* 12 / 960 */ 
	height: 12px;
	border-radius: 50%;
	margin-right: 15px;
}

#circle-nav {
	margin-top: -50px;
	text-align: center;
}

@media only screen and (max-width: 1024px) { 

   /* Center the logo image above the navigation */
    header {
        text-align: center;
    }
    
    /* Center the navigation on the page */
    nav{
		position: static;
        text-align: center;
    }

    nav li {
        display:inline; 
        margin-bottom: 10px;
    }
	
	   
    #banner {
		height: 300px; }
	
	.circle {
     	width: 9px;  /* Set width to 9px */
        height: 9px; /* Set height to 9px */
    }
	
	#color-bar {
		font-size: 0.875em;
	}
	
	section h1 {
		font-size:  1.75em;
		padding-left: 100px;
		padding-right: 50px;
	}
	section p{
		padding-left: 100px;
		padding-right: 50px;
	}
	
  #shop-content {
        display: flex;
        flex-direction: column; 
        align-items: center; 
    }
	
	
	.shop-box {
        width: 100%; /* Ensure each box takes full width */
        margin-bottom: 20px; /* Add space between the stacked items */
    }
   aside {
        width: 30%;
        margin-bottom: 60px; /* Add space below */
    }
		
@media only all and (max-width: 480px) { 

	header {
        text-align: center;
    }
	
	
    nav{
		position: static;
        text-align: center;
    }

    nav li {
        display:block; 
        margin-bottom: 10px;
    }
	
	   
    #banner {
		height: 200px; }
	
	.circle {
     	width: 9px;  /* Set width to 9px */
        height: 9px; /* Set height to 9px */
    }
	
	#color-bar {
		font-size: 0.875em;
	}
	
	section h1 {
		font-size:  1.75em;
		padding-left: 10px;
		padding-right: 10px;
	}
	section p{
		padding-left: 10px;
		padding-right: 10px;
	}
	
  #shop-content {
        display: flex;
        flex-direction: column; 
        align-items: center; 
    }
	
   aside {
        width: 25%;
        margin-bottom: 10px; 
    }
	
	table {
		background-color:darkblue;
		width: 1000px;
		
	}
	 footer {
        display: block; /* Set display to block to stack footer items */
        text-align: center; /* Center text */
        padding: 20px 0; /* Add padding */
    }