.frontpage-banner {
width: 100%;
height: 50vw;
background-size: cover;
background-color: #ffe5ee;
}

/* BOOK CONTENTS BOOK CONTENTS BOOK CONTENTS BOOK CONTENTS BOOK CONTENTS */

@media screen and (min-width: 801px) {
.smallscreen {
display: none;
}
}

.bookcontents-banner {
width: 100%;
height: 50vw;
background: linear-gradient(to bottom,rgba(255,255,255,1)0%,rgba(255,0,102,1)100%);
}

.category {
float: left;
position: relative;
width: 50%;
height: 50%;
background-size: cover;
-webkit-transition: .4s ease-in-out opacity;
-moz-transition: .4s ease-in-out opacity;
-o-transition: .4s ease-in-out opacity;
transition: .4s ease-in-out opacity;
}

.category:hover {
opacity: 0.5;
}

.smallscreen-category {
float: left;
position: relative;
width: 100%;
height: 50vw;
background-size: cover;
-webkit-transition: .4s ease-in-out opacity;
-moz-transition: .4s ease-in-out opacity;
-o-transition: .4s ease-in-out opacity;
transition: .4s ease-in-out opacity;
}

.smallscreen-category:hover {
opacity: 0.5;
}

.categorytext
{position: absolute;
bottom: 0;
right: 0;
background-color: #ff0066;
padding: 1vw;
font-size: 2vw;
color: white;
text-transform: uppercase;

}

@media screen and (max-width: 800px) {
.largescreen {
display: none;
}

.categorytext {
font-size: 4vw;
}

}

/* BOOK PAGES BOOK PAGES BOOK PAGES BOOK PAGES BOOK PAGES BOOK PAGES */

.banner {
width: 100%;
height: 100%;
background-position: center bottom;
background-repeat: no-repeat;
z-index: -1;
background-size: cover;
border: 0;
outline: 0;
}



.bannerfade {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: transparent;
background: linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(255,255,255,1)100%);
background: -moz-linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(255,255,255,1)100%);
background: -ms-linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(255,255,255,1)100%);
background: -o-linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(255,255,255,1)100%);
background: -webkit-linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(255,255,255,1)100%);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
outline: 0;
border: 0;
}



.bookheader {
    width: 100%;
	z-index: -1;
    height: 50vw;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
	outline: 0;
	border: 0;
    background-color: #ffc5c4;
    -webkit-transition: height 0.8s;
    -moz-transition: height 0.8s;
    -ms-transition: height 0.8s;
    -o-transition: height 0.8s;
    transition: height 0.8s;
}