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

/* Nav Bar */
nav {position: absolute;bottom: 20px; right: 15.625%;width: 36.45833333%;font-family: 'Lato', sans-serif;}
nav li {display:inline-block; padding: 10px 5.7142857%;}
nav a {text-decoration: none;}
nav a:hover {background-color: #16325a; color:white; padding: 10px 5.714285%;}

/* Banner Style */
#banner {background-image: url("images/home-banner.jpg"); height: 440px; width: 100%;}
#color-bar {background-color: #a32973; color: white; text-align: center; padding: 10px 0;}

/* Double Column */
#wrapper-white { width:90%; margin: 0 auto; display:flex;}
section {width: 60.4166667%;}
section h1 {font-size: 1.625em; color: #A32973; text-transform: uppercase; padding: 10px 0;}
section p {font-size: 1em; line-height: 1.5; margin-top: 10px; padding: 10px; width: 90%}
aside {width: 31.25%; height: 280px; text-align: center; border-style: solid; border-width: 3px;
border-color: #16325a; position: relative;}
aside img{display: block; margin-left: auto; margin-right: auto;}
aside h2 {color: #a32973; font-size: 25px; padding: 10px 0;}
aside hr {
    width: 90%;
    margin: 20px auto;
    border-top: 1px solid #16325a;
}
.uppercase {text-transform: uppercase;}
aside .book-details:hover {
	opacity: 0;
	transition: linear 1s;}
.mask {
	width:109.333333%;
	height: 334px;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	background-color: #a32973;
	opacity: 0;
	transition: linear 2s;
}
.mask:hover{opacity: 1;}
.mask h2, .mask p, .mask .learn {opacity: 0;}
.mask:hover h2 {font-size: 32px; color: #fff; margin-top: 25%; opacity: 1;}
.mask:hover p {font-size: 1.25em; color: #fff; margin-bottom: 40px; opacity: 1;}
.mask:hover .learn {background-color: #16325A; color: white; font-size: 1.25em; opacity: 1; text-align: center; text-transform: uppercase; text-decoration: none; padding: 16px 34px;}
/* Triple Column */
#wrapper-shop {background-color: #f4f3f0; width: 100%; text-align: center; margin-bottom: 20px; padding: 30px;}
#wrapper-shop h1 {font-size: 2em; text-transform: uppercase; color: #A32973; padding: 5px 0; text-align: center;}
#shop-content {width: 80%; margin: 0 auto; display: flex;}
.team {width: 20.8333333333%;text-align: center; display: inline-block; margin-left: 15px; }
#shop-content h3 {font-size: 28px; text-transform: uppercase; color: #A32973; padding: 5px 0;}
#shop-content p {font-size: 14px; margin-bottom: 10px;}
#shop-content a {text-decoration: none; color: white; background-color: #A32973; padding: 5px}
.shop-box img{opacity: .7; transition: opacity 2s;}
.shop-box img:hover {opacity: 1;}
/* Footer */
footer {width: 100%; background-color: #16325A; color: white; padding: 20px 0;}
#footer-content {width: 80%; margin: 0px auto; display: flex; justify-content: space-between;}
footer h3 {color: white; font-size: 1em; text-transform: uppercase; padding-top: 10px;}
footer p{color: white; font-size: 1em; opacity: 70%; line-height: 1.5;}
#footer-left {}
#footer-right {text-align: right; margin-left: 50%;}


/* 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: 1%;
	height: 12px;
	border-radius: 50%;
	margin-right: 10px;
}
#circle-nav{
	margin-top: -50px;
	text-align: center;
}
@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: 0;
		right: 0;
		margin: 10px auto;}
	#banner{height: 200px;}
	#banner img {height: 200px;}
	#color-bar h3 {
		font-size: 0.875em;
		padding: 5px 0;}
	#wrapper-white {margin: 10px auto;}
section {width: 60.4166667%;}
section h1 {font-size: 1.625em;}
section p {font-size: 0.75em;}
aside {width: 25%; height: 250px; margin: 0px;}
	aside img {
		height: 150px;
	}
		
		
#wrapper-shop {font-size: 1.375em;margin: 0px 0px 28px 0px;}
#wrapper-shop h1 {font-size: 2em; text-transform: uppercase; color: #A32973; padding: 5px 0; text-align: center;}
#shop-content {display: block;}
	.shop-box {display: block; width: 100%; margin: 10px 1.6666666667%;}
.team {width: 100%;text-align: center; display: block; margin-bottom: 40px; }
	.shop-box h3, .team h3 {font-size: 1.375em;	}
	#shop-content .shop-box p{margin: 5px 0px 15px 0px;}
	.shop-box img{width: 100%; height: 200px;}
#shop-content h3 {font-size: 28px; text-transform: uppercase; color: #A32973; padding: 5px 0;}
#shop-content p {font-size: 14px; margin-bottom: 10px;}
#shop-content a {text-decoration: none; color: white; background-color: #A32973; padding: 5px}
.shop-box img{opacity: .7; transition: opacity 2s;}
.shop-box img:hover {opacity: 1;}
	
	.circle {
	width: 0.9375%;
	height: 9px;
}
	#slideshow-wrapper, #slideshow{ height: 225px; }
	aside p {font-size: 0.75em;}
	
	/* Footer */
footer h3 {font-size: 0.75em; }
footer p{font-size: 0.75em; }
}

@media only all and (max-width: 480px) {
	#header-content img {height: 80px;}
	nav{width: 100%;
	margin: 5px 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{margin: 0px;}
	#banner {min-height: 150px;}
	#banner img{height: 150px;
	margin-bottom: 0;}
	#color-bar h3 {font-size: 0.83333333em;}
	#wrapper-white{width: 100%;}
	section, aside{display: block;}
	section {width: 100%;}
	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-right {float: none; display: block; text-align: center; width: 80%; margin: 0 auto; font-size: 0.8333333333333333333em;}
	#footer-left{width: 80%; margin: 0 auto; padding: 0; font-size: 0.8333333333333333333em;}
	
	
}