@font-face {
  font-family: RobotaSerif;
  src: url('/assets/fonts/RobotaSerif-Regular.ttf');
}
body, header, .banner, footer  {
    width: 100%;
    max-width: 100% !important;
    margin: auto;
}
.container, .brand_logo {
    width: 90%;
    max-width: 90% !important;
    margin: auto;
}
@media (min-width: 1580px) {
    .sidebar {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    .content {
        -ms-flex: 0 0 80%;
        flex: 0 0 80%;
        max-width: 80%;
    }
}
.page-offline-search > .container > .row > .content,
.page-product > .container > .row > .content,
.page-account_login > .container > .row > .content,
.page-product_listing > .container > .row > .content,
.page-checkout > .container > .row > .content,
.page-categories > .container > .row > .content,
.page-accessibility > .container > .row > .content,
.page-categories > .container > .row > .content,
.page-checkout_step_4 > .container > .row > .content
{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
}

body {
    font-family: RobotoSerif;
}

.side-navigation a:nth-child(4) {
   display:none;
}

li.link-categories {
    display: none;
}

#raw-sidebar {
    background-color: #e3e7eb;
    padding: 25px;
    margin-bottom: 12px;
}

#booklist {
    margin-bottom: 12px;
}

.raw-title {
    text-align: center;
    font-size: 135%;
    font-weight: normal;
    color: #7692a0;
    padding-bottom: 10px;
}


h1, h2, h3, h4, h5 {
    font-family: RobotoSerif;
    color: #000000;
}

header {
    border-bottom: 2px solid #afb0b3;
}

p {
    color: black !important;
}

@media only screen and (max-width: 990px) and (min-width: 760px)  {
    /* Centering featured items when rows of two are displayed */
    .featured-item {
        left: 20%;
    }
}

.header-logo-links {
    padding: 0;
}

.split-bottom {
    background:url('/media/fantasticheaderbkgd.jpg') no-repeat center center;background-size:cover;
}

.nav-item a {
    color: black !important;
    text-transform: capitalize !important;
}
.nav-item a:hover {
    background-color: #7692a0 !important;
    color: white !important;
    text-transform: capitalize !important;
}
.banner {
    border-top: 4px solid #7692a0;
    border-bottom: 2px solid #7692a0;
    background-color: white !important;
}

footer table div {
    /* make the footer stretch across the screen */
    position: relative;
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
    margin-top: 10px;
}
footer {
    padding-bottom: 0;
}

.footer-contact ul li i {
    color: white !important;
    border: 1px solid white !important;
}

/* Change default color of footer text */
.footer-nav ul li, footer ul li,
.footer-nav ul li a, footer ul li a,
footer p.copy-right a,
footer p.copy-right {
    color: white !important;
}

/*to add underline on hover in footer*/
.footer-nav ul li a:hover, footer ul li a:hover,
footer p.copy-right a:hover {
    color: #000000 !important;
    border-bottom: 2px solid;
}

footer h4 {
    font-family: RobotoSerif;
    color: white !important;
    border-bottom: 2px solid
}

/*change color of footer background*/
footer {
    background-color: #7692a0;
}

/* add color to magnifying class in search bar */
.fa-search {
    color: #ebebeb !important;
}

@media screen and (max-width:480px){
  .sidebar {
      order:2;
  }
  .content {
      order:1;
  }
}

.side_cart {
    padding: 0;
}

.cart-side {
    border: 1px solid #7692a0 !important;
    margin: 0;
    margin-bottom: 8px;
}
.cart-side h4 {
   font-family: RobotoSerif;
   color: white;
   background: #7692a0!important;
   padding: 8px;
   font-size: 1.1em;
   text-align: left;
}
.sidebar .side_cart + script + .custom-page {
    border: none;
}
.side-bar-header > h1 {
    color: white !important;
}
.side-bar-header {
    background: #7692a0 !important;
    color: white !important;
}
.side-bar-cont {
    border: 1px solid red !important;
}

/* Reduced NavBar height */
.nav_cart {
    background-color: #7692a0 !important;        
    padding-top: 0px !important;
    font-size: 90%;
}
.top_nav_right {
    background-color: #7692a0 !important;    
    height: 50px;
}
.navbar-default {
    height: 50px;
}
.navbar-list > li > a {
	padding: 6px 3px !important;
	font-size: 95%;
	color: black !important;
}

@media only screen and (max-width: 768px) {
   #hidden-nav {
       margin-top: 6px !important;
       padding: 6px 6px !important;
       font-size: 125%;
       background-color: black !important;
    }
    .container, .brand_logo {
        width: 100%;
        max-width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin: auto;
    }   
}