@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&display=swap');
@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: 65%; /*960 / 1600*/
	margin: 0 auto; 
	position: relative;}

nav {
	position: absolute; 
	bottom: 20px; right: 20px; 
	color: #16325a; 
	align-content: right; }

nav li {
	display: inline-block;}
nav a {
	padding: 5px 20px; 
	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: 15px 0; 
	font-size: 1.25em; /*20/16*/
	font-family: 'Goudy Bookletter 1911', serif;}

#wrapper-white {
	width: 80%; /*1280 / 1600*/
	margin: 30px auto; 
	display: flex; 
	justify-content: center;}

section {
	width: 45.313%; /*580 / 1280*/
	padding: 10px 10px;}
section h1 {
	font-size: 2.25em; /*36 / 16*/
	color: #a32973; 
	text-transform: uppercase; 
	font-family: 'Goudy Bookletter 1911', serif;}
section p {
	font-size: 1em; /*16 / 16*/
	line-height: 1.5; 
	margin-top: 15px; 
	font-family: 'Lato', sans-serif;}
aside {
	width: 23.438%; /*300 / 1280*/
	border: 3px solid #16325a; 
	padding: 10px 10px 30px 10px; 
	float: right; 
	position: relative; 
	text-align: center; 
	height: 100%;}

aside h2 {
	text-align: center; 
	margin: 10px 0; 
	color: #a32973; 
	font-size: 1.25em; /*20 / 16*/
	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 , #team-content {
	width: 95%;
	margin: 0 auto; 
	display: flex;}

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

.shop-box img {
	opacity: 0.7; 
	transition: opacity 2s;}

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

#shop-content h3, #team-content h3 {
	color: #a32973; 
	text-transform: uppercase; 
	text-align: center; 
	padding:10px; 
	font-size: 1.75em; /*28 / 16*/ 
	font-family: 'Goudy Bookletter 1911', serif;}

#shop-content p, #team-content p {
	text-align: center; 
	line-height: 1.5; 
	font-size: 0.875em; /*14 / 16*/
	margin: 10px 0 30px 0; 
	font-family: 'Lato', sans-serif;}

#wrapper-shop h1 {
	color: #a32973; 
	text-transform: uppercase; 
	text-align: center; 
	padding:20px 0 10px 0; 
	font-size: 1.875em; /*30 / 16*/
	font-family: 'Goudy Bookletter 1911', serif; 
	font-weight: bold;}

#shop-box p, .team p {
	text-align: center; 
	line-height: 1.5; 
	font-size: 0.875em; /*14 / 16*/
	margin: 10px 0 30px 0; 
	font-family: 'Lato', sans-serif;}

.shop-box a {
	text-decoration: none; 
	text-align: center; 
	background-color: #a32973; 
	color: #fff; 
	font-size: 0.875em; /*14 / 16*/
	padding: 10px 25px;
	font-family: 'Lato', sans-serif;}

.team a {
	text-decoration: none; 
	text-align: center; 
	background-color: #a32973; 
	color: #fff; 
	font-size: 0.875em; /*14 / 16*/
	padding: 10px 25px;; 
	font-family: 'Lato', sans-serif;}

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

.team h3, .shop-box h3 {
	text-transform: uppercase; 
	color: #a32973; 
	text-align: center; 
	font-size: 2em; /*32 / 16*/
	margin: 0px 0px 28px 0px; }

.team:first-of-type { 
	margin-right: 1%; } /*25px*/

.team:nth-of-type(2), .team:nth-of-type(3){ 
	margin-left: 1%; 
	margin-right: 1%; }

.team:last-of-type { 
	margin-left: 1%; }

footer {
	background-color: #16325a; 
	color: #fff; padding: 20px 0;}
#footer-content {
	width: 80%; 
	margin: 0 auto; 
	display: flex; 
	line-height: 1.4;}

#footer-left {
	width: 50%;}

#footer-right {
	width: 50%; 
	text-align: right;}

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

#footer-content p {
	line-height: 1.5; 
	font-family: 'Lato', sans-serif; 
	color: white; 
	font-size: 1em; /*16 / 16*/
	opacity: 70%;}

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

