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

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&display=swap');

/*font-family: 'Goudy Bookletter 1911', serif;
font-family: 'Lato', sans-serif;*/

header {width:960px;
margin:0 auto;
position:relative;
}

nav {position:absolute;
bottom:20px;
right:300px;}

nav li {display:inline-block;}

nav a {padding:5 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; 
display:flex;
justify-content:space-between;}

section {width:500px; padding:10px 10px;}
section h1 {font-size:36px;
color: #a32973;
font-family: 'Goudy Bookletter 1911', serif;
text-transform: uppercase;}
section p {font-size:16px;
line-height:1.5;
margin-top:15px;
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 {text-align:center; 
margin:10px 0;
color: #a32973;
font-family: 'Goudy Bookletter 1911', serif;
font-size:20px;}
aside img {display:block; 
margin: 0 auto;
padding:10px;}

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: #fff;
     font-family: 'Goudy Bookletter 1911', serif;
     margin-top: 25%;
     opacity: 1;
}
.mask:hover p {
    font-size:20px; color:white; margin-bottom:40px; opacity: 1;font-family: 'Lato', sans-serif;}

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

.mask h2 {
     font-size: 32px;
     color: #fff;
     font-family: 'Goudy Bookletter 1911', serif;
     margin-top: 25%;
     opacity: 1;
}
.mask p {
    font-size:20px; color:white; margin-bottom:40px; opacity: 1;font-family: 'Lato', sans-serif;}

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

.uppercase {text-transform: uppercase;}

#wrapper-shop {width:100%; background-color:#f4f3f0; padding:50px 0;}

#shop-content {width:960px; margin:0 auto; display:flex; text-align:center;}
#shop-content h3 {color:#a23973; text-transform: uppercase; padding:10px; font-size:28px;font-family: 'Goudy Bookletter 1911', serif;}
#shop-content p {line-height:1.5; font-size:14px; margin:10px 0 20px 0;font-family: 'Lato', sans-serif;}

.shop-box {width:300px; margin:0 auto;font-family: 'Goudy Bookletter 1911', serif;}
.shop-box a {text-decoration:none; text-align:center; background-color: #a32973; color: #fff; font-size: 14px; padding: 5px; margin-top:20px;}

footer {background-color: #16325a; color: #fff; padding:20px 0;}
#footer-content {width:960px; margin:0 auto; display:flex;}
#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;}
#footer-left {width: 40%;}
#footer-right {width: 40%; margin-left:300px; text-align:right;}

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

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

.team p {font-family: 'Goudy Bookletter 1911', serif;}

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

/* --------- SLIDESHOW --------- */

#slideshow-wrapper {width:400%; 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:-50%; text-align:center;}