@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%;}
#header-content{width: 80%;margin: 0 auto; position:relative;} /*960px = 80%*/
nav {width: 36.45833333%; position: absolute; bottom: 20px; right: 17.14285714%;font-family:'Goudy Bookletter 1911', serif;} /*60px/350px*/ /* 350/960*100*/
nav li {display: inline-block; padding: 10px 5.714285714%;} /*20px/350px *100*/
nav a:hover { background-color: darkblue; color: white; padding: 10px 5.714285714%;}
nav a {text-decoration: none;}
#banner {background-image: url("images/home-banner.jpg");height: 440px;width:100%;}
#wrapper-white { width: 80%; margin:20px auto; display: flex} /*960px = 80%*/
#color-bar {background-color: #A32973;}
#color-bar h3 {font-size: 1em; padding: 10px 0; text-align: center; color: white;font-family: 'Goudy Bookletter 1911', serif;} 
section {width: 60.41666667%;}/*580px/960px*100*/
section h1 {font-size: 2.25em; color:#A32973; text-transform:uppercase;padding:20px 0px;font-family: 'Goudy Bookletter 1911', serif;} /* 36px/ 16*/
section p {font-size: 1em;line-height: 1.5; margin:10px 0.5208333333%;font-family: 'Lato', sans-serif;}/* 16px/16*/ /*5/960px*100*/
aside, section {display: inline-block;}
aside {border: 3px solid #16325A; width:31.25%;margin-left: 4.166666667%; position: relative;} /*300px/960px*100*/ /*40px/960px*100*/
aside h2 {color:#A32973;text-align: center;margin: 20px 6.666666667%; font-size:1.5625em;font-family: 'Goudy Bookletter 1911', serif;} /* 25px/ 16*//*20/300px*100*/
aside p {margin: 0 auto; display: block; text-align: center; padding: 5px 1.666666667%;} /*5/300px*100*/
aside img { display: block; margin:0 auto;}
.uppercase{ text-transform: uppercase;}
/*Column Start Below*/

#wrapper-shop {width:100%; margin:0px auto;background-color: #F4F3F0; padding:10px 0;} 
#shop-content {width:80%; margin: 0 auto; display:flex; text-align: center;color: #A32973; padding: 5px 0;} /*960px = 80%*/
#wrapper-shop h1 { text-transform: uppercase; color: #A32973;font-family:'Goudy Bookletter 1911', serif; text-align: center; font-size: 2em; margin:0px 0 28;} /* 32px/ 16*/
#shop-content h3 { font-size: 1.75em; text-transform: uppercase;font-family: 'Goudy Bookletter 1911', serif; } /* 28px/ 16*/
#shop-content p {font-size: 0.875em; margin-bottom: 10px;line-height: 1.5;font-family: 'Lato', sans-serif;} /*14px/16*/
#shop-content a { text-decoration: none; color:white;background-color: #a32973; padding:5px 0.5208333333%;} /*5/960px*100*/

.shop-box { display: inline; width:31.25%;text-align: center; margin: 50px 1.66666666%;}
.shop-box p { margin: 10px 0px 30px 0px; line-height: 1.5; font-family: 'Lato', sans-serif; font-size: 0.875em;} /*14px/ 16*/

.team {width:20.83333333%; display: inline-block;margin-left: 1.5625%; opacity: .7; transition: opacity 2s;} /*15/960px*100*/
.team:hover { opacity: 1}
.team:first-of-type {margin-right: 2.604166667%;} /*25/960px*100*/
.team:nth-of-type(2), .team:nth-of-type(3){margin-left: 2.5%; margin-right: 2.5%;} /*24/960px*100*/
.team:last-of-type {margin-left: 2.604166667%;} /*25/960px*100*/


/*Slideshow Begins below*/

#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: lightgray; width: 1.171875%; height: 12px; border-radius: 50%; margin-right: 1.46484375%;} /*12px/1024px*100 */ /*15px/1024px*100 */ 
#circle-nav{ margin-top: -50px; text-align: center;}




/*Footer Starts below*/
footer{width:100%; background-color:#16325A; color:white;padding: 20px 0;}
#footer-content{width:80%; margin:0 auto; display:flex; justify-content: space-between;} /* 960px = 80%*/
footer h3{color: white; font-size: 1em;text-transform: uppercase;font-family: 'Goudy Bookletter 1911', serif;} /*16px/ 16*/
footer p {color: white; font-size: 1em; opacity: 70%; line-height: 1.5;font-family: 'Lato', sans-serif;} /*16px/16*/
#footer-left{}
#footer-right{text-align:right;}


/* Transition Effects*/

aside .book-details {opacity: 1;}
aside .book-details:hover{ opacity: 0; transition: linear 1s;}
.mask {width:109.3333333%; height:334px; position: absolute; top: 0; left: 0; text-align: center; background-color: #a32973; opacity:0; transition: linear 2s;} /*328px/300px *100*/
.mask:hover{ opacity: 1; }

.mask:hover h2 {font-size: 2em; color:white;} /*32px/ 16*/
.mask:hover p {font-size: 1.25em; color: white; margin-bottom: 40px;} /*20px /16*/
.mask:hover .learn {background-color: #16235A; color: white; font-family: 'Lato', sans-serif; text-transform: uppercase; text-align: center; text-decoration: none; padding: 16px 11.3333333%;font-size: 1.25em; opacity: 1;} /* 34px/300px*100 */ /* 20px / 16px */


/*CSS for the Order Summary Table Below*/

#wrapper-shop {width:100%; margin: 0 auto; padding: 20px;}
#shop-content { display:block;}

.rightalign{text-align: right; font-weight: normal;}
table {
	border-collapse:separate;
	width:400px;
	margin: 20px auto;
	background-color: #fff;
}
 
table tr th,
table tr td {
  	border-right: 2px solid #16325a;
  	border-bottom: 2px solid #16325a;
	font-size: 1em; /* 16px / 16 px */
	color: #000;
	font-family: 'Lato', sans-serif;
	text-align:center;
  	padding: 10px;
}
table tr th:first-child,
table tr td:first-child {
  	border-left: 2px solid #16325a;
}
table tr th {
  	background: #16325a;
  	border-top: 1px solid #16325a;
  	text-align: left;
}
 
/* top-left border-radius */
table tr:first-child th:first-child {
  	border-top-left-radius: 10px;
}
 
/* top-right border-radius */
table tr:first-child th:last-child {
  	border-top-right-radius: 10px;
}
 
/* bottom-left border-radius */
table tr:last-child td:first-child {
  	border-bottom-left-radius: 10px;
}
 
/* bottom-right border-radius */
table tr:last-child td:last-child {
  	border-bottom-right-radius: 10px;
}
 
table tr th {
	background-color:#16325a;
	font-weight: bold;
	color: #fff;
}
@media only screen and (max-width: 1024px) {
	
	
	#header-content { width: 100%; text-align: center;}
	#header-content img { height: 100px;}
	nav {position: relative; width: 80%; display: inline-block; margin: 10px auto; bottom: 0px; right: 0px;}
	banner { height: 200px;}
	#banner img { height: 200px;}
	#color-bar h3 {font-size: 0.875em; padding: 5px 0;} /*14px / 16px*/
	#wrapper-white { margin: 10px auto;}
	section {width: 70%;}/*580px/960px*100*/
	section h1 {font-size: 1.625em;} /* 26px/ 16*/
	section p {font-size: 0.75em;}/* 12px/16*/
	aside {width:30%;height: 250px; margin: 10px 0px;} /*400px/960px*100*/ 
	aside img {height: 150px;}
	aside p { font-size: 0.75em;} /*12px / 16px*/
	.mask:hover {height: 250px;}
	.mask:hover h2 { font-size: 1.375em; } /*22px /16px */
	.mask:hover p { font-size: 1em; } /*16px /16px */
	.mask:hover .learn {font-size: 1em; padding: 16px 5%;} /* 34px/300px*100 */
	
	#shop-content {display:block; } 
	#wrapper-shop h1 {font-size: 1.375em; margin:0px 0 28;} /* 22px/ 16*/

	.shop-box { display: block; width:100%; margin: 30px 1.66666666%;}
	.shop-box h3, .team h3 { font-size: 1.375em;} /*22px / 16px*/
	#shop-content .shop-box p { margin-bottom: 10px;}
	.shop-box a { width: 80%;}
	.shop-box img { min-width: 100%; max-height: 100px; object-fit: cover;object-position: top;}
	.team {width:100%; display: block; } 
	.team img { display: inline-block; padding-top: 20px; margin: 0 auto; }
	.circle {width: 0.9375%; height: 9px;} /*9px/1024px*100 */
	#slideshow-wrapper, #slideshow { height: 225px;}
	footer h3 {font-size: 0.75em;} /*12px / 16px*/
	footer p  {font-size: 0.75em;} /*12px / 16px*/
	
	
}



@media only all and (max-width:480px) {
	
	
	#header-content img {height: 80px; width: 50px;}
	nav { width: 100%; margin: 0px auto; background-color: #a32973;}
	nav a { color: #fff; padding: 5px 0px;}
	nav a:hover { color: none;}
	nav li { margin: 0px; display: block; border-bottom: 1px solid white;}
	#banner { min-height: 150px;}
	#banner img { height: 150px; margin-bottom: 0px;}
	#color-bar h3 { font-size: 0.625em;} /* 10/16px */
	#wrapper-white { width: 100%; display: block;}
	section, aside { display: block; }
	section { width: 90%; margin: 0 auto;}
	section h1 { font-size: 1em;text-align: center;} /* 16px / 16px*/
	aside { width: 90%; margin: 5px auto;}
	footer { text-align: center; margin: 0px;}
	#footer-content { display: block;}
	#footer-left { width: 80%; margin: 0 auto; padding: 0px; font-size: 0.625em;}
	#footer-right { float: none; display: block; text-align: center; width: 80%; margin: 0 auto; padding-top: 10px; font-size: 0.625em;}
	.shop-box p, .team p { margin-bottom: 0px;}
	.shop-box, .team { margin-bottom: 0px; padding-bottom: 5px;}
	.circle {height: 4px;}
	#slideshow-wrapper, #slideshow { height: 175px;}

	
}