.book-details p {
	font-family: 'Lato', sans-serif; }

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

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; /*32 / 16*/
	color: #fff; 
	margin-top: 25%; 
	opacity: 1;}

.mask:hover p {
	font-size: 1.25em; /*20 / 16*/
	color: #fff; 
	margin-bottom: 40px; 
	opacity: 1;}

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

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

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

/* -------- RESPONSIVE WEB DESIGN -------- */

/*tablet*/
@media only screen and (max-width: 1024px) {
	
	#header-content img { 
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 2em;
		align-content: center;
		display: block;}
	
	nav {
		width: 100%;
		display: flex;
		justify-content: center;
		position: relative;
		margin-top : 20px;}

	
	#slideshow, #slideshow-wrapper, #banner { 
		height: 300px; }
	
	.circle { 
		width: 9px;
		height: 9px; }
	
	#color-bar { 
		padding: 10px 0; 
		font-size: 1em;}
	
	section p {
		font-size: .9em; /*16 / 16*/
		line-height: 1.5; }
	
	section {
		width: 60.641%; /*580 / 1280*/
		padding: 10px 10px;}
	
	aside {
		width: 29.297%; /*300 / 1280*/
		padding: 10px 10px 30px 10px; }
	
	#shop-content { 
		flex-direction: column; 
    	align-items: center;}

	.shop-box {
		width: 80%;
		padding: 30px 0;}
	
	.shop-box img {
		width: 100%;   
  		height: 200px; 
  		display: block; }
	
	section h1 {
		font-size: 2em;}
	
	.shop-box a {
		padding: 10px 10em; }
	
	.shop-box h3, .team h3 {
		margin-bottom: 1px; }	
}


@media only screen and (max-width: 480px) {

	header {width: 100%;}
	
	#header-content img {
		height: 100px;
	}

	#slideshow, #slideshow-wrapper, #banner { 
		height: 200px; }
	
	#wrapper-white {
		flex-direction: column;
	}
	
	section, aside {
		width: 100%;}
	
	aside {
		width: 90%;
		float: none;
		align-content: center;}
	
	#team-content {
		flex-direction: column;
		justify-content: center;
 		align-items: center; 
	}
	
	.shop-box a {
		padding: 10px 1em; }
	
	#footer-content {
		flex-direction: column;	}
	
	#footer-left, #footer-right {
		width: 100%;
		text-align: center;
		padding: 10px 0;}

	footer hr {
		width: 90%; 
		margin: 20px auto; 
		border-top: 1px solid #16325a;}
	
	nav {
		width: 100%;
	}
	
	nav li {
		width: 100%;
	}
	
	li a, nav {
    	align-content: center;
   		display: block;
		background-color: #a32973;
		color: #fff;
		text-align: center;
		border-bottom: 1px solid white;
		right: 0;
	}
}

/* -------- ORDER SUMMARY STYLES -------- */



#shop-content.ordersummary { 
		flex-direction: none;
		display: block;}

#shop-content.ordersummary h2 {
	width: 100%;
	color: #a32973; 
	font-size: 1.25em; 
	font-family: 'Goudy Bookletter 1911', serif;
	margin: 0;
	padding: 20px 0px;
}

table {
	display: table;
	box-sizing: border-box;
	border-color: #16325a;
	font-family: 'Lato', sans-serif;
	border-collapse: separate;
	border-spacing: 0;
}

tr:first-child th:first-child, tr:first-child th:last-child, tr:last-child td:first-child, tr:last-child td:last-child {border: 2px solid #16325a;}

tr:first-child th:first-child {border-radius: 10px 0px 0px 0px;}
tr:first-child th:last-child {border-radius: 0px 10px 0px 0px;}
tr:last-child td:first-child {border-radius: 0px 0px 0px 10px;}
tr:last-child td:last-child {border-radius: 0px 0px 10px 0px;}

table tr th, table tr td {
	border: 2px solid #16325a;
	font-size: 1em;
	padding: 10px;
}

table tr th {
	text-align: right;
	padding-right: 2em;
}

th {
	display: table-cell;
	background-color: #16325a;
	color: #fff;
}

tr {display: table-row;}

.cellctr {
	text-align: center;
}