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

/* .lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
font-style: normal;}*/

/*.goudy-bookletter-1911-regular {
  font-family: "Goudy Bookletter 1911", serif;
  font-weight: 400;
  font-style: normal;} */

header {width: 96%; /* 960/1000*/
		margin: 0 auto;
		position: relative;}

nav {text-align: center;
	position: absolute;
	width: 100%;
	bottom: 10px;
	right: 0%; /* 200/1000*/} 

nav li {display: inline-block;
		margin: 0 3%;}

nav a {padding: 5px 2%; /* 20/1000*/
	text-decoration: none;
	color: #16325a;
	font-family: "Goudy Bookletter 1911", serif;
  	font-weight: 400;
  	font-style: normal;}

nav a:hover {background-color: #16325a;
			color: #FFF;}

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

#color-bar {background-color: #a32973;
			padding: 20px 0px;
			text-align: center;
			color: #FFF;
			font-family: "Goudy Bookletter 1911", serif;
  			font-weight: 400;
  			font-style: normal;
			font-size: 1.5em;}

#wrapper-white {width: 80%;
				margin: 80px auto;
				display: flex;}

section {width: 58%; /* 580/1000*/
		padding: 15px 1%;} /* 10/1000*/

section h1 {font-size: 2.25em;
			color: #a32973;
			text-transform: uppercase;
			font-family: "Goudy Bookletter 1911", serif;
  			font-weight: 400;
  			font-style: normal;}

aside {width: 28%; /* 280/1000*/
		margin: 0 .3%; /* 30/1000*/
		border: 2px solid #16325a;
		position: relative;}

section p {font-size: 1em;
			list-style: 1.5;
			margin-top: 15px; /* 15/1000*/
			font-family: "Lato", sans-serif;
  			font-weight: 400;
			font-style: normal;}

aside h2 {text-align: center;
		margin: 10px 0;
		color: #a32973;
		font-size: 1.25em;
		font-family: "Goudy Bookletter 1911", serif;
  		font-weight: 400;
  		font-style: normal;}

.uppercase {text-transform: uppercase;}

aside img {display: block;
			margin: 10px auto;
			padding: 10px 3.5%;} /* 10/280*/

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

#shop-content {	width: 96%; /* 960/1000*/
				margin: 0 auto;
				display: flex;}

.shop-box {	width: 31.25%; /* 300/960*/
			margin: 50 auto;
			text-align: center;
			font-family: "Goudy Bookletter 1911", serif;
  			font-weight: 400;
  			font-style: normal;
			opacity: .7;
			transition: linear 1s;}

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

.shop-box:hover {opacity: 1.0;}

#shop-content h3 {color: #a32973;
					text-transform: uppercase;
					text-align: center;
					padding: 3.33%; /* 10/300*/
					text-size: 1.75em;}

#shop-content p {text-align: center;
				line-height: 1.5;
				font-size: 0.875em;
				margin: 10px 0px 30px 0px; 
				font-family: "Lato", sans-serif;
  				font-weight: 400;
				font-style: normal;}

.shop-box a {text-decoration: none;
			background-color: #a32973;
			color: #FFFFFF;
			font-size: 0.875em;
			padding: 5px 1.67%;} /* 5/300*/

footer {border: 1px solid black;
		background-color: #16325a;
		color: #FFF;
		padding: 20px 0px;}

#footer-content {width: 96%; /* 960/1000*/
				margin: 0 auto;
				display: flex;}

#footer-left {width: 40%;}

#footer-right {width: 40%;
				margin-left: 31.25%; /* 300/960*/
				text-align: right;}
	
#footer-content h3 {color: FFF;
					text-transform: uppercase;
					font-size: 1em;
					margin-bottom: 5px;
					font-family: "Goudy Bookletter 1911", serif;
  					font-weight: 400;
  					font-style: normal;}

#footer-content p {line-height: 1.5;
					font-family: "Lato", sans-serif;
  					font-weight: 400;
					font-style: normal;}

aside .book-details {opacity: 1;}

aside .book-details:hover {opacity: 0;
							transition: ease-in-out 1s;}

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


.mask {width: 117%; /* 328/280*/
    	height: 334px;
    	position: absolute;
     	top: 0;
     	left: 0;
     	text-align: center;
     	background-color: #a32973;
     	opacity: 0;
     	transition: ease-in-out 1s;}

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

.mask:hover {opacity: 1;}

.mask h2, .mask p, .learn{opacity: 0}

.mask:hover h2 {opacity: 1;
				color: white;
				font-size: 2em;
				margin-top: 20%;}

.mask:hover p {opacity: 1;
				color: white;
				font-size: 1.25em;
				margin-bottom: 15%;}

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

@media only screen and (max-width: 1024px) {
	header {width: 100%;
			text-align: center;}
	
	header img {padding: 4%;}
	
	nav li {margin: 0 7%;}
	
	#banner {height: 300px;}
	
	#color-bar {padding: 5px 0px;
				font-size: 1em;}
	
	section h1 {font-size: 1.75em;}
	
	aside {width: 40%;}
	aside h2 {font-size: 1.25em;}
	
	section p {font-size: .9em;}
	
	.shop-box {width: 100%;
				margin: 5%;}
	
	.shop-box a {padding: 5px 30%;}
	
	#shop-content {display: inline;}

	.shop-box img {width: 80%;}
	
	#shop-content h3 {font-size: 1.5em;}
}