body
{
font-size:18px;
font-family:Kaiti;
}

.row 
{
display: flex;
height: 100%;
font-family:Kaiti;
}

.left 
{
flex: 20%;
padding: 15px 0;
}

.left h2 
{
padding-left: 15px;
}

.right 
{
flex: 80%;
padding: 15px;
}

#mySearch 
{
font-family:Kaiti;
width: 280px;
font-size: 18px;
padding: 15px;
border: 1px solid #ddd;
}

#myMenu 
{
list-style-type: none;
padding: 0;
margin: 0;
}

#myMenu li a
{
padding: 15px;
text-decoration: none;
color: black;
display: block;
}

#myMenu li a:hover
{
background-color: #EEE;
}

.container 
{
position: relative;
width: 330px;
height: 330px; 
display: inline-block;
}

.image 
{
display: block;
width: 330px;
height: 330px;
}

.lining
{
position: relative;
width: 330px;
height: 330px; 
display: inline-block;
}

.overlay
{
position: absolute;
transition: all.5s ease;
opacity: 0;
background-color: RGB(134, 150, 167);
}

.overlayleft
{
height: 100%;
width: 0;
top:  0;
left: 0;
background-color: RGB(134, 150, 167)；
}  

.container:hover .overlay 
{
opacity: 1;
}

.text 
{
white-space: nowrap;
color: white;
font-size: 18px;
font-weight: bold;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

.container:hover .overlayleft 
{
width: 100%;
}

.flip-card 
{
background-color: transparent;
width: 450px;
height: 150px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}

.flip-card-inner 
{
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

.flip-card:hover
.flip-card-inner 
{
transform: rotateY(180deg);
}

.flip-card-front,.flip-card-back 
{
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.flip-card-front 
{
background-color: #bbb;
color: black;
}

.flip-card-back 
{
background-color: RGB(123, 139, 111);
color: white;
transform: rotateY(180deg);
}