@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;
/*
# is the starter for id 
while . is the start for class
*/
header{
	width: 960px;
	margin: 0 auto;
	position: relative;
}
nav{
	position: absolute;
	bottom: 20px;
	right: 300px;
}
nav li{
	display: inline-block;
}
nav a{
	padding:5px 20px;
	text-decoration:none; color: #16325a;font-family: 'Goudy Bookletter 1911', serif;
}
nav a:hover{
	background-color: #16325a; /* Dark blue background on hover */
    color: #fff; /* White text on hover */
}
#banner{
	background-image:url("images/home-banner.jpg");height: 440px;
}
#color-bar{
	background-color: #a32973;
	color: #fff;
	text-align: center;
	padding: 10px 0; font-family: 'Goudy Bookletter 1911', serif;
}
#wrapper-white{
	width: 960px; margin: 30px auto; display: flex;
}
section{
	width: 580px; padding: 10px 10px;
}
section h1{
	font-size: 36px;
	color: #a32973;
	text-transform: uppercase;font-family: 'Goudy Bookletter 1911', serif;
}
h1{
	font-size: 36px; text-align: center;
	color: #a32973;
	text-transform: uppercase;font-family: 'Goudy Bookletter 1911', serif;
}
section p{
	font-size: 16px;
	line-height: 1.5;
	margin: 10px;font-family: 'Lato', sans-serif;
}

aside{
	width: 300px; position: relative; height: 300px; float: right; text-align: center; border: 3px solid #16325a; padding: 20px 14px 14px; display: block;
}
aside h2{
	text-align: center; margin: 10px 0;
	color: #a32973; font-size: 20px;font-family: 'Goudy Bookletter 1911', serif;
}
.uppercase{
	text-transform: uppercase;
}
aside img{
	display: block; margin: 0 auto; padding: 10px;
}
#wrapper-shop{
	width: 100%;
	background-color: #f4f3f0; padding: 50px 0;
}
#shop-content {
	width: 960px;
	margin: 0 auto; display: flex;
}
.shop-box{
	display: block; text-align: center;
	width: 300px; margin: 0 auto;
}
#shop-content h3 {
	color: #a32973; text-transform: uppercase;text-align: center;
	padding: 10px; font-size: 28px;font-family: 'Goudy Bookletter 1911', serif;
}
#shop-content p {
	text-align: center; line-height: 1.5; font-size: 14px; margin: 10px 0 20px 0;font-family: 'Lato', sans-serif;
}
.shop-box a {
	text-decoration: none; background-color: #a32973; 
	color: #fff; font-size: 14px; padding: 5px;
}
#footer-content {
	width: 960px;margin: 0 auto; display: flex;
}
footer{
	 background-color: #16325a; color: #fff; padding: 20px 0;
}

#footer-left{
	width: 40%; 
}
#footer-right{
	width: 40%;  margin-left: 300px; text-align: right;
}

#footer-content h3 {
	color: white; text-transform: uppercase; font-size: 16px; margin-bottom: 5px;font-family: 'Goudy Bookletter 1911', serif
}

#footer-content p{
	line-height: 1.5;font-family: 'Lato', sans-serif;
}

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

.shop-box h3,
.team h3{
     width: 200px; text-align: center; display: inline-block;
}
.shop-box p,
.team p{
	width: 200px; text-align: center; display: inline-block;
}
.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;
}








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

aside .book-details {
	opacity: 1;
}
aside .book-details:hover{
	opacity: 0;
	transition: linear 1s;
}
.mask{
	width: 328px; position: absolute; top: 0; left: 0; text-align: center; background-color: #a32973; opacity: 0; transition: linear 2s; height: 400px;
}
.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: 20px; color: white; margin-bottom: 40px; opacity: 1;
}
.mask:hover learn{
	background-color: #16325a; font-family: 'Lato', sans-serif;  font-size: 20px; color: white; margin-bottom: 40px; opacity: 1; text-transform: uppercase; text-align: center; text-decoration: none; padding: 16px 34px;
}



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