@keyframes fadeUp{
    from{
    transform: translatex(100px);
    opacity: 0;
    }
    to{
    opacity: 1;
    }
}

.newslettersubscribe .container {
position: relative;
top: -40px;
}
.newslettersubscribe .container small {
margin-top: -10px;
}

.newslettersubscribe .container .buttonnew {
color: #283242;
background: #FFA000;
font-weight: bold;
}

.newslettersubscribe .container .buttonnew:hover {
background: #eee;
color: #283242;
}


.newslettersubscribe {
position: fixed;
z-index: 999999999999999999999999999999999999999999999999999999999999999999999 !important;
top: 30px;
float: right;
display: block;
right: -4px;
padding: 10px;
padding-right: 15px;
font-size: 15px;
background: #eee;
border: 3px solid #283242;
color: #283242;
border-radius: 3px;
width: 290px;
height: 200px;
animation-name: fadeUp;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 5s;    /*For X waiting time change the value to Xs*/
-webkit-animation-delay: 5s; /* Safari 4.0 - 8.0 */
animation-fill-mode: backwards;


}


.control-me {
  /* Default state */
}
#toggle:checked ~ .newslettersubscribe {
position: fixed;
z-index: 999999999999999999999999999999999999999999999999999999999999999999999 !important;
top: 30px;
float: right;
display: block;
right: -321px;
padding: 10px;
padding-right: 15px;
font-size: 15px;
background: #eee;
border: 3px solid #283242;
color: #283242;
border-radius: 3px;
width: 290px;
height: 180px;
animation-name: fadeUp;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 5s;    /*For X waiting time change the value to Xs*/
-webkit-animation-delay: 5s; /* Safari 4.0 - 8.0 */
animation-fill-mode: backwards;


}

.toggleelement {
cursor: pointer;
position: relative;
left: -48px;
background: #283242;
font-weight: bold;
color: #fff;
height: 35px !important;
line-height: 0.65em; 
#width: 50px; 
padding: 6px;
padding-left: 11px;
padding-right: 11px;
font-size: 24px;
border-bottom-left-radius: 18px;
border-top-left-radius: 18px;
}