@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

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; color:#fff;}

#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;}
section p {font-size: 16px; line-height: 1.5; margin-top: 15px; font-family: "Lato", serif;}
aside {width: 300px;
     height: 300px;
     float: right;
     position: relative;
     border: 3px solid #16325a;
     padding: 20px 14px 14px;
     text-align: center;}

 .shop-box h3,
.team h3 {text-transform: uppercase; text-align: center; color:#a32973; font-family: "Goudy Bookletter 1911", serif; font-size: 32px; margin-top: 0px; margin-bottom: 28px; margin-right: 0px; margin-left: 0px;}

.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;
}

#wrapper-shop h1 {text-align: center;font-family: "Goudy Bookletter 1911", serif;
  text-transform: uppercase;
  font-size: 30px;
  color: #a32973;
  font-weight: bold;
  padding: 20px 0 0 0;}

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

aside h2 {text-align: center; margin: 10px 0; color:#a32973; font-size: 20px;}

.uppercase {text-transform: uppercase;}

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

aside img {display: block; margin: 0 auto; padding: 10px;}

.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: #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; color: white; font-size: 20px; opacity: 1; text-transform: uppercase; text-align: center; text-decoration: none; padding: 16px 34px;}

#wrapper-shop {width:100%; background-color: #f4f3f0; padding: 50px 0;}
#shop-content {width: 960px; margin: 0 auto; display: flex;}
.shop-box {width: 300px;; margin: 0 auto; text-align: center;}

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

#shop-content h3 {color: #a32973; text-transform: uppercase; padding: 10px; font-size:28px; font-family: "Goudy Bookletter 1911", serif;}

#team p #shop-content p {line-height: 1.5; font-size: 14px; margin: 10px 0 20px 0; font-family: "Lato", serif;}

.shop-box a {text-decoration: none; text-align: center; background-color: #a32973; color: #fff; font-size: 14px; padding: 5px;}
footer{background-color: #16325a; color: #fff; padding: 20px 0;}

#footer-content {width: 960px; margin: 0 auto; display: flex;}

#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", serif;}

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