/*! normalize.css 2012-02-07T12:37 UTC - http://github.com/necolas/normalize.css */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:hover,a:active{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}pre,code,kbd,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}


html, body {
	height: 100%;
	width: 100%;
	overflow: hidden;
}
body {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	color:black;
}

a, a:visited, a:active {
	color: black;
	text-decoration: none;
	-webkit-transition: 0.1s linear;
	-moz-transition: 0.1s linear;
	-o-transition: 0.1s linear;
	transition: 0.1s linear;
}
a:hover {
	opacity: 0.7;
	text-decoration:none;
}

canvas {
	z-index: -1;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity:0.7;
}

.background {
	z-index: -1;
	position: absolute;
	left: 0;
	top: 0;
	background: url(../img/tv-test-pattern.jpg) no-repeat;
	background-size: cover;
	opacity: 0.1;
	width: 100%;
	height: 100%;
	-webkit-animation: flicker 8s linear infinite;
	-moz-animation: flicker 8s linear infinite;
	-ms-animation: flicker 8s linear infinite;
	-o-animation: flicker 8s linear infinite;
	animation: flicker 8s linear infinite;
}

@-webkit-keyframes flicker {
0% {
opacity: 0.1;
}
10% {
opacity: 0.2;
}
20% {
opacity: 0.1;
}
30% {
opacity: 0.1;
}
40% {
opacity: 0.02;
}
50% {
opacity: 0.5;
}
55% {
opacity: 0.1;
}
75% {
opacity: 0.1;
}
80% {
opacity: 0.2;
}
}
@-moz-keyframes flicker {
0% {
opacity: 0.1;
}
10% {
opacity: 0.2;
}
20% {
opacity: 0.1;
}
30% {
opacity: 0.1;
}
40% {
opacity: 0.02;
}
50% {
opacity: 0.5;
}
55% {
opacity: 0.1;
}
75% {
opacity: 0.1;
}
80% {
opacity: 0.2;
}
}
@-o-keyframes flicker {
0% {
opacity: 0.1;
}
10% {
opacity: 0.2;
}
20% {
opacity: 0.1;
}
30% {
opacity: 0.1;
}
40% {
opacity: 0.02;
}
50% {
opacity: 0.5;
}
55% {
opacity: 0.1;
}
75% {
opacity: 0.1;
}
80% {
opacity: 0.2;
}
}
@keyframes flicker {
0% {
opacity: 0.1;
}
10% {
opacity: 0.2;
}
20% {
opacity: 0.1;
}
30% {
opacity: 0.1;
}
40% {
opacity: 0.02;
}
50% {
opacity: 0.5;
}
55% {
opacity: 0.1;
}
75% {
opacity: 0.1;
}
80% {
opacity: 0.2;
}
}

.frame {
	z-index: 0;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(19%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.9))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#00000000', endColorstr = '#e6000000', GradientType = 1); /* IE6-9 fallback on horizontal gradient */
}

.frame div {
	position: absolute;
	left: 0;
	top: -20%;
	width: 100%;
	height: 20%;
	background-color: rgba(0, 0, 0, 0.12);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	-webkit-animation: vertAnim 3s linear infinite;
	-moz-animation: vertAnim 3s linear infinite;
	-ms-animation: vertAnim 3s linear infinite;
	-o-animation: vertAnim 3s linear infinite;
	animation: vertAnim 3s linear infinite;
}

.frame div:nth-child(1) {
	-webkit-animation-delay: 0;
	-moz-animation-delay: 0;
	-ms-animation-delay: 0;
	-o-animation-delay: 0;
	animation-delay: 0;
}

.frame div:nth-child(2) {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-ms-animation-delay: 1s;
	-o-animation-delay: 1s;
	animation-delay: 1s;
}

.frame div:nth-child(3) {
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	-ms-animation-delay: 2s;
	-o-animation-delay: 2s;
	animation-delay: 2s;
}

/*
 * animation for the horizontal lines...first starts instantly second one after 1 second
 */
@-webkit-keyframes vertAnim {
0% {
top: -20%;
}
100% {
top: 100%;
}
}
@-moz-keyframes vertAnim {
0% {
top: -20%;
}
100% {
top: 100%;
}
}
@-o-keyframes vertAnim {
0% {
top: -20%;
}
100% {
top: 100%;
}
}
@keyframes vertAnim {
0% {
top: -20%;
}
100% {
top: 100%;
}
}

.main-container {
	text-align: center;
	text-shadow: 0 0 10px rgba(0, 0, 0, .8);
	max-width:1000px;
	margin:0 auto;
	width: 100%;
	height: 70%;
	opacity: .5;
	padding-top:50px;
	-webkit-animation: flickerContainer 8s linear infinite;
	-moz-animation: flickerContainer 8s linear infinite;
	-ms-animation: flickerContainer 8s linear infinite;
	-o-animation: flickerContainer 8s linear infinite;
	animation: flickerContainer 8s linear infinite;
}

