﻿.nav-z {
	z-index: 3;
	position: relative;
}
#quote-container {
	margin: 18% 5% 18% auto;
	text-align: right;
	font-size: 2.4vw;
	padding: 6%;
	flex: 1 2 auto;
}
.q_footer {
	padding-top: 1%;
	margin: -1% 0% 0% -17%;
	position: absolute;
}
.q_hidden {
	opacity: 0;
}
.quote {
	opacity: 0;
	padding: 2%;
	position: absolute;
	margin-right: 25%;
}
.quote-in {
	-webkit-animation: pop-in 1.2s ease-out forwards;
	-moz-animation: pop-in 1.2s ease-out forwards;
	-o-animation: pop-in 1.2s ease-out forwards;
	-ms-animation: pop-in 1.2s ease-out forwards;
	animation: pop-in 1.2s ease-out forwards;	
}
.quote-out {
	-webkit-animation: slingshot-out 0.8s ease-in;
	-moz-animation: slingshot-out 0.8s ease-in;
	-o-animation: slingshot-out 0.8s ease-in;
	-ms-animation: slingshot-out 0.8s ease-in;
	animation: slingshot-out 0.8s ease-in;
}
.quote-idle {
	-webkit-animation: idling 8s ease forwards;
	-moz-animation: idling 8s ease forwards;
	-o-animation: idling 8s ease forwards;
	-ms-animation: idling 8s ease forwards;
	animation: idling 8s ease forwards;
	/*-webkit-animation-iteration-count: 2;
    animation-iteration-count: 2;*/
}

/*#quote-container:hover .quote {
	-webkit-transform: translate(0%,-90%);
	transform: translate(0%,-90%);
	opacity: 1;

}
#quote-container:hover .q_footer {
	-webkit-transform: translate(0%,-135%);
	transform: translate(0%,-135%);
	opacity: 1;
	-webkit-transition-delay: 0.7s;
    transition-delay: 0.7s;
}*/
#to-site {
	text-align: center;
	margin: 0vh 0% 0% 27vw;
	text-decoration: none;
	font-size: 2.4vw;
}
#to-site:after {
	content: ' ˃';
	font-size: 2.4vw;
}

.blast {
	display: inline-block;
	opacity: 0;
}
#footer-id {
	display: inline-block;
	opacity: 0;
}
/*.footer-copyright {
	margin: 0% 0% -8% 0%;
}*/
.hb-container {
	/*margin: -12vh 0% 0% 28vw;*/
	/*margin-left: 28%;*/
	bottom: 2%;
	opacity: 0;
	font-size: 2.5em;
	position: relative;
	text-align: center;
	display: none;
	cursor: default;
	/*width: auto;
	height: auto;*/
	margin: 0 auto;

}
.hb-container a {
	color: #333;
	text-decoration: none;
	cursor:pointer;
	max-width: 10vw;
}
.hb-anim {
		margin: 0 0 0 0;
		display: inline-block;
		-webkit-transition: all .3s ease-out;
		  -moz-transition: all .3s ease-out;
			-ms-transition: all .3s ease-out;
			  -o-transition: all .3s ease-out;
					transition: all .3s ease-out;
}
.hb-container:hover .hb-anim {
	-webkit-transform:translate(0%,-15%);
	   -moz-transform:translate(0%,-15%);
	    -ms-transform:translate(0%,-15%);
		 -o-transform:translate(0%,-15%);
			transform:translate(0%,-15%);
}
.hb-container:active .hb-anim {
	-webkit-transform:translate(0%, 6%);
	   -moz-transform:translate(0%, 6%);
	    -ms-transform:translate(0%, 6%);
		 -o-transform:translate(0%, 6%);
			transform:translate(0%, 6%);
}
.hb-anim::after {
	content: ' ˃';
	font-family: sans-serif;
	/*font-size: 2.6em;*/
	/*top: -1em;*/
	left: 0.3em;
	max-width: 0%;
	position: relative;
	display: inline-block !important;
	cursor: default;
	vertical-align: middle;
	-webkit-animation: arrow-back 0.4s ease-out;
	   -moz-animation: arrow-back 0.4s ease-out;
	     -o-animation: arrow-back 0.4s ease-out;
	    -ms-animation: arrow-back 0.4s ease-out;
	        animation: arrow-back 0.4s ease-out;
}
.hb-container:hover .hb-anim::after {
	-webkit-animation: arrow-bounce 0.7s ease-out forwards;
	-moz-animation: arrow-bounce 0.7s ease-out forwards;
	-o-animation: arrow-bounce 0.7s ease-out forwards;
	-ms-animation: arrow-bounce 0.7s ease-out forwards;
	animation: arrow-bounce 0.7s ease-out forwards;	
}

@keyframes pop-in {
    0%   { transform:translate(0%,-0%); opacity:0.0; }
	25%  { transform:translate(0%,-97%);  }
	40%  { transform:translate(0%,-85%); opacity:1.0; }
	55%  { transform:translate(0%,-93%); }
	75%  { transform:translate(0%,-88%); }
    100% { transform:translate(0%,-90%); opacity:1.0; }
}
@keyframes idling {
    0%   { transform:translate(0%,-90%); }
	33%  { transform:translate(3%,-94%); }
	66%  { transform:translate(-3%,-86%); }
    100% { transform:translate(0%,-90%); }
}
@keyframes slingshot-out {
    0%   { transform:translate(0%,-90%); opacity:1.0; }
	45%  { transform:translate(0%,-50%); }
	50%  { transform:translate(0%,-48%); opacity:1.0; }
	54%  { transform:translate(0%,-48%); opacity:1.0; }
	93%  { opacity:0.0; }
    100% { transform:translate(0%,-240%); opacity:0.0; }
}
/*@keyframes arrow-bounce {
    0%   { transform:translate(0%,0%);color: #333; }
	25%  { transform:translate(7%,0%);color: #FFFFEB;  }
	40%  { transform:translate(4%,0%);  }
	55%  { transform:translate(6%,0%); }
	75%  { transform:translate(4.6%,0%); }
    100% { transform:translate(5%,0%);color: #FFFFEB; }
}*/
@keyframes arrow-bounce {
    0%   { transform:translate(0%,0%);color: #333; }
	25%  { transform:translate(1.4em,0%);color: #FFFFEB;  }
	40%  { transform:translate(0.8em,0%);  }
	55%  { transform:translate(1.2em,0%); }
	75%  { transform:translate(0.92em,0%); }
    100% { transform:translate(1em,0%);color: #FFFFEB; }
}
@keyframes arrow-back {
    from { transform:translate(1em,0%);color: #FFFFEB; }
    to { transform:translate(0%,0%);color: #333; }
}
@keyframes enlarge-bounce1 {
    0%   { transform:scale(1,1); }
	25%  { transform:scale(1.4,1.4);  }
	40%  { transform:scale(1.1,1.1);  }
	55%  { transform:scale(1.28,1.28); }
	75%  { transform:scale(1.16,1.16); }
    100% { transform:scale(1.2,1.2); }
}
@keyframes enlarge-bounce2 {
    0%   { transform:scale(1,1); }
	24%  { transform:scale(1.3,1.3);  }
	55%  { transform:scale(1.14,1.14); }
    100% { transform:scale(1.2,1.2); }
}
@keyframes bounce-back {
    from { transform:scale(1.2,1.2);  }
    to { transform:scale(1,1); }
}
@keyframes enlarge-bounce {
    from { transform:scale(1,1);  }
    to { transform:scale(1.2,1.2); }
}