.note{
	position:fixed;
	bottom:-100%;
	left:0;
	right:0;
	color:#fff;
	background:rgba(0,0,0,0.75);
	padding:30px 0;
	z-index:10000;

	-moz-animation-name: note-animate;
	-moz-animation-delay: 1s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: ease-out;
	-moz-animation-duration: 2s;
	-moz-animation-fill-mode: forwards;

	-webkit-animation-name: note-animate;
	-webkit-animation-delay: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-duration: 2s;
	-webkit-animation-fill-mode: forwards;

	animation-name: note-animate;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

.note a{
	color:#fff;
	text-decoration: underline;
}

.note a:hover{
	text-decoration: none;
}

form.note_form{
	display:inline-block;
	margin-right:10px;
}

form.note_form input{
	background:#96BE1F;
	color:#fff;
	border:0;
	padding:5px 10px;
}


@-moz-keyframes note-animate {
	0% {
		bottom:-100%;
	}
	100% {
		bottom:0;
	}
}
@-webkit-keyframes note-animate {
	0% {
		bottom:-100%;
	}
	100% {
		bottom:0;
	}
}
@keyframes note-animate {
	0% {
		bottom:-100%;
	}
	100% {
		bottom:0;
	}
}





#note_youtube{
	opacity:0;
	position:fixed;
	left:0;
	right:0;
	top:200%;
	bottom:0;
	z-index:998;
	background:rgba(255,255,255,0.3);

	transition: 0.5s all linear;
}

#note_youtube.active{
	top:0;
	opacity:1;
}

#note_youtube .inner{
	display:block;
	background:#fff;
	width:360px;
	height:240px;
	padding:30px;
	box-shadow: 0 0 10px rgba(0,0,0,0.8);

	position:absolute;
	top:50%;
	left:50%;
	margin:-120px 0 0 -180px;
	z-index:2;
}