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

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

header {width:960px;
margin:0 auto;
position:relative;
}

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

nav li {display:inline-block;}

nav a {padding:5 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:10px 0;
font-family: 'Goudy Bookletter 1911', serif;}

#wrapper-white {width:960px;
margin:30px; 
display:flex;
justify-content:space-between;}

section {width:500px; padding:10px 10px;}
section h1 {font-size:36px;
color: #a32973;
font-family: 'Goudy Bookletter 1911', serif;
text-transform: uppercase;}
section p {font-size:16px;
line-height:1.5;
margin-top:15px;
font-family: 'Lato', sans-serif;}

aside {
     width: 300px;
     height: 300px;
     float: right;
     position: relative;
     border: 3px solid #16325a;
     padding: 20px 14px 14px;
     text-align: center;
}
aside h2 {text-align:center; 
margin:10px 0;
color: #a32973;
font-family: 'Goudy Bookletter 1911', serif;
font-size:20px;}
aside img {display:block; 
margin: 0 auto;
padding:10px;}

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

.mask {
     width: 328px;
     height: 334px;
     position: absolute;
     top: 0;
     left: 0;
     text-align: center;
     background-color: #a32973;
     opacity: 0;
     transition: linear 2s;
}

.mask:hover {
     opacity: 1;
}

.mask:hover h2 {
     font-size: 32px;
     color: #fff;
     font-family: 'Goudy Bookletter 1911', serif;
     margin-top: 25%;
     opacity: 1;
}
.mask:hover p {
    font-size:20px; color:white; margin-bottom:40px; opacity: 1;font-family: 'Lato', sans-serif;}

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

.mask h2 {
     font-size: 32px;
     color: #fff;
     font-family: 'Goudy Bookletter 1911', serif;
     margin-top: 25%;
     opacity: 1;
}
.mask p {
    font-size:20px; color:white; margin-bottom:40px; opacity: 1;font-family: 'Lato', sans-serif;}

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

.uppercase {text-transform: uppercase;}

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

#shop-content {width:960px; margin:0 auto; text-align:center;}
#shop-content h3 {color:#a23973; text-transform: uppercase; padding:10px; font-size:28px;font-family: 'Goudy Bookletter 1911', serif;}
#shop-content p {line-height:1.5; font-size:14px; margin:10px 0 20px 0;font-family: 'Lato', sans-serif;}

.shop-box {width:300px; margin:0 auto;font-family: 'Goudy Bookletter 1911', serif;}
.shop-box a {text-decoration:none; text-align:center; background-color: #a32973; color: #fff; font-size: 14px; padding: 5px; margin-top:20px;}

footer {background-color: #16325a; color: #fff; padding:20px 0;}
#footer-content {width:960px; margin:0 auto; display:flex;}
#footer-content h3 {color:white; text-transform:uppercase; font-size: 16px; margin-bottom:5px;font-family: 'Goudy Bookletter 1911', serif;}
#footer-content p {line-height: 1.5;font-family: 'Lato', sans-serif;}
#footer-left {width: 40%;}
#footer-right {width: 40%; margin-left:300px; text-align:right;}

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

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

.team p {font-family: 'Goudy Bookletter 1911', serif;}

.team {width:200px; text-align:center; display:inline-block;}

.team:first-of-type {
     margin-right: 25px;
}
.team:nth-of-type(2),
.team:nth-of-type(3){
     margin-left: 24px;
     margin-right: 24px;
}
.team:last-of-type {
     margin-left: 25px;
}

/* --------- SLIDESHOW --------- */

#slideshow-wrapper {width:400%; 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; height:12px; border-radius:50%; margin-right:15px;}

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

/* Order Summary Table */


.order-summary table{
    border-collapse: separate;
    border-spacing: 0;
    width: 480px;
    border: 2px solid #1f3b63;
    border-radius: 10px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    margin: 0 auto;
}

/* Table header */
.order-summary th{
    background-color: #1f3b63;
    color: white;
    text-align: left;
    padding: 12px;
    font-weight: bold;
}

/* Table cells */
.order-summary td{
    padding: 12px;
    border-top: 1px solid #1f3b63;
    border-right: 1px solid #1f3b63;
}

/* Remove border on last column */
.order-summary td:last-child,
.order-summary th:last-child{
    border-right: none;
}

/* Alternating row colors */
.order-summary tr:nth-child(even){
    background-color: #e5e5e5;
}

/* Center numbers */
.order-summary td{
    text-align: center;
}

/* Left align label rows like Shipping, Discount etc */
.order-summary td[colspan="2"]{
    text-align: center;
    font-weight: 500;
}

.order-summary h1,
.order-summary h2{
    width:100%;
    text-align:center;
}

.order-summary h1{
    text-transform:uppercase;
    color:#a32973;
    font-family: 'Goudy Bookletter 1911', serif;
    font-size:32px;
    margin-bottom:10px;
}

.order-summary h2{
    color:#a32973;
    font-weight:normal;
    margin-bottom:40px;
}

.order-row{
    width:960px;
    margin:0 auto;
    display:flex;
    align-items:flex-start;
    gap:40px;
}

.order-row table{
    width:480px;
}

.order-row p{
    width:300px;
    font-family:'Lato', sans-serif;
    line-height:1.6;
}

.order-summary{display:block;
}