/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 31, 2022 */
                
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@200;400;600;900&display=swap');
                

/* Type Scale: Perfect Fourth

3.157em
2.369em
1.777em
1.333em
1em
.75em
.563em
.422em


Colors:

#CC0000; #; # #; #; #;

*/

/* Basic Clearing and Start Code */
*{
    padding: 0px;
    border: 0px;
    margin: 0px;
    box-sizing: border-box;
}

/* Type Scale: Perfect Fourth

3.157em
2.369em
1.777em
1.333em
1em
.75em
.563em
.422em


Colors:

#f2f2f2; #444; #fff; #EA0029; #; #;

*/

/* Body */
body{
    margin: auto;
    font-family: 'Sofia Sans', sans-serif;
    letter-spacing: .02em;
    background-color: #f2f2f2;
    color: #444;
}

h1{
    font-size: 1.333em;
    font-family: 'Sofia Sans', sans-serif;
    color: #444;
    font-weight: 400;
}

h2{
    font-family: 'Sofia Sans', sans-serif;
    font-size: 1.333em;
    font-weight: normal;
    letter-spacing: .02em;
    }

h3{
    font-family: 'Sofia Sans', sans-serif;
    font-size: 1.333em;
    font-weight: normal;
    letter-spacing: .02em;
}

h4{
    font-family: 'Sofia Sans', sans-serif;
    font-size: x.xxxem;
    letter-spacing: .xem;
}



/* FIXED HEADER */
.fixed-Bar{
    width: 100%;
    left: 0%;
    position: fixed;
    z-index: 10;
}

#headerSpaceRed{
    height: 50px;
    background-color: #fff;
}
/* END */

/* HEADER MENU BAR START */
.nav-Bar{
    width: 100%;
    display: flex;
    text-align: center;
    background-color: #fff;
    filter: drop-shadow(0.2em 0 0.2em #444);
}

.nav-Logo{
    width: 30%;
}

.nav-Logo a{
    padding: 22px 0;
    display: block;
}

a.underline{
    position: relative;
}

a.underline::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #EA0029;
    visibility: hidden;
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: all 0.3s ease-in-out;
}

a.underline:hover::before {
    visibility: visible;
    transform: scaleX(1);
}

.nav-Title{
    width: 100%;
}

.nav-Logo img{
    width: 100%;
    padding: 0 10px;
    align-content: center;
    text-align: center;
}

.nav-List{
    width: 100%;
    height: 80px;
    margin-top: 22px;
    list-style-type: none;
    font-size: .6em;
    font-weight: 900;
    letter-spacing: .06em;
    display: flex;
    overflow: hidden;
}

.nav-List li{
    width: 25%;
}

.nav-List-Logo a{
    width: 100%;
    line-height: 80px;
    text-decoration: none;
    display: block;
}

.nav-List-Title a, .nav-Drop a{
    width: 100%;
    font-size: 1.333em;
    line-height: 80px;
    text-decoration: none;
    display: block;
}

.drop-Menu{
    width: 20%;
    position: absolute;
    background-color: #fff;
    border-radius: 0 0 0.5rem 0.5rem;
    display: none;
}

.drop-Menu li{
    width: 100%;
    line-height: 40px;
    list-style: none;
    font-size: .6em;
    /*border-top: 1px solid #888;*/
}

.drop-Menu a{
    width: 100%;
    padding: 10px;
    line-height: 40px;
    display: inline-block;
    text-align: center;
}

.nav-List-Title a:hover, .nav-Drop a:hover, .drop-Menu a:hover{
    color: #EA0029;
}
/* END */

/* Type Scale: Perfect Fourth

3.157em
2.369em
1.777em
1.333em
1em
.75em
.563em
.422em


Colors:

#CC0000; #990000; # #; #; #;

*/

/* Main */
header{
    height: 50px;
}

.homeContentContainer {
    max-width: 2100px;
    margin: 0 auto;
    padding: 75px 20px 20px;
    box-shadow: 20px 20px 50px 50px #f2f2f2 inset;
}

.homeContent h1{
    text-align: center;
}

.homeContent h1 span, introContainer h1 span{
    font-size: 1.333em;
}

