.slideDown{animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideDown {0% {transform: translateY(-100%); } 50%{transform: translateY(8%); } 65%{transform: translateY(-4%); } 80%{transform: translateY(4%); } 95%{transform: translateY(-2%); } 100% {transform: translateY(0%); } } @-webkit-keyframes slideDown {0% {-webkit-transform: translateY(-100%); } 50%{-webkit-transform: translateY(8%); } 65%{-webkit-transform: translateY(-4%); } 80%{-webkit-transform: translateY(4%); } 95%{-webkit-transform: translateY(-2%); } 100% {-webkit-transform: translateY(0%); } } /* ============================================== slideUp ============================================== */ .slideUp{animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp {0% {transform: translateY(100%); } 50%{transform: translateY(-8%); } 65%{transform: translateY(4%); } 80%{transform: translateY(-4%); } 95%{transform: translateY(2%); } 100% {transform: translateY(0%); } } @-webkit-keyframes slideUp {0% {-webkit-transform: translateY(100%); } 50%{-webkit-transform: translateY(-8%); } 65%{-webkit-transform: translateY(4%); } 80%{-webkit-transform: translateY(-4%); } 95%{-webkit-transform: translateY(2%); } 100% {-webkit-transform: translateY(0%); } } /* ============================================== slideLeft ============================================== */ .slideLeft{animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft {0% {transform: translateX(150%); } 50%{transform: translateX(-8%); } 65%{transform: translateX(4%); } 80%{transform: translateX(-4%); } 95%{transform: translateX(2%); } 100% {transform: translateX(0%); } } @-webkit-keyframes slideLeft {0% {-webkit-transform: translateX(150%); } 50%{-webkit-transform: translateX(-8%); } 65%{-webkit-transform: translateX(4%); } 80%{-webkit-transform: translateX(-4%); } 95%{-webkit-transform: translateX(2%); } 100% {-webkit-transform: translateX(0%); } } /* ============================================== slideRight ============================================== */ .slideRight{animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight {0% {transform: translateX(-150%); } 50%{transform: translateX(8%); } 65%{transform: translateX(-4%); } 80%{transform: translateX(4%); } 95%{transform: translateX(-2%); } 100% {transform: translateX(0%); } } @-webkit-keyframes slideRight {0% {-webkit-transform: translateX(-150%); } 50%{-webkit-transform: translateX(8%); } 65%{-webkit-transform: translateX(-4%); } 80%{-webkit-transform: translateX(4%); } 95%{-webkit-transform: translateX(-2%); } 100% {-webkit-transform: translateX(0%); } } /* ============================================== slideExpandUp ============================================== */ .slideExpandUp{animation-name: slideExpandUp; -webkit-animation-name: slideExpandUp; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease -out; visibility: visible !important; } @keyframes slideExpandUp {0% {transform: translateY(100%) scaleX(0.5); } 30%{transform: translateY(-8%) scaleX(0.5); } 40%{transform: translateY(2%) scaleX(0.5); } 50%{transform: translateY(0%) scaleX(1.1); } 60%{transform: translateY(0%) scaleX(0.9); } 70% {transform: translateY(0%) scaleX(1.05); } 80%{transform: translateY(0%) scaleX(0.95); } 90% {transform: translateY(0%) scaleX(1.02); } 100%{transform: translateY(0%) scaleX(1); } } @-webkit-keyframes slideExpandUp {0% {-webkit-transform: translateY(100%) scaleX(0.5); } 30%{-webkit-transform: translateY(-8%) scaleX(0.5); } 40%{-webkit-transform: translateY(2%) scaleX(0.5); } 50%{-webkit-transform: translateY(0%) scaleX(1.1); } 60%{-webkit-transform: translateY(0%) scaleX(0.9); } 70% {-webkit-transform: translateY(0%) scaleX(1.05); } 80%{-webkit-transform: translateY(0%) scaleX(0.95); } 90% {-webkit-transform: translateY(0%) scaleX(1.02); } 100%{-webkit-transform: translateY(0%) scaleX(1); } } /* ============================================== expandUp ============================================== */ .expandUp{animation-name: expandUp; -webkit-animation-name: expandUp; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes expandUp {0% {transform: translateY(100%) scale(0.6) scaleY(0.5); } 60%{transform: translateY(-7%) scaleY(1.12); } 75%{transform: translateY(3%); } 100% {transform: translateY(0%) scale(1) scaleY(1); } } @-webkit-keyframes expandUp {0% {-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); } 60%{-webkit-transform: translateY(-7%) scaleY(1.12); } 75%{-webkit-transform: translateY(3%); } 100% {-webkit-transform: translateY(0%) scale(1) scaleY(1); } } /* ============================================== fadeIn ============================================== */ .fadeIn{animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn {0% {transform: scale(0); opacity: 0.0; } 60% {transform: scale(1.1); } 80% {transform: scale(0.9); opacity: 1; } 100% {transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn {0% {-webkit-transform: scale(0); opacity: 0.0; } 60% {-webkit-transform: scale(1.1); } 80% {-webkit-transform: scale(0.9); opacity: 1; } 100% {-webkit-transform: scale(1); opacity: 1; } } /* ============================================== expandOpen ============================================== */ .expandOpen{animation-name: expandOpen; -webkit-animation-name: expandOpen; animation-duration: 1.2s; -webkit-animation-duration: 1.2s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes expandOpen {0% {transform: scale(1.8); } 50% {transform: scale(0.95); } 80% {transform: scale(1.05); } 90% {transform: scale(0.98); } 100% {transform: scale(1); } } @-webkit-keyframes expandOpen {0% {-webkit-transform: scale(1.8); } 50% {-webkit-transform: scale(0.95); } 80% {-webkit-transform: scale(1.05); } 90% {-webkit-transform: scale(0.98); } 100% {-webkit-transform: scale(1); } } /* ============================================== bigEntrance ============================================== */ .bigEntrance{animation-name: bigEntrance; -webkit-animation-name: bigEntrance; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes bigEntrance {0% {transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% {transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% {transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% {transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% {transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% {transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% {transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } @-webkit-keyframes bigEntrance {0% {-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% {-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% {-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% {-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% {-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% {-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% {-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } /* ============================================== hatch ============================================== */ .hatch{animation-name: hatch; -webkit-animation-name: hatch; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; visibility: visible !important; } @keyframes hatch {0% {transform: rotate(0deg) scaleY(0.6); } 20% {transform: rotate(-2deg) scaleY(1.05); } 35% {transform: rotate(2deg) scaleY(1); } 50% {transform: rotate(-2deg); } 65% {transform: rotate(1deg); } 80% {transform: rotate(-1deg); } 100% {transform: rotate(0deg); } } @-webkit-keyframes hatch {0% {-webkit-transform: rotate(0deg) scaleY(0.6); } 20% {-webkit-transform: rotate(-2deg) scaleY(1.05); } 35% {-webkit-transform: rotate(2deg) scaleY(1); } 50% {-webkit-transform: rotate(-2deg); } 65% {-webkit-transform: rotate(1deg); } 80% {-webkit-transform: rotate(-1deg); } 100% {-webkit-transform: rotate(0deg); } } /* ============================================== bounce ============================================== */ .bounce{animation-name: bounce; -webkit-animation-name: bounce; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease; -webkit-animation-timing-function: ease; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes bounce {0% {transform: translateY(0%) scaleY(0.6); } 60%{transform: translateY(-100%) scaleY(1.1); } 70%{transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{transform: translateY(0%) scaleY(1) scaleX(1); } } @-webkit-keyframes bounce {0% {-webkit-transform: translateY(0%) scaleY(0.6); } 60%{-webkit-transform: translateY(-100%) scaleY(1.1); } 70%{-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{-webkit-transform: translateY(0%) scaleY(1) scaleX(1); } } /* ============================================== pulse ============================================== */ .pulse{animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse {0% {transform: scale(0.9); opacity: 0.7; } 50% {transform: scale(1); opacity: 1; } 100% {transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse {0% {-webkit-transform: scale(0.95); opacity: 0.7; } 50% {-webkit-transform: scale(1); opacity: 1; } 100% {-webkit-transform: scale(0.95); opacity: 0.7; } } /* ============================================== floating ============================================== */ .floating{animation-name: floating; -webkit-animation-name: floating; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes floating {0% {transform: translateY(0%); } 50% {transform: translateY(8%); } 100% {transform: translateY(0%); } } @-webkit-keyframes floating {0% {-webkit-transform: translateY(0%); } 50% {-webkit-transform: translateY(8%); } 100% {-webkit-transform: translateY(0%); } } /* ============================================== tossing ============================================== */ .tossing{animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes tossing {0% {transform: rotate(-4deg); } 50% {transform: rotate(4deg); } 100% {transform: rotate(-4deg); } } @-webkit-keyframes tossing {0% {-webkit-transform: rotate(-4deg); } 50% {-webkit-transform: rotate(4deg); } 100% {-webkit-transform: rotate(-4deg); } } /* ============================================== pullUp ============================================== */ .pullUp{animation-name: pullUp; -webkit-animation-name: pullUp; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes pullUp {0% {transform: scaleY(0.1); } 40% {transform: scaleY(1.02); } 60% {transform: scaleY(0.98); } 80% {transform: scaleY(1.01); } 100% {transform: scaleY(0.98); } 80% {transform: scaleY(1.01); } 100% {transform: scaleY(1); } } @-webkit-keyframes pullUp {0% {-webkit-transform: scaleY(0.1); } 40% {-webkit-transform: scaleY(1.02); } 60% {-webkit-transform: scaleY(0.98); } 80% {-webkit-transform: scaleY(1.01); } 100% {-webkit-transform: scaleY(0.98); } 80% {-webkit-transform: scaleY(1.01); } 100% {-webkit-transform: scaleY(1); } } /* ============================================== pullDown ============================================== */ .pullDown{animation-name: pullDown; -webkit-animation-name: pullDown; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } @keyframes pullDown {0% {transform: scaleY(0.1); } 40% {transform: scaleY(1.02); } 60% {transform: scaleY(0.98); } 80% {transform: scaleY(1.01); } 100% {transform: scaleY(0.98); } 80% {transform: scaleY(1.01); } 100% {transform: scaleY(1); } } @-webkit-keyframes pullDown {0% {-webkit-transform: scaleY(0.1); } 40% {-webkit-transform: scaleY(1.02); } 60% {-webkit-transform: scaleY(0.98); } 80% {-webkit-transform: scaleY(1.01); } 100% {-webkit-transform: scaleY(0.98); } 80% {-webkit-transform: scaleY(1.01); } 100% {-webkit-transform: scaleY(1); } } /* ============================================== stretchLeft ============================================== */ .stretchLeft{animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @keyframes stretchLeft {0% {transform: scaleX(0.3); } 40% {transform: scaleX(1.02); } 60% {transform: scaleX(0.98); } 80% {transform: scaleX(1.01); } 100% {transform: scaleX(0.98); } 80% {transform: scaleX(1.01); } 100% {transform: scaleX(1); } } @-webkit-keyframes stretchLeft {0% {-webkit-transform: scaleX(0.3); } 40% {-webkit-transform: scaleX(1.02); } 60% {-webkit-transform: scaleX(0.98); } 80% {-webkit-transform: scaleX(1.01); } 100% {-webkit-transform: scaleX(0.98); } 80% {-webkit-transform: scaleX(1.01); } 100% {-webkit-transform: scaleX(1); } } /* ============================================== stretchRight ============================================== */ .stretchRight{animation-name: stretchRight; -webkit-animation-name: stretchRight; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretchRight {0% {transform: scaleX(0.3); } 40% {transform: scaleX(1.02); } 60% {transform: scaleX(0.98); } 80% {transform: scaleX(1.01); } 100% {transform: scaleX(0.98); } 80% {transform: scaleX(1.01); } 100% {transform: scaleX(1); } } @-webkit-keyframes stretchRight {0% {-webkit-transform: scaleX(0.3); } 40% {-webkit-transform: scaleX(1.02); } 60% {-webkit-transform: scaleX(0.98); } 80% {-webkit-transform: scaleX(1.01); } 100% {-webkit-transform: scaleX(0.98); } 80% {-webkit-transform: scaleX(1.01); } 100% {-webkit-transform: scaleX(1); } }

html { 
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #333;
}

body {
    font-family: 'Source Sans Pro', sans-serif !important;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #333;    
	/*transform: scale(.5);*/
}

.loading-bar-wrapper {
    width: 100%;
    background: rgba(255,255,255,0.1);
    color: #fff;
    line-height: 32px;
    height: 32px;
}

.loading-bar-inner {
    min-width: 20%;
    height: 32px;
    padding: 0 6px;
    display: inline-block;
    text-align: center;
    transition: none !important;
}

#console {
	
	width: 600px;
	position: absolute;
	left: 32px;
	bottom: 100px;
	color: #fff;

    text-shadow: 	-1px -1px 0 #000,
					-1px  1px 0 #000,
					 1px -1px 0 #000,
					 1px  1px 0 #000; 
	
	font-family: Arial, Verdana;
	font-weight: 800;  
	font-size: 14px;
	
}

#credits {
	text-shadow: 	-1px -1px 0 #666,
		-1px  1px 0 #666,
		1px  1px 0 #666; 
	color: rgba(200,200,200,1);
	position: absolute;
	bottom: 30px;
	left: 30px;
	font-family: sans-serif;
	font-weight: 100;
	font-size: 0.8em;
}

#credits:before {
	color: rgba(155,155,155,1);
	text-shadow: 	-1px -1px 0 #666,
		-1px  1px 0 #666,
		1px  1px 0 #666; 
  content: "Image by ";
}

#img1,#img2 {
	width: 100%;
	height: auto;
	bottom: 0px;
	top: 0px;
	left: 0;
	position: absolute;
}

.meter { 
	height: 5px;
	background: rgba(55,55,55,0.5);
}

.meter_inner {
	width: 100%;
    height: 1px;
    margin: 2px 0;
    background: #2187e7;
    position: absolute;
    box-shadow: 0px 0px 6px 1px rgba(0,198,255,0.7);
	overflow: hidden;
}



			
#tickerw {
	position: fixed;
	right: 5px;
	top: 5px;
	min-width:128px;
	overflow: visible;
	
}
#ticker {
	overflow: visible;
	
	margin:0; padding:0;
}

.avatarimg {
	height: 92px;
	width: auto;
	display: block;
}

.tickerentry {
	
	
	
	display:block;
	width: 92px;
	line-height: normal;
	overflow: visible;
	margin-top: 30px;
	background-color: rgba(40,40,40,0.8);
	color:#fafafa;
	/*border-right:1px solid #333;*/
	font-size: 9px;
	text-align: left;
	font-family: sans-serif;
}
.tickerentrytxt
{
	display: block;
	padding: 4px;
	width: auto;
	white-space: normal;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

#progress {
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	
	height: 10px;
	position: fixed;
	overflow: visible;
	color: #fff;
	width: 100%;
	font-size: 12px;
	font-weight: bold;
}
#progressBG {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,8,0,1)), color-stop(24%,rgba(255,8,0,0.76)), color-stop(100%,rgba(255,8,0,0)));
	background: -webkit-linear-gradient(top,  rgba(255,8,0,1) 0%,rgba(255,8,0,0.76) 24%,rgba(255,8,0,0) 100%);
	background: linear-gradient(to bottom,  rgba(255,8,0,1) 0%,rgba(255,8,0,0.76) 24%,rgba(255,8,0,0) 100%);

	overflow: visible;
	width: 100%;
	height: inherit;
	position: absolute;
	text-align: right;
}
#progress50 {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,170,5,1)), color-stop(24%,rgba(0,170,5,0.76)), color-stop(100%,rgba(0,170,5,0)));
	background: -webkit-linear-gradient(top,  rgba(0,170,5,1) 0%,rgba(0,170,5,0.76) 24%,rgba(0,170,5,0) 100%);
	background: linear-gradient(to bottom,  rgba(0,170,5,1) 0%,rgba(0,170,5,0.76) 24%,rgba(0,170,5,0) 100%);

	overflow: visible;
	width: 33%;
	height: inherit;
	position: absolute;
	text-align: right;
}
#progressYOU {

	overflow: visible;
	width: 100%;
	height: inherit;
	border-right: 2px #FFF solid;
	position: absolute;
	text-align: right;
}
#progress99 {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,238,0,1)), color-stop(24%,rgba(255,238,0,0.76)), color-stop(100%,rgba(255,238,0,0)));
	background: -webkit-linear-gradient(top,  rgba(255,238,0,1) 0%,rgba(255,238,0,0.76) 24%,rgba(255,238,0,0) 100%);
	background: linear-gradient(to bottom,  rgba(255,238,0,1) 0%,rgba(255,238,0,0.76) 24%,rgba(255,238,0,0) 100%);

	width: 90%;
	overflow: visible;
	height: inherit;
	position: absolute;
	text-align: right;
}
#progress90 {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,238,0,1)), color-stop(24%,rgba(255,238,0,0.76)), color-stop(100%,rgba(255,238,0,0)));
	background: -webkit-linear-gradient(top,  rgba(255,238,0,1) 0%,rgba(255,238,0,0.76) 24%,rgba(255,238,0,0) 100%);
	background: linear-gradient(to bottom,  rgba(255,238,0,1) 0%,rgba(255,238,0,0.76) 24%,rgba(255,238,0,0) 100%);

	width: 90%;
	overflow: visible;
	height: inherit;
	position: absolute;
	text-align: right;
}
#progress50_1 {
	left: 40%;
	visibility: hidden;
}
#progress99_1 {
	left: 90%;
	visibility: hidden;
}
#progresssofar {
	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(165,255,0,1)), color-stop(100%,rgba(165,255,0,0)));
	background: -webkit-linear-gradient(top,  rgba(165,255,0,1) 0%,rgba(165,255,0,0) 100%);
	background: linear-gradient(to bottom,  rgba(165,255,0,1) 0%,rgba(165,255,0,0) 100%);

	height: inherit;
	overflow: visible;
	width: 0%;
	text-align: right;
	padding-right: 3px;
	position: absolute;
}