@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:90%; margin: 0 auto; position:relative;} /*960px*/
	
#header-content img {margin: 1.0416666666666667%} /*10px /960px*/

nav {width: 36.45833333333333%; position:absolute; bottom:20px; right:15.625%; font-family: 'Goudy Bookletter 1911', serif;} /* width: 350px / 960 | right: 150px / 960px*/

	nav li {display:inline-block; margin: 20px 5.714285714285714%;} /*20 / 350 *100*/

	nav a {text-decoration: none;}

	nav a:hover {background-color:#16325a; color:white; padding:10px 2.857142857142857;} /*10 /350*100*/

#banner {}

#banner img {height: 441px; width: 100%; background-repeat: no-repeat; background-size: cover;}

#color-bar {background-color: #a32973;}

#color-bar h3 {font-size: 1em; background-color:#a32973; color:white; text-align:center; padding:10px 0px; font-family: 'Goudy Bookletter 1911', serif;} /*16 /16*/

#wrapper-white {width:90%; margin:40px auto; display:flex;} /*960px*/

section {width: 52.083333333333333%;} /*500px / 960*100 */

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

	section p {font-size:1em; line-height:1.5; margin-top:10px .52083333333333333%; font-family: 'Lato', sans-serif;} /*16px / 16 = 1*/ /*20 / 960*100 | margin: 5px / 960px*/

aside {width: 31.25%; height: 300px; float: right; position: relative; border:3px solid #16325a; padding: 20px 1.45833333% 14px; margin-left: 4.166666666666667%; text-align:center;} /*300px / 960 *100 */ /*14 / 960*100 | margin: 40px / 960px*/

	aside h2 {color:#a32973; font-size:1.5625em; margin:20px 6.66666666667%; text-align: center; font-family: 'Goudy Bookletter 1911', serif;} /*25px / 16 = 1.5625 | margin: 20px / 300px*/

aside img {display: block; margin-left: auto; margin-right: auto;}

.uppercase {text-transform:uppercase;}

#wrapper-shop {background-color:#f4f3f0; width:100%; margin-bottom: 15px; padding:20px;}

	#shop-content {width:80%; margin:0px auto; display:flex; text-align:center;} /*960px */
		.shop-box {display: inline; width:31.25%; margin: 50px 1.666666666667%;} /*300px / 960 *100*/ /*15 / 960*100*/ /*31.25% | margin: 5px / 300px*/

	#shop-content h3 {font-size:1.75em;  text-transform:uppercase; color:#a32973; margin:10px 0px; font-family: 'Goudy Bookletter 1911', serif;} /*28px / 16 = 1.75*/

	#shop-content p, .team p {font-size:0.875em; margin:10px 0px 30px 0px; line-height:1.5; font-family: 'Lato', sans-serif;} /*14px / 16 = 0.875*/

	#shop-content a {display: block; text-decoration:none; color:white; background-color:#a32973; padding:10px 6.666666666666666%; width: 53.33333333333333%} /*padding: 20 / 300*100 | width: 160px /300px*/


/*---------order summary-----------*/

#order-summary p {text-align: center;}

	#summary h2 {color:#a32973; font-size:1.5625em; text-transform: uppercase; text-align: center; font-family: 'Goudy Bookletter 1911', serif;}

	#shoppe p {color: #a32973; font-size: 0.875em; text-align: center; font-family: 'Goudy Bookletter 1911', serif;}

	table {border: 1px solid #16325a; width: 40%; margin: 0 auto;}

	th {background-color: #16325a; color: white; padding: 0.125em;}

	td {border: 1px solid #16325a; text-align: center; padding: 5px;}

/*---------end order summary-------*/

footer {background-color:#16325a; color:white; padding:20px 0px;}

	#footer-content {width:80%; margin:0px auto; display:flex; justify-content:space-between;} /*960px */

	#footer-left {display: inline-block; color: #fff;}

	#footer-right {display: inline-block; color: #fff; text-align:right; float: right; margin-left: 50%;} /*300px / 960px*/

footer h3 {color:white; font-size:1em; text-transform:uppercase; font-family: 'Goudy Bookletter 1911', serif;} /*16px / 16 = 1*/

footer p {color:white; font-size:1em; opacity:70%; line-height:1.5; padding-bottom: 10px; font-family: 'Lato', sans-serif;} /*16px / 16 = 1*/

/*----------Transition Effects----------*/

aside .book-details {opacity: 1;}

aside .book-details:hover {opacity: 0; transition: linear 1s;}

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

.mask:hover {opacity: 1;}

.mask h2, .mask p, .mask .learn {opacity: 0;}

.mask:hover h2 {font-size: 2em; color: white; margin-top: 25%; opacity: 1;} /*32px / 16 = 2*/

.mask:hover p {font-size: 1.25em; color: white; margin-bottom: 40px; opacity: 1;} /*20px / 16 = 1.25*/

.mask:hover .learn {background-color: #16325a; color: white; font-family: 'Lato', sans-serif; font-size: 1.25em; opacity: 1; text-transform: uppercase; text-align: center; text-decoration: none; padding: 16px 10.36585366%;} /*20px / 16 = 1.25*/ /*34 / 328*100*/

/*-----Store Hours-----*/

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

#wrapper-shop h1, .team h3 {text-align: center; font-size: 2em; color: #a32973; text-transform: uppercase; margin: 0px 0px 28px 0; font-family: 'Goudy Bookletter 1911', serif} /*32px / 16 = 2*/



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

.team:first-of-type {margin-right: 2.5%;} /*25px /960px*/

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

.team:last-of-type {margin-left: 2.604166666666666667%;} /*25px / 960px*/

/*-------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: lightgray; width: 12px; height: 12px; border-radius: 50%; margin-right: 15px;}

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


/*---------Media---------*/

@media only screen and (max-width: 1024px) {
	
	#header-content {
		width: 100%;
		text-align: center;}
	
	#header-content img {
		height: 100px;}
	
	nav {
		width: 80%; 
		position:relative; 
		bottom:0px; 
		right:0; 
			margin: 10px auto;
		font-family: 'Goudy Bookletter 1911', serif;}
	
	
	#banner {height: 200px;}
	#banner img {height: 200px;}
	
	#color-bar h3 {font-size: 0.875em; padding: 5px 0;} /*14 /16*/

	#wrapper-white {
		margin: 10px auto;}
	
	section h1 {
		font-size: 1.625em; /*26px / 16px*/}
	
	section p {
		font-size: 0.75em; /*12px / 16*/}
	
	section {
		width: 70%;} /*500px / 960*100 */
	
	aside {
		width: 40%; /*400px / 960*/
		height: 250px; 
		margin: 10px 0px;}
	
	aside img {
		height: 150px;}
	
	.mask {height: 275px;}
	
	.mask:hover h2 {font-size: 1.375em;} /*22px / 16*/
	
	.mask:hover p {font-size: 1em;} /*16px / 16*/
	
	.mask:hover .learn {
		font-size: 1em;
		opacity: 1;
		padding: 16px 5%;}
	
	#wrapper-shop h1{
		font-size: 1.375em; /*32px / 16*/
		margin: 0px 0px 28px 0px;}
	
	#shop-content {
		display: block;}
	
	.shop-box {
		display: block;
		width: 100%;
		margin: 30px 1.66666666666666667%;}
	
	.shop-box img {
		width: 100%;
		max-height: 100px;
		object-fit: cover;
		object-position: top;}
	
	.team {
		display: block;
		width: 100%;}
	
	.team img {
		display: inline-block;
		padding-top: 20px;
		margin: 0 auto;}
	
	#shop-content h3, .team h3 {
		font-size: 1.375em; /*22px / 16*/}
	
	#shop-content p {
		margin: 10px 0px 10px 0px;}
	
	#shop-content a {
		width: 80%}
	
	.circle {
		width: 0.9375%; /*9px / 960px*/
		height: 9px;}
	
	#slideshow-wrapper, #slideshow {
		height: 225px;}
	
	aside p {
		font-size: 0.75em; /*12px / 16*/
		padding-bottom: 10px;}
	
	footer h3 {
		font-size: 0.75em;} /*12px / 16*/

	footer p {
		
		font-size: 0.75em;} /*12px / 16*/	
}