.homeContent p{
    width: 100%;
    padding: 20px;
    font-size: .85em;
}

.homeContent span{
    color: #EA0029;
}

.homeBooksContainerMobile{
    display: flex;
    flex-wrap: wrap;
}

.homeBooks {
    width: 25%;
}

.homeBooksContainer{
    width: 100%;
    display: none;
    flex-wrap: wrap;
}

.homeBooks{
    max-width: 100px;
    margin: 0 auto;
    padding: 10px;
}

.homeBooks img{
    width: 100%;
    box-shadow: 8px 5px 10px #888;
}

.affiliateLogos{
    width: 100%;
    padding: 20px;
    background-color: #fff;
    display: flex;
    box-shadow: 2px 2px 5px 2px #999;
}

.affiliateLogos img{
    width: 20%;
    padding: 20px;
}

.footerSpace{
    height: 20px;
    background-color: #fff;
    box-shadow: 2px 2px 5px 2px #999;
    display: block;
}

hr{
    display: block;
    border-style:solid;
    border-width: 2px;
    border-color: #EA0029;
}

/* Footer */
footer{
    text-align: center;
    background-color: #f2f2f2;
}

.footer-Container{
    padding: 0 20px;
}

.copyright {
    max-width: 500px;
    margin: 0 auto;
    padding: 10px;
    font-size: .75em;
    letter-spacing: .02em;
}

.copyright-Links a{
    padding: 10px;
}

/* End Basic Clearing and Start Code End*/

/* MEDIA QUERY 2 */

/* Type Scale: Perfect Fourth

3.157em
2.369em
1.777em
1.333em
1em
.75em
.563em
.422em

Colors:

#CC0000; #990000; # #; #; #;

*/

@media only screen and (min-width: 770px){
    
    .nav-Logo img{
        margin-top: 0px;
        max-width: 145px;
        padding: 0px;
    }
    
    .nav-Logo a{
        padding: 10px 0;
    }
    
    .nav-List-Title a, .nav-Drop a{
        font-size: 1.777em;
    }
    
    .drop-Menu li{
        font-size: .8em;
    }
    
    .homeBooksContainerMobile{
        display: none;
    }
    
    .homeBooksContainer{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    
    .homeContent h1, .introContainer h1{
        font-size: 1.777em;
    }

    .homeContent p{
        width: 100%;
        padding: 20px;
        font-size: 1em;
        line-height: 1.5em;
    }

    .homeContent span{
        color: #EA0029;
    }

    .affiliateLogos img{
        max-width: 250px;
        margin: 0 auto; 
    }
    
/* Footer */
.copyright {
    width: 100%;
    margin: 0 auto;
}
    
}

@media only screen and (min-width: 1400px){
    
    .homeContentContainer{
        display: flex;
        flex-direction: row-reverse;
    }
    
    .homeContent{
        width: 50%;
        margin-top: 6%;
        padding: 10px;
    }
    
    .homeContent h1{
        text-align: left;
        padding: 20px;
    }
    
    .homeContent h1, .introContainer h1{
        font-size: 2.369em;
    }

    .homeContent p{
        width: 100%;
    }
    
    .homeBooksContainer{
        width: 100%;
        padding-top: 20px;
    }

    .homeBooks{
        max-width: 230px;
        padding: 2%;
    }

    .homeBooks img{
        width: 100%;
    }
    /*box-shadow: 20px 20px 100px 20px #999 inset;*/
}




/* Links

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

*/

/* Type Scale: Goes Here

3.157em
2.369em
1.777em
1.333em
1em
.75em
.563em
.422em

Colors:

#CC0000; #990000; # #; #; #;

*/

/* LINK EFFECTS */

.nav-Logo a:hover{
    transition: .3s;
    opacity: .10;
}

li.nav-Drop {
  display: inline-block;
}

.nav-Drop:hover .drop-Menu{
    display: block;
}

a, li a, .copyright-Links a:link{
    color: #444;
}

a, li a, .copyright-Links a:visited{
    color: #444;
}

a:hover{
    color: #EA0029;
}

.copyright-Links a:hover{
    color: #EA0029;
}

a, li a:active{
    color: #444;
}