@font-face {
    font-family: 'Basic';
    src: url(../../content/font/Basic-Regular.ttf);
}
body {
    font-family: 'Basic', sans-serif;
    margin: 0;
    padding: 0;
    width: 512px;
}
#Y01 {
    display: block;
    padding: 10px;
    width: 512px;
    height: 425px;
    background-color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 10px;
    border: 4px #c8b7ec solid;
}
h1, p {
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    margin: 0;
}
h1 {
    font-size: 16px;
    color:#c8b7ec;
}
.strap {
    color:#c8b7ec;
}
p {
    font-size: 14px;
}
.buttons {
    position: relative;
    top: 10px;
    width: 162px;
    height: 180px;
    display: block;
    z-index: 11;
}
.btn {
    position: relative;
    top: 0px;
    left: 0px;
    padding: 2px;
    width: 150px;
    height: 20px;
    background-color: #fff;
    display: block;
    float: left;
    margin-bottom: 5px;
    cursor: pointer;
    border-radius: 10px;
    border: 4px #c8b7ec solid;
    text-align:center;
}
.btn:hover {
    background-color: #9cf;
}
.pos1:hover .pt1 {
    opacity: 1;
}
.pos2:hover .pt2 {
    opacity: 1;
}
.pos3:hover .pt3 {
    opacity: 1;
}
.pos4:hover .pt4 {
    opacity: 1;
}
.pos5:hover .pt5 {
    opacity: 1;
}
.human {
    position: absolute;
    top: 10px;
    left: 0px;
    width: 512px;
    height: 420px;
    background-color: transparent;
    -webkit-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
}
.slice {
    position: absolute;
    top: 10px;
    left: 310px;
    width: 190px;
    height: 420px;
    background-repeat: no-repeat;
    background-size: 100%;
    opacity: 0;
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}
.text {
    position: relative;
    width: 300px;
    height: auto;
    display: block;
    text-align: justify;
}
.text p {
    font-size: 12px;
}
.pt {
    background-image: url(../../content/img/humanbody-01.png);
}
.pt1 {
    background-image: url(../../content/img/skeleton-01.png);
}
.pt2 {
    background-image: url(../../content/img/musculaesystem-01.png);
}
.pt3 {
    background-image: url(../../content/img/nervoussystem-01.png);
}
.pt4 {
    background-image: url(../../content/img/respiratorysystem-01.png);
}
.pt5 {
    background-image: url(../../content/img/cardiovascularsystem-01.png);
}
.pt1 .text, .pt2 .text, .pt3 .text, .pt4 .text, .pt5 .text {
    top: 240px;
    left: -300px;
}
.show {
    opacity: 1;
}