@media only all and (max-width: 480px) {
	
	#header-content img {height: 50px;}
	
	nav {width: 100%;
		margin: 0px auto;
		background-color: #a32973;}

	nav a {
		color: #fff;
		display: block;
		border-bottom: 1px solid white;
		padding: 2px 0px;}
	
	nav a:hover {color: none;}
	
	nav li {
		display: flex;
		flex-direction: column;
		margin: 0px;}
	
	#banner {max-height: 150px;}
	
	#banner img {height: 150px;
	margin-bottom: 0px;}
	
	#color-bar h3 {
		font-size: 0.833333333333em;} /*10 /16*/
	
	#wrapper-white {
		width: 100%;
		display: block;}
	
	section, aside {display: block;}
	
	section {
		width: 90%;
		margin: 0 auto;}
	
	section h1 {
		font-size: 1em;
		text-align: center;}
	
	aside {
		width: 90%;
		margin: 5px auto;}
	
	footer {
		text-align: center;
		margin: 0px;}
	
	#footer-content {
		display: block;}
	
	#footer-left {
		width: 80%;
		margin: 0 auto;
		font-size: 0.833333333333em; /*10 /16*/}
	
	#footer-right {
		float: none;
		display: block;
		text-align: center;
		width: 80%;
		margin: 0 auto;
		font-size: 0.833333333333em; /*10 /16*/}
	
	#shop-content p, .team p {margin-bottom: 0px;}
	
	.shop-box, .team {margin-bottom: 0px; padding-bottom: 5px;}
	
	.circle {height: 4px;}
	
	#slideshow-wrapper, #slideshow {height: 175px;}
	
}