.bkgscd {
    position: absolute;
    width: 815px;
    height: 596px;
    z-index: 1;
    left: 50px;

    background-image: url('../img/scdef_basic.png');
    background-size: 815px 596px;
}

.bkgscd_color {
    position: absolute;
    width: 815px;
    height: 596px;
    z-index: 1;
    left: 50px;

    background-image: url('../img/scdef_0.png');
    background-size: 815px 596px;

    -webkit-animation: abkgscd_color 1s ease 0s 1;
    animation: abkgscd_color 1s ease 0s 1;
}

@-webkit-keyframes abkgscd_color{
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes abkgscd_color{
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

.scdContainerNoteOff {
    position: absolute;
    z-index: 6;
    display: none;

    -webkit-animation: anim_scd_opacity 1s ease 0s 1;
    animation: anim_scd_opacity 1s ease 0s 1;
}

@-webkit-keyframes anim_scd_opacity{
    0%   {transform: translate(   0, 0); opacity: 1;}
    100% {transform: translate(350%, 0); opacity: 0;}
}

@keyframes anim_scd_opacity{
    0%   {transform: translate(   0, 0); opacity: 1;}
    100% {transform: translate(350%, 0); opacity: 0;}
}

.scdContainerNoteHided {
    position: absolute;
    background-color: seashell;
    width: 50%;
    height: 100%;
    float: right;
    display: none;
}

.scdContainerNoteShow {
    position: absolute;
    background-color: rgba(255,255,255,0.6);
    width: 40%;
    height: 90%;
    /*float: right;*/
    right: 0px;
    bottom: 0px;

    font-size: 16px;
    color: black;

    z-index: 5;

    -webkit-animation: anim_scd_showtext 1s ease 0s 1;
    animation: anim_scd_showtext 1s ease 0s 1;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.scdContainerNoteIn {
    padding: 40px;
    padding-top: 30px;
}

.scdTitle {
    font-size: 25px;
    font-weight: bold;
    color: darkslategray;

    padding-top: 15px;
    padding-bottom: 30px;
}

.scdText {
    font-size: 16px;
    font-style: italic;
    color: black;

}

@-webkit-keyframes anim_scd_showtext{
    0%   {right: 500px; opacity: 0;}
    100% {right: 0px; opacity: 1;}
}

@keyframes anim_scd_showtext{
    0%   {right: 500px; opacity: 0;}
    100% {right: 0px; opacity: 1;}
}

.scdLinkC {
    padding: 4px;
}

.scdLink {
    font-size: 16px;
    font-style: italic;
    color: black;
    background-color: white;
    height: 15px;
    width: 200px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    cursor: pointer;

    padding: 2px;
    padding-left: 6px;
    opacity: 0.5;
}

.scdLink:hover {
    font-weight: bold;
    opacity: 1;
}