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

#wrapper-shop {width:100%; margin:10px auto;background-color: #F4F3F0; padding:10px;}
#shop-content {width:960px; margin: 0 auto; display:flex; text-align: center;color: #A32973; padding: 5px 0;}
#shop-content h1 { text-transform: uppercase; color: #A32973;font-family:'Goudy Bookletter 1911', serif; text-align: center; font-size: 32px; margin: 0px 0 28;}
.shop-box h3, .team h3, .team p, .shop-box p {width: 200px; text-align: center; display: inline-block;}

.team {width:300px; display: inline-block;margin-left: 15px; opacity: .7; transition: opacity 2s;}
.team:hover { opacity: 1}
.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;}
#shop-content h3 { font-size: 28px; text-transform: uppercase;font-family: 'Goudy Bookletter 1911', serif; }
#shop-content 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;}


/*Slideshow Begins below*/

#slideshow-wrapper { width: 100%; height: 441px;}
#slideshow { widows: 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;}




/*Footer Starts below*/
footer{width:100%; background-color:#16325A; color:white;padding: 20px 0;}
#footer-content{width:960px; margin:0 auto; display:flex; justify-content: space-between;}
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;}
#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: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:hover h2 {font-size: 32px; color:white;}
.mask:hover p {font-size: 20px; color: white; margin-bottom: 40px;}
.mask:hover .learn {background-color: #16235A; color: white; font-family: 'Lato', sans-serif; text-transform: uppercase; text-align: center; text-decoration: none; padding: 16px 34px;}