@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Lato&display=swap');



header {width: 100%;
margin: 0 auto;
position: relative;}

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

}

nav li {display:inline-block;}

nav a {padding:.52% 2.08%; color: #16325a;
text-decoration:none; 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:1.04% 0; font-family: 'Goudy Bookletter 1911', serif;}

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

section {width:60%;
padding: 0 1.04%;}

section h1 {font-size: 2.25em;
text-transform: uppercase;font-family: 'Goudy Bookletter 1911', serif;}

section p {font-size: 1em; line-height: 1.5; margin-top:15px;}

aside {width: 31.25%; border: 3px solid #16325a; padding:1.04% 1.04%;
font-family: 'Lato', sans-serif; position: relative;}

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

}
aside h2 {text-align: center; margin:10px 0;
color: #a32973;
font-size: 1.25em;font-family: 'Goudy Bookletter 1911', serif;
text-transform: uppercase;}

.uppercase {text-transform: uppercase;}

aside img {display: block; margin: 0 auto;
padding: 1.04%;}

#wrapper-shop {width: 100%; background-color:#f4f3f0;padding: 5.2% 0;}
#wrapper-shop h1 {
    text-align: center;
    font-family: 'Goudy Bookletter 1911',serif;
    text-transform: uppercase;
    color:#a32973;
    font-weight: bold;
    padding: 2.08% 0 0 0;
}

#shop-content { width:100%; margin:0 auto;
display: flex;}

.shop-box { width: 31.25%; display: block; margin: 0 auto;}

#shop-content h3 {color: #a32973;
text-transform: uppercase;padding: 3.33%;
font-size: 1.25em;
font-family: 'Goudy Bookletter 1911', serif;}

#shop-content p {line-height: 1.5;
font-size: .875em;margin: 10px 0 20px 0;
font-family: 'Lato', sans-serif;
font-weight: bold;}

#team h3,
#shop-box h3 {
    text-transform: uppercase;
    color:#a32973;
    font-family: 'Goudy Bookletter 1911', serif;
    text-align: center;
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 9.33%;
    margin-left: 0;
}



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

.team p,
.shop-box p{
text-transform: uppercase;
font-weight: bold;
}



.team:first-of-type {
    margin-right: 12.6%;
}
.team:nth-of-type(2),
.team:nth-of-type(3){
    margin-left: 12.5%;
    margin-right: 12.5%;
}
.team:last-of-type {
    margin-left: 12.6%;
}





.shop-box a {text-decoration: none; text-align: center; background-color: #a32973;
color: #fff; font-size: .875em; padding:1.67%; margin-top:20px;}

#footer-content {width: 100%; margin: 0 auto;
display: flex;}

footer{ background-color:#16325a;
color:#fff; padding:2.08% 0;}

#footer-left {width: 40%; }

#footer-right{width: 40%; 
margin-left: 32.25%;text-align: left;}

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

#footer-content p {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*/
        height: 34.8%; /*334*/
        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:#fff;
        margin-bottom: 40px;
        opacity: 1;
    }

    .mask:hover .learn{
        background-color:#16325a;
        color:#fff;
        font-family: 'lato', sans-serif;
        font-size: 1.25em;
        opacity: 1;
        text-transform: uppercase;
        padding-top: 16px;
        padding-bottom: 16px;
        padding-right: 1.03%;
        padding-left:1.03%;
        text-align: center;
        text-decoration:none;
    }

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

    #circle-nav{

        margin-top: -50px;
        text-align: center;
        
    }

    @media only screen and (max-width: 1024px) {
        @media only screen and (max-width: 1024px) {
            #header-content {
                display: flex;
                align-items: center;
               
            }
        #slideshow{width: 80%;
        }
    
            #header-content img {
                display: block;
                margin: 0 auto;
            }
        
            nav {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-grow: 1;
            }
        
            nav ul {
                display: flex;
                justify-content: space-around;
                width: 100%;
                padding: 0;
                margin: 0;
                list-style: none;
            }
        
            nav li {
                display: inline-block;
            }
        
            .circle {
                width: 9px;
                height: 12px;
            }
        
            #color-bar {
                font-size: 10px;
            }
        
            h1 {
                font-size: 24px;
            }
        
            h2 {
                font-size: 18px;
            }
        
            #shop-content {
                display: flex;
                flex-direction: column; 
                align-items: center;    
            }
            
            .shop-box {
                margin: 20px 0;
                width: 100%;    
                max-width: 800px; 
                display: flex;
                flex-direction: column; 
                align-items: center;   
                text-align: center;  
            }
            
            .shop-box img {
                width: 100%;    
                height: auto;   
                margin-bottom: 10px; 
            }
            
            .shop-box h3 {
                margin: 10px 0; 
            }
            
            .shop-box p {
                margin: 10px 0; 
            }
            
            .shop-box a {
                margin-top: 10px; 
            }
            
            
        }
    }  
    
    

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

    #header-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
#slideshow{width:70%;}
    #header-content img {
        display: flex;
        margin: 0 auto;
    }

    nav{
        display:flex;
        justify-content:center;
        margin-top: 10px;
    }

    nav ul {
        padding: 0;
        margin: 0;
    }

    nav li {
        display: block;
        text-align: center;
        margin: 10px 0;
        background-color: #a32973; 
    }

    nav li a {
        display: block; 
        text-decoration: none; 
    }

    section {
        width: 100%;
        float: none;
    }

    #shop-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #shop-content img {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #team {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    aside {
        width: 90%;
        display: block;
        align-items: center;
    }

    #footer-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0 auto;
    }

    #footer-left, #footer-right {
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }
}