@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-content{ width: 80%; margin: 0 auto; position: relative;}

nav{position: absolute; bottom: 20px; right: 120px;}
nav li{ display: inline-block; padding: 10px 20px;}
nav a{text-decoration: none; color: #16325a;}
nav a:hover{background-color: #16325a; color: white; padding: 10px 20px;}

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

#color-bar{background-color: #a32973; color: white; text-align: center; padding: 10px; }
#color-bar h3{ font-size: 25px; }
#wrapper-white{width: 80%; margin: 20px auto; display: flex;}
section{width: 580px; }
section h1{font-size: 36px; color: #a32973; text-transform: uppercase; padding: 10px 0;}
section p{ font-size: 16px; line-height: 1.5; margin-top: 10px; padding: 10px; font-family: lato;}
aside{width: 300px; height: 300px; float: right; position: relative; border: 3px solid #16325a; text-align: center; padding: 20px 14px 14px;}

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: #fff; margin-top: 25%; opacity: 1;}
.mask:hover p { font-size: 20px; color: #fff; margin-bottom: 40px; opacity: 1;}
.mask:hover .learn { background-color: #16325a; color: #fff; font-family: lato; font-size: 20px;
    opacity: 1; text-transform: uppercase; text-align: center; text-decoration: none; padding: 16px 34px;}

.uppercase{ text-transform: uppercase;}
aside h2{color: #a32973; font-size: 25px; padding: 10px 0; margin: 20px;}
#wrapper-shop{background-color: #f4f3f0; margin-bottom: 20px; padding:30px;}
#shop-content{width: 80%; margin: 0 auto; display: flex; text-align: center;}
.shop-box{width: 300px; margin-left:15px;}
#shop-content h1{text-transform: uppercase; color: #a32973; font-family: goudy-bookletter-1911;
    text-align: center; font-size: 32px; margin: 0 0 28px 0;}
#shop-content h3, #team h3{font-size: 28px; text-transform: uppercase; color: #a32973;}
#shop-content p, #team p{ font-size: 14px; line-height: 1.5; margin-bottom: 10px; font-family: lato;}
#shop-content a{text-decoration: none; color: #fff; background-color: #a32973; padding:5px; font-family: lato;}

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

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: #fff; font-size: 16px; text-transform: uppercase;}
footer p{font-size: 16px; color: #fff; opacity: 70%; line-height: 1.5; font-family: lato;}
#footer-right{text-align: right;}

#shop-content h1{text-transform: uppercase; color: #a32973; font-family: goudy-bookletter-1911;
    text-align: center; font-size: 32px; margin: 0 0 28px 0;}

/* --------- 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-right: 15px;}
#circle-nav{margin-top: -50px; text-align: center;}