
<style><!--HOVER START -->
.hover-title {
display: inline;
pointer-events: auto;
cursor: pointer;
}

.hover-image {
visibility: hidden;
}

body:not(.mobile) .hover-title:hover + .hover-image {
visibility: visible;
pointer-events: none;
}

.hover-image {
display: flex;
position: fixed;
top: 20%; /* 40%; */
left: 20%;  /* 40%; */
transform: translate(-50%, -50%);  /* (-50%, -50%;) */
z-index: -1;
pointer-events: none;
flex-direction: column;
align-items: center;
justify-content: center;

/* Change width and height to scale images */
width: 70vw; /* 70vw; */
height: 70vh;  /* 70vw; */
}

.hover-image img {
max-width: 40% !important; /* 40% */
max-height: 40% !important; /* 40% */
width: auto !important;
height: auto !important;
margin-bottom: 0;
}
</style>
<style>
.hide {
display: none;
}

.myDIV:hover + .hide {
display: block;
color: blue;
}
</style>

<style>


.myButton {
box-shadow: 0px 0px 0px 2px #000000; /* #9fb4f2 */
background-color:#7892c2;
border-radius:10px;
border:1px solid #4e6096;
display:inline-block;
cursor:pointer;
color: #ffffff;
font-family:Arial;
font-size:14px;
padding:12px 37px; /* 12px 37px */
text-decoration:none;
text-shadow:0px 1px 0px #283966;
}
.myButton:hover {
background-color:#476e9e;
}
.myButton:active {
position:relative;
top:1px;
}

</style>
<style>
* {box-sizing: border-box}

/* Set height of body and the document to 90% */
body, html {
height: 90%;
margin: 0;
font-family: Arial;
}

/* Style tab links */
.tablink {
background-color: #555; /*555 */
color: yellow;
float: left;
border: line;
outline: none;
cursor: pointer;
padding: 2px 4px; /* 14 16 */
font-size: 10px;
width: 10%;
}

.tablink:hover {
background-color: #777; /*777 */
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: black;
display: none;
padding: 60px 20px; /* 100px 20px */
height: 100%;
}


</style>
<!-- DO NOT REMOVE THIS STYLE--
<style type="text/css">   ul {list-style: none;padding: 0px;margin: 0px;}   ul li {display: block;position: relative;float: left;border:1px solid #eee}   li ul {display: none;}   ul li a {display: block;background: #82cafa;padding: 5px 10px 5px 10px;text-decoration: none;            white-space: nowrap;color: white;}   ul li a:hover {background: #7892c2;}   li:hover ul {display: block; position: absolute;}   li:hover li {float: none;}   li:hover a {background: #7892c2;}   li:hover li a:hover {background: #357ect;}   #drop-nav li ul li {border-top: 0px;} </style> 
<!-- BOTTOM OF STYLE FOR MENU-->

<!-- TOP OF FLIPPING CSS HERE -------------------------------------->
<style>
.book {
transition: opacity 0.4s 0.2s; /*0.4s 0.2s  */
}
p{
margin-top: 1vw;
text-align: center;
font-size: 3vw;
color: #000000;
}
.page {
width: 30vw; /* 30vw */
height: 44vw; /* 44vw */
background-color: #c0c0c0; /*111111 */
float: left;
margin-bottom: 0.5em;
background: left top no-repeat;
background-size: cover;
}
.page:nth-child(even) {
clear: both;
}
.book {
perspective: 250vw;
}
.book .pages {
width: 60.01vw; /* 60 */
height: 44vw;
position: relative;
transform-style: preserve-3d;
backface-visibility: hidden;
border-radius: 2px;
box-shadow: 0 0 0 5px #e3dfd8;
}
.book .page {
float: none;
clear: none;
margin: 0;
position: absolute;
top: 0;
width: 30vw; /* 30vw */
height: 44vw; /* 44vw */
transform-origin: 0 0;
transition: transform 1.4s;/* 1.4 */
backface-visibility: hidden;
transform-style: preserve-3d;
cursor: pointer;
user-select: none;
background-color: skyblue; /* #f0f0f0 */
}
.book .page:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0);
transition: background 0.7s;
z-index: 2;
}
.book .page:nth-child(odd) {
pointer-events: all;
transform: rotateY(0deg);
right: 0;
border-radius: 0 4px 4px 0; /* 0 4px 4px 0 */
background-image: linear-gradient(to right, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 10%);
}
.book .page:nth-child(odd):hover {
transform: rotateY(-15deg);
}
.book .page:nth-child(odd):hover:before {
background: rgba(0, 0, 0, 0.03);
}
.book .page:nth-child(odd):before {
background: rgba(0, 0, 0, 0);
}
.book .page:nth-child(even) {
pointer-events: none;
transform: rotateY(180deg); /* 180deg */
transform-origin: 100% 0;
left: 0;
border-radius: 8px 0 0 4px; /* 4px 0 0 4px */
border-color: black;
background-image: linear-gradient(to left, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 10%);
}
.book .page:nth-child(even):before {
background: rgba(0, 0, 0, 0.2);
}
.book .page.grabbing {
transition: none;
}
.book .page.flipped:nth-child(odd) {
pointer-events: none;
transform: rotateY(-180deg);
}
.book .page.flipped:nth-child(odd):before {
background: rgba(0, 0, 0, 0.2);
}
.book .page.flipped:nth-child(even) {
pointer-events: all;
transform: rotateY(0deg);
}
.book .page.flipped:nth-child(even):hover {
transform: rotateY(15deg);
}
.book .page.flipped:nth-child(even):hover:before {
background: rgba(0, 0, 0, 0.03);
}
.book .page.flipped:nth-child(even):before {
background: rgba(0, 0, 0, 0);
}
*,
* :before,
*:after {
box-sizing: border-box;
}
html,
body {
font-family: 'Arial', Helvetica;
background: #708090; /*333 */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
height: 90%;
width: 90%;
}
body {
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 2em 0; /* 2em */
line-height: 1.5em;
}
.page:nth-child(odd){
background-position: right top;
}

</style>