@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:960px; margin: 0 auto; position:relative;}

nav {position:absolute; bottom:20px; right:120px; font-family: 'Goudy Bookletter 1911', serif;}
	nav li {display:inline-block; padding: 10px 20px;}
	nav a {text-decoration: none;}
	nav a:hover {background-color:#16325a; color:white; padding:10px;}

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

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

#wrapper-white {width:960px; margin:20px auto; display:flex;}

section {width:580px;}
	section h1 {font-size:36px; color:#a32973; text-transform:uppercase; padding:10px 0; font-family: 'Goudy Bookletter 1911', serif;}
	section p {font-size:16px; line-height:1.5; margin-top:10px; padding-right:20px; font-family: 'Lato', sans-serif;}

aside {width:300px; height: 300px; float: right; position: relative; border:3px solid #16325a; padding: 20px 14px 14px; text-align:center;}
	aside h2 {color:#a32973; font-size:25px; padding:10px 0px; font-family: 'Goudy Bookletter 1911', serif;}

.uppercase {text-transform:uppercase;}

#wrapper-shop {background-color:#f4f3f0; width:100%; margin-bottom: 15px; padding:20px;}
	#shop-content {width:960px; margin:0px auto; display:flex; text-align:center;}
		.shop-box {width:300px; margin-left:15px;}
	#shop-content h3 {font-size:28px;  text-transform:uppercase; color:#a32973; padding:5px 0px; font-family: 'Goudy Bookletter 1911', serif;}
	#shop-content p, .team p {font-size:14px; margin-bottom:10px; line-height:1.5; font-family: 'Lato', sans-serif;}
	#shop-content a {text-decoration:none; color:white; background-color:#a32973; padding:5px;}

footer {width:100%; background-color:#16325a; color:white; padding:20px 0px;}
	#footer-content {width:960px; margin:0px auto; display:flex; justify-content:space-between;}
	#footer-left {}
	#footer-right {text-align:right;}

footer h3 {color:white; font-size:16px; text-transform:uppercase; font-family: 'Goudy Bookletter 1911', serif;}
footer p {color:white; font-size:16px; opacity:70%; line-height:1.5; font-family: 'Lato', sans-serif;}

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

aside .book-details {opacity: 1;}

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

.mask { width: 328px; 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: white; margin-top: 25%; opacity: 1;}

.mask:hover p {font-size: 20px; color: white; margin-bottom: 40px; opacity: 1;}

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

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

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

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



.team {display: inline-block; width: 200px; text-align: center; margin-bottom: 60px;}

.team:first-of-type {margin-right: 25px;}

.team:nth-of-type(2), .team:nth-of-type(3) {margin-left: 24px; margin-right: 24px;}

.team:last-of-type {margin-left: 25px;}

/*-------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;}