@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Lato&display=swap');
/*font-family: 'Goudy Bookletter 1911', serif;
font-family: 'Lato', sans-serif;*/
header{width:100%;}
#header-content{width:90%;margin:0 auto;position:relative;}
#header-content img{margin:1.04%}
nav{position:absolute;bottom:20px;right:15.625%/*150/960*100=12.5%*/;font-family: 'Goudy Bookletter 1911', serif;width:36.46% /*350/960*/;}
nav li {display: inline-block; padding:10px 2.08%;/*20/960*100=2.08%*/ }
nav a{text-decoration:none;}
nav a:hover{background-color:#16325a;color:white;padding:10px 2.08%;}
#banner{background-image:url("images/home-banner.jpg");height:440px;width:100%;}
#color-bar{background-color:#a32973;color:white;text-align:center;padding:10px 0;font-family: 'Goudy Bookletter 1911', serif;}
#wrapper-white {;width:90%;display:flex;margin:40px auto;}
section{width:52%}/*500/960*/
section h1{font-size:2.25em;color:#a32973;text-transform: uppercase;padding:10px 0;font-family: 'Goudy Bookletter 1911', serif;}
section p{font-size:1em;line-height:1.5;margin-top:10px;padding-right:1.04%/*10/960*100=1.04%*/;font-family: 'Lato', sans-serif;}
aside{
     width: 31.25%;/*300/960*100=31.25*/
     height: 300px;
     float: right;
     position: relative;
     border: 3px solid #16325a;
     padding: 20px 1.46% 14px /*14/960*100=1.46%*/;
	text-align: center;}
aside h2{color:#a32973;font-size:1.5625em;padding:10px 0;font-family: 'Goudy Bookletter 1911', serif;}
.uppercase{text-transform:uppercase;}
aside img{display:block;margin-left:auto;margin-right:auto;}
#wrapper-shop{background-color:#f4f3f0;width:100%; margin-bottom:20px;padding:20px 2.08% ;/*20/960*100=2.08%*/}
#wrapper-shop h1{text-align: center;font-family: 'Goudy Bookletter 1911', serif;font-size:2em;margin:0px 0px 28px 0px; }
#shop-content{width:80%;margin:0 auto;display:flex;text-align:center;}
.shop-box{width:31.25%/*300/960*100=31.25*/;margin: 50px 1.56%;/*15/960*100=1.56%*/display:inline;text-align: center;}
#shop-content h3 .team h3{font-size:1.75em; text-transform:uppercase;color:#a32973;padding:5px 0;font-family: 'Goudy Bookletter 1911', serif;}
#shop-content p .shop-box p{font-size:0.875em; margin:10px 0px 30px 0px;line-height:1.5;font-family: 'Lato', sans-serif;}
.shop-box a{text-decoration: none;color:white;background-color:#a32973; padding:10px 6.66%;display:block;margin:0 auto;width:53.33%}
footer{width:100%;background-color:#16325a; color:white;padding:20px 0}
#footer-content{width:80%;margin:0 auto;display:flex;justify-content:space-between;}
#footer-right{text-align:right}
footer-content h3{color:white;font-size:1em;text-transform:uppercase;font-family: 'Goudy Bookletter 1911', serif;}
footer-content p{color:white;font-size:1em;opacity:70%;line-height:1.5;font-family: 'Lato', sans-serif;}


/*---------Transition Effects--------*/
aside .book-details{opacity:1;}
aside .book-details:hover {opacity: 0; transition:linear 1s;}
.mask{
     width: 34.17%;/*328/960*100=34.17*/
     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;color:white;margin-bottom:40px;opacity:1;}
.mask:hover .learn{font-size:1.25em;background-color:#16325a;font-color:white;font-family: 'Lato', sans-serif;text-transform:uppercase;text-align:center;text-decoration:none;padding:16px 10.37%;}/*34/328*/
#shop-content h1{text-transform: uppercase;color:#a32973;font-family:'Goudy Bookletter 1911', serif;text-align: center;font-size: 2em;margin-top:0;margin-right:0;margin-left:0;margin-bottom:28px }
.team{width:20.83%/*200/960*100=20.83%*/;text-align: center;display: inline-block;margin-bottom: 60px}
.team:first-of-type {
     margin-right: 2.6%;/*25/960*100=2.6%*/
}
.team:nth-of-type(2),
.team:nth-of-type(3){
     margin-left: 2.5%;/*24/960*100=2.5%*/
     margin-right: 2.5%;
}
.team:last-of-type {
	margin-left: 2.6%;}/*25/960*100=2.6%*/
/*------slideshow-------*/
#slideshow-wrapper{width: 100%;height:300px}
#slideshow{width:100%;height:300px;overflow: hidden;white-space: nowrap;}
#slideshow img{width:100%;height:100%;display: inline-block;}
.circle{display:inline-block;background-color:lightgrey;width:1.25%/*12/960*100=1.25%*/;height:12px;border-radius: 50%;margin-right: 1.56%;}/*15/960*100=1.56%*/
#circle-nav{top-margin:-50px;text-align: center;}


@media only screen and (max-width: 1024px) {
	#header-content{width:100%;text-align:center;}
	#header-content img{height:100px}
nav{position:relative;bottom:0;right:0/*150/960*100=12.5%*/;font-family: 'Goudy Bookletter 1911', serif;width:80% /*350/960*/;margin:10px auto;}	
	#banner img{height:200px;}
	#banner{height:200px}
	#color-bar h3{font-size:0.875em; /*14px/16px*/
	padding:5px 0}
	wrapper-white {margin:10px auto;}
section{width:60.4%}/*580/960=.604*100=60.4%*/
section h1{font-size:1.625em;}
section p{font-size:0.75em}
aside{
     width: 40%;
     height: 250px;
	margin:10px 0;}
aside img{display:block;margin-left:auto;margin-right:auto;height:150px;}
	.mask:hover{height:250px}	
	.mask:hover h2{font-size:1.375em/*22px/16px*/}
	.mask:hover p{font-size:1em /*16px/16px*/}
	.mask:hover .learn{font-size:1em;padding:16px 5%;}
#wrapper-shop h1{text-align: center;font-family: 'Goudy Bookletter 1911', serif;font-size:1.375em;margin:0px 0px 28px 0px;}
#shop-content{display:block;}
.shop-box{width:100%/*300/960*100=31.25*/;margin:30px 1.56%;/*15/960*100=1.56%*/display:block;}
	#shop-content h3 .shop-box h3{font-size:1.375em;}
#shop-content p .shop-box p{margin:10px 0px 10px 0px;}
.shop-box a{width:80%}
	.shop-box img{min-width:100%;max-height:100px;object-position:top;object-fit: cover}
.team{width:100%;/*200/960*100=20.83%*/margin-bottom:40px;display:block}
	.circle{;width:.9375%/*12/960*100=1.25%*/;height:9px;}
	.team img{display: inline-block;padding-top:20px;margin:0 auto}
#slideshow-wrapper{width: 100%;height:225px}
#slideshow{width:100%;height:225px;overflow: hidden;white-space: nowrap;}
#slideshow img{width:100%;height:100%;display: inline-block;}
	aside p{font-size:.75em;padding-bottom:10px}
	footer-content h3{font-size:0.75em;}
footer-content p{font-size:0.75em;}
	
}

@media only all and (max-width:480px){
	#header-content img{height:80px;}	
	nav{width:100%;margin:0px auto;background-color:#a32973;}
	nav a{color:#fff;display:block;border-bottom: 1px solid white;padding:2px 0px;}
	nav a:hover{color:none;}
	nav li{margin:0px;}
	#banner{max-height:150px;}
	#banner img{height:150px;margin-bottom:0px}
	#color-bar h3{font-size:0.833em;}
	#wrapper-white{width:100%;display:block;}
	section, aside{display:block;}
	section{width:90%;margin:0px auto;}
	section h1{font-size:1em;text-align:center;}
	aside{width:90%;margin:5px auto; }
	footer{text-align:center;margin:0px;}
	footer-content{display:block;}
	#footer-left{width:80%; margin:0px auto;font-size:0.833em;padding:0px;}
	#footer-right{float:none;display:block;text-align:center;width:80%;margin:0px auto;font-size:0.833em;}
	.shop-box p, .team p{margin-bottom: 0px}
	.shop-box, .team{margin-bottom: 0px;padding-bottom:5px;}
	.circle{height:4px;}
	#slideshow-wrapper, #slideshow{height:175px;}
	
	
	
	
	
	
	
	
	
	
	
	
}