@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: 960px; 
		margin: 0 auto;
		position: relative;}

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

nav li {display: inline-block;}

nav a {padding: 5px 20px;
	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: 24px;}

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

section {width: 580px;
		padding: 15px 10px;}

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

aside {width: 280px;
		margin: 0 30px;
		border: 2px solid #16325a;
		position: relative;}

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

aside h2 {text-align: center;
		margin: 10px 0;
		color: #a32973;
		font-size: 20px;
		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;}

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

#shop-content {	width: 960px;
				margin: 0 auto;
				display: flex;}

.shop-box {	width: 300px;
			margin: 0 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: 10px;
					text-size: 28px;}

#shop-content p {text-align: center;
				line-height: 1.5;
				font-size: 14px;
				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: 14px;
			padding: 5px;}

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

#footer-content {width: 960px;
				margin: 0 auto;
				display: flex;}

#footer-left {width: 40%;}

#footer-right {width: 40%;
				margin-left: 300px;
				text-align: right;}
	
#footer-content h3 {color: FFF;
					text-transform: uppercase;
					font-size: 16px;
					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: 328px;
    	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: 32px;
				margin-top: 20%;}

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

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