<!-- Cookie Notics -->
<div id="cookie_notice">
  Wir nutzen Cookies.
  <a href="#!">Warum?</a>
  <span id="cNoteAcceppt" style="">&times;</span>
</div>
<!-- End Cookie Notics -->
 

<h1>A Cookie Notice!</h1>
<p>This is just an example of a fresh Cookie Notice</p>
<button id="toggle_cookienotice">toggle</button>

@import url('https://fonts.googleapis.com/css?family=Montserrat');

#cookie_notice {
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  right: 1em;
  bottom: 1em;
  background: #2ecc71;
  color: #fff;
  padding: 1em;
  transition: all 400ms;
  transform: rotateX(90deg);
}
#cookie_notice > a {
  margin: auto;
  color: #fff;
  text-decoration: none;
  clear: both;
}
#cookie_notice > a:hover {
  text-decoration: underline;
}
#cookie_notice.active {
  transform: rotateX(0deg);
}
#cNoteAcceppt {
  font-size:1em;top:2px;right:4px;position:absolute
}

/* site styles */
body {
  background: #f1f2f6
}
#toggle_cookienotice {
  background: #1e90ff;
  font-family: 'Monsterrat', sans-serif;
  font-size: 1em;
  color: #fff;
  padding: .5em;
  border: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
#toggle_cookienotice:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
h1 {
  font-family: 'Montserrat', sans-serif;
}

/*document.addEventListener('DOMContentLoaded', function(){
  setTimeOut(function(){  
 document.getElementById('cookie_notice').classList.add('active')}, 200);
}, false);
document.getElementById('toggle_cookienotice').addEventListener('click', function() {
  document.getElementById('cookie_notice').classList.toggle('active');
}, false);*/
window.onload = function() {
  
  setTimeout(function(){  
 document.getElementById('cookie_notice').classList.add('active')}, 400);
}
document.getElementById('cNoteAcceppt').onclick=function() {
  // addcookie
  
}