.main-container .fit-text {
	width:90%;
	height:40%;
	margin:0 auto;
	padding:10px;
	font-size:1.8em;
}
.main-container .fit-counter {
	z-index: 2;
	font-weight: 100;
	margin:0 auto;
	width: 90%;
	height:25%;

}

footer {
	z-index: 999;
	bottom: 0px;
	width: 100%;
	height:25%;
	color: black;
	font-size: 60px;
	text-align: center;
	padding: 10px;
	text-shadow: 0 0 10px rgba(0, 0, 0, .8);
	opacity:0.5;

}
footer .social{
	margin:0 auto;
}
footer .social span {

	padding-right: 20px;

}
footer .fit-footer{
	max-width:1000px;
	width:80%;
	height:80%;
	margin:0 auto;
}

footer .copy{
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
}
/*
 * animation for the flickering main-container class
 */
@-webkit-keyframes flickerContainer {
5% {
opacity: 0.1;
}
8% {
opacity: 0.5;
}
31% {
opacity: 0.5;
}
33% {
opacity: 0.02;
}
36% {
opacity: 0.5;
}
43% {
opacity: 0.5;
}
45% {
opacity: 0.2;
}
48% {
opacity: 0.5;
}
80% {
opacity: 0.5;
}
}
@-moz-keyframes flickerContainer {
5% {
opacity: 0.1;
}
8% {
opacity: 0.5;
}
31% {
opacity: 0.5;
}
33% {
opacity: 0.02;
}
36% {
opacity: 0.5;
}
43% {
opacity: 0.5;
}
45% {
opacity: 0.2;
}
48% {
opacity: 0.5;
}
80% {
opacity: 0.5;
}
}
@-o-keyframes flickerContainer {
5% {
opacity: 0.1;
}
8% {
opacity: 0.5;
}
31% {
opacity: 0.5;
}
33% {
opacity: 0.02;
}
36% {
opacity: 0.5;
}
43% {
opacity: 0.5;
}
45% {
opacity: 0.2;
}
48% {
opacity: 0.5;
}
80% {
opacity: 0.5;
}
}
@keyframes flickerContainer {
5% {
opacity: 0.1;
}
8% {
opacity: 0.5;
}
31% {
opacity: 0.5;
}
33% {
opacity: 0.02;
}
36% {
opacity: 0.5;
}
43% {
opacity: 0.5;
}
45% {
opacity: 0.2;
}
48% {
opacity: 0.5;
}
80% {
opacity: 0.5;
}
}

/*
 * bootstrap tooltips
 */

.tooltip {
	position: absolute;
	z-index: 1030;
	display: block;
	visibility: visible;
	font-size: 12px;
	line-height: 1.4;
	opacity: 0;
	filter: alpha(opacity=0);
}
.tooltip.in {
	opacity: 0.9;
	filter: alpha(opacity=90);
}
.tooltip.top {
	margin-top: -3px;
	padding: 5px 0;
}
.tooltip.right {
	margin-left: 3px;
	padding: 0 5px;
}
.tooltip.bottom {
	margin-top: 3px;
	padding: 5px 0;
}
.tooltip.left {
	margin-left: -3px;
	padding: 0 5px;
}
.tooltip-inner {
	max-width: 200px;
	padding: 3px 8px;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	background-color: #000000;
	border-radius: 4px;
}
.tooltip-arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}
.tooltip.top .tooltip-arrow {
	bottom: 0;
	left: 50%;
	margin-left: -5px;
	border-width: 5px 5px 0;
	border-top-color: #000000;
}
.tooltip.top-left .tooltip-arrow {
	bottom: 0;
	left: 5px;
	border-width: 5px 5px 0;
	border-top-color: #000000;
}
.tooltip.top-right .tooltip-arrow {
	bottom: 0;
	right: 5px;
	border-width: 5px 5px 0;
	border-top-color: #000000;
}
.tooltip.right .tooltip-arrow {
	top: 50%;
	left: 0;
	margin-top: -5px;
	border-width: 5px 5px 5px 0;
	border-right-color: #000000;
}
.tooltip.left .tooltip-arrow {
	top: 50%;
	right: 0;
	margin-top: -5px;
	border-width: 5px 0 5px 5px;
	border-left-color: #000000;
}
.tooltip.bottom .tooltip-arrow {
	top: 0;
	left: 50%;
	margin-left: -5px;
	border-width: 0 5px 5px;
	border-bottom-color: #000000;
}
.tooltip.bottom-left .tooltip-arrow {
	top: 0;
	left: 5px;
	border-width: 0 5px 5px;
	border-bottom-color: #000000;
}
.tooltip.bottom-right .tooltip-arrow {
	top: 0;
	right: 5px;
	border-width: 0 5px 5px;
	border-bottom-color: #000000;
}

/*
 * fit the media queries and make sure text is legible
 */

@media only screen and (max-width: 530px) {
	.main-container .fit-counter {
		text-shadow: 0 0 4px rgba(0, 0, 0, .8);
	}
}
@media only screen and (max-width: 330px) {
	.main-container .fit-counter {
		text-shadow: 0 0 2px rgba(0, 0, 0, .8);
	}
}