@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');

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


header {width:100%;
margin:0 auto; position: relative;}

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

}

nav li {display:inline-block;}
nav a {padding:5 .021%; 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: 100%; margin: 30px auto; display: flex;}

section {width: 60.41666666%; padding: 10px 1.04166667%; }
section h1 {font-size: 2.25em; color: #a32973; text-transform: uppercase;font-family: 'Goudy Bookletter 1911', serif;}
section p {font-size: 1em;line-height: 1.5; margin-top:15px;font-family: 'Lato', sans-serif;}
aside {width: 31.25%; border: 3px solid #16325a; padding: 10px 1.041666667%;font-family: 'Lato', sans-serif;position: relative;}

aside h2 {text-align:center; margin:10px 0; color:#a32973; font-size: 1.25em;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: 100%; margin:0 auto; display:flex;font-family: 'Goudy Bookletter 1911', serif;}

.shop-box {width:31.25%; margin: 0 auto; text-align:center;}

.shop-box h3,
.team h3{}

.shop-box p,
.team p{}

.team {width: 20.83333333%; text-align:center; display: inline-block;}

.team:first-of-type {
     margin-right: 2.60416666667%;
}
.team:nth-of-type(2),
.team:nth-of-type(3){
     margin-left: 2.5%;
     margin-right: 2.5%;
}
.team:last-of-type {
     margin-left: 2.5%;
}

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

#shop-content h3 {color: #a32973; transform: uppercase;padding:10px; font-size: 1.75em;}

#shop-content p {line-height:1.5; font-size:.875em; margin:10px 0 20px 0;font-family: 'Lato', sans-serif;}

.shop-box a {text-decoration: none; text-align:center; background-color: #a32973; color: #fff; font-size: .875em; padding: 5px;}

footer {border: 1px solid yellow; background-color:#16325a;color:#fff; padding: 20px 0;}
#footer-content	{width: 100%; margin: 0 auto; display: flex;}

#footer-left {width:40%;}

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

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

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

/* --------- TRANSITION EFFECTS --------- */


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

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


.mask {
     width: 34.1666666667%;
     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;
     color: #fff;
     margin-top: 25%;
     opacity: 1;
}

.mask:hover p {Font-size: 1.25em;
Font-color: white;
Margin-bottom: 40px;
	opacity: 1;}

.mask:hover .learn {background-color: #16325a; color: white; font-family: 'Lato', sans-serif; font-size: 1.25em; opacity: 1; text-transform: uppercase; text-align: center; text-decoration: none; padding: 16px 3.5416666667%;}

/* --------- 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: 1.25%; height: 12px; border-radius: 50%; margin-right: 1.5625%;}

#circle-nav {margin-top: -50px; text-align: center;}


@media only screen and (max-width: 1024px) {
	#header-content {align-content: center;}
	nav {display: inline-block;}
	#banner {height: 300px;}
	#slideshow {height: 300px;}
	#circle {height: 9px;}
	#color-bar {font-size: .75em;}
	h1 {font-size: 1em;}
	h2{font-size: .8em;}
	
	
	
	
}

@media only screen and (max-width: 480px) {
	nav li {width:100%; display: block; text-align: center; background-color: #a32973; text-color: #fff;}
	#banner {height: 200px;}
	section {width: 100%; float: none; align-content: center;}
	aside {width: 90%; float: none; align-content: center;}
	.shop-box img {display: block;}
	#footer-left, #footer-right {display: block;}
	
	
	
	
	
}