@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: 1.5625em /*25px*/; }
#wrapper-white{width: 80%; margin: 20px auto; display: flex;}
section{width: 46.77% /*(580px / 1240px)*100 */; }
section h1{font-size: 2.25em /*36px*/; color: #a32973; text-transform: uppercase; padding: 10px 0;}
section p{ font-size: 1em /*16px*/; line-height: 1.5; margin-top: 10px; padding: 10px; font-family: lato;}
aside{width: 24.19% /*(300px / 1240px)*100 */; 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: 100%; 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: 2em /*32px*/; color: #fff; margin-top: 25%; opacity: 1;}
.mask:hover p { font-size: 1.25em /*20px*/; color: #fff; margin-bottom: 40px; opacity: 1;}
.mask:hover .learn { background-color: #16325a; color: #fff; font-family: lato; font-size: 1.25em /*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: 1.5625em /*25px*/; padding: 10px 0; margin: 20px 6.67%/*(20px / 300px)*100 */;}
#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: 30.24% /* (300px / 992px)*100 */; margin-left: 1.512% /*(15px / 992px)*100 */;}
#shop-content h1{text-transform: uppercase; color: #a32973; font-family: goudy-bookletter-1911;
    text-align: center; font-size: 2em /*32px*/; margin: 0 0 28px 0;}
#shop-content h3, #team h3{font-size: 1.75em /*28px*/; text-transform: uppercase; color: #a32973;}
#shop-content p, #team p{ font-size: .875em /*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: 20.16% /*(200px / 992px)*100 */; text-align: center; display: inline-block;}
.team:first-of-type {
     margin-right: 2.52% /*(25px / 992px)*100 */;
}
.team:nth-of-type(2),
.team:nth-of-type(3){
     margin-left: 2.419% /*(24px / 992px)*100 */;
     margin-right: 2.419% /*(24px / 992px)*100 */;
}
.team:last-of-type {
     margin-left: 2.52% /*(25px / 992px)*100 */;
}

footer{width: 100%; background-color: #16325a; color: white; padding: 20px 0;}
#footer-content{ width: 77.42% /*(960px / 1240px)*100 */; margin: 0 auto; display: flex; justify-content: space-between;}
footer h3{color: #fff; font-size: 1em /*16px*/; text-transform: uppercase;}
footer p{font-size: 1em /*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: 2em /*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: 0.97% /*(12px / 1240px)*100 */; height: 12px;
border-radius: 50%; margin-right: 1.21% /*(15px / 1240px)*100 */;}
#circle-nav{margin-top: -50px; text-align: center;}

/* --------- MEDIA QUERIES --------- */
@media only screen and (max-width: 1024px) { 
     #header-content{align-items: center; text-align: center;}
     nav{position: static; margin-top: 20px;}
     #banner{height: 300px;}
     #wrapper-white{width: 80%;}
     section, aside{width: 100%; float: none; margin: 0 0 20px 0;}
     .mask { height: 300px;}
     #shop-content{width: 90%; display: block;}
     .shop-box, .team{width: 100%; margin: 0 0 20px 0;}
     #color-bar h3{font-size: 1.25em;}
     section h1{font-size: 1.75em;}
     aside h2{font-size: 1.25em;}}

@media only all and (max-width: 480px) {
     header{align-items: center;}
     nav li{width: 100%; 
	display:inline-block; margin: 0.25em 0;}
     #banner{height: 200px;}
     #slideshow-wrapper{height: 200px;}
     #slideshow{height: 200px;}
     .mask { height: 200px;}
     #color-bar h3{font-size: 1em;}
     section h1{font-size: 1.5em;}
     aside h2{font-size: 1em;}
     #wrapper-white{width: 90%; margin: 20px auto; display: block;}
     section{width: 100%; float: none;}
     aside{width: 90%; align-items: center;}
     footer{text-align: center;}
     #footer-content{width: 90%; display: block;}
     #footer-right{margin-top: 20px; text-align: center;}

 }