html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 4rem;
    font-family: 'Open Sans',sans-serif,Arial;
    background:#0d0b00;
}
.navbar{
    background:rgba(24, 18, 0, 1.0);
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 4rem;
    color: #FFFAFA;
}
.dropdown-menu{
    margin-top:-.5em;
    background:rgba(24, 18, 0, 1.0);
}
.dropdown-item:hover{
    background:rgba(24, 18, 0, 0.9);
}
.dropdown-item:active{
    background:rgba(24, 18, 0, 0.9);
}
.dropdown-toggle::after{
    display:none;
}
h1,.sectionHeader h2,.rowHeader h2,.navbar h4,.dropdown-menu h5{
    font-family: 'Cinzel Decorative',sans-serif,Arial;
    font-weight:800;
    color: #FFFAFA;
    text-shadow: .05rem .05em 0 #000,
        -.05rem -.05rem 0 #000,
        .05rem -.05rem 0 #000,
        -.05rem .05rem 0 #000,
        .05rem .05rem 0 #000;
}
.navbar h4:hover,.dropdown-menu h5:hover{
    color: #EEE9E9;
    cursor: pointer;
}
.row{
    padding-bottom:1rem;
}

.sectionHeader{
    padding-top:.5rem;
}

.rowHeader{
    padding-top:1em;
    padding-bottom:.5rem;
}
h2,h3,h4,h5{
    font-family: 'Montserrat',sans-serif,Arial;
}

.container{
    background-color:rgba(0, 0, 0, 0.0);
}

.footer{
    background:rgba(0, 0, 0, 0.40)
}
.navbar-nav .nav-link{
    color: #FFFAFA;
}
.navbar-brand{
    width: 80%;
    max-width: 400px;
}
.row.w-100{
    text-align:center;
    max-width:1200px;
}

.card-footer .btn {
    width:100%
}

@media (max-width: 575px) {
    body {
        margin-bottom: 4rem;
    }
    .navbar{
        background:rgba(0, 0, 0, 1.00)
    }
    h1 {
        font-size: 1.9rem;
    }
    h2 {
        font-size: 1.75rem;
    }
    h3 {
        font-size: 1.5rem;
    }
    h4 {
        font-size: 1.25rem;
    }
    .lead,h5 {
        font-size: 1rem;
    }
    h6 {
        font-size: .5rem;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.75rem;
    }
    h3 {
        font-size: 1.5rem;
    }
    h4 {
        font-size: 1.25rem;
    }
    .lead,h5 {
        font-size: 1rem;
    }
    h6 {
        font-size: .75rem;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.75rem;
    }
    h3 {
        font-size: 1.5rem;
    }
    h4 {
        font-size: 1.25rem;
    }
    .lead,h5 {
        font-size: 1rem;
    }
    h6 {
        font-size: .75rem;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 2rem;
    }
    h3 {
        font-size: 1.75rem;
    }
    h4 {
        font-size: 1.5rem;
    }
    h5 {
        font-size: 1.25rem;
    }
    h6 {
        font-size: 1rem;
    }
}

@media (min-width: 1200px) {
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 2rem;
    }
    h3 {
        font-size: 1.75rem;
    }
    h4 {
        font-size: 1.5rem;
    }
    h5 {
        font-size: 1.25rem;
    }
    h6 {
        font-size: 1rem;
    }
}

.btn-primary {
    color: #000;
    background-color: #FFFFF0;
    border-color: #FFFFF0;
}
.btn-primary:hover {
    color: #000;
    background-color: #EEEEE0;
    border-color: #EEEEE0;
}
.btn-primary:active {
    color: #000;
    background-color: #CDCDC1;
    border-color: #CDCDC1;
}


img.lettero {
    position: absolute;
    top:0;
    left:0;
}

/* entire container, keeps perspective */

.bookCover img {
    margin-left: auto;
    margin-right: auto;
}

.bookCover {
  -webkit-perspective: 1000;
  perspective: 1000;
  cursor: pointer;
}

.bookCover.flipped .back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.bookCover.flipped .front {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

/* flip speed goes here */

.card {
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  background:none;
  width: 100%;
  height: 100%;  
  text-align: center;
}

/* hide back of pane during swap */

.front,
.back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  text-align: center;
}

/*  UPDATED! front pane, placed above back */

.front {
  z-index: 2;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

/* back, initially hidden pane */

.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
}

.card-block {
    background:#FFFFFF;
    height:100%;
    overflow:auto;
    text-align:left;
}

.card-footer{
    background:none;
}

.hidden {
    display:none;
}

.invisible {
    visibility:hidden;
}