/*
*	Overlay komplett (Webseite nicht anklickbar solange Hinweis erscheint)
*/
#notice {position:absolute; z-index:10;  top:0; right:0; bottom:0; left:0; width:100%; height:100%;}
#notice:before {content:""; position:absolute; z-index:1; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5);}

/*
*	Overlay nur Kopfbereich (Webseite anklickbar solange Hinweis erscheint)
#notice {position:absolute; z-index:10;  top:0; right:0; bottom:0; left:0; width:100vw; height:100vh;}
#notice:before {content:""; position:absolute; z-index:1; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.3);}
*/

#badgirl {position:relative; width:100vw; height:100vh;}

#noticebody {z-index:2; padding:2vw; font-size:1em; background-color:#fff; border:3px solid #fff; border-radius:10px; max-width:600px;}
#noticebody.scroll {top:-150px;}
#noticebody button#hide-button {display:block; border:0; margin:30px auto 0; padding:0.8em; font-size:1em; color:#fff; background-color:#426fb3;}
#noticebody button:hover {cursor:pointer;}

#noticecontent {position:relative; z-index:1; margin:10px 0 0; padding:10px; border:1px solid #f3f3f3; border-radius:10px;}
#noticecontent p {line-height:1.4;}

#notice i.icn {top:-0.7em; font-size:3em;}
#notice .icon-info-circled {z-index:2; color:#426fb3;}
#notice .icon-circle {z-index:1; color:#fff; font-size:3.5em !important; text-shadow:1px  1px 1px #fff, 1px -1px 1px #fff, -1px  1px 1px #fff, -1px -1px 1px #fff;}


/* ############################################################################################### */
/*  ------------------------------------------------------------- His  Responsiveness ------------------------------------------------------------- */
/* ############################################################################################### */


@media screen and (max-width:400px) {
#notice .vh-align {top:60%;}
#noticebody  {width:90vw; padding:3vw; font-size:0.9em;}
}/* Ende @media screen */