@charset "UTF-8";
/* CSS Document */

/*--- FONTS ---*/
/* GE Inspira */
@font-face {
    font-family: 'geinspira';
    src: url('../fonts/geinsprg-webfont.eot');
    src: url('../fonts/geinsprg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/geinsprg-webfont.woff') format('woff'),
         url('../fonts/geinsprg-webfont.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'geinspirab';
    src: url('../fonts/geinspbd-webfont.eot');
    src: url('../fonts/geinspbd-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/geinspbd-webfont.woff') format('woff'),
         url('../fonts/geinspbd-webfont.ttf') format('truetype');
    font-style: normal;
    font-weight: bold;
}

.software-badge {
	position: absolute;
	top: 20%;
	left:55%;
}

.mobile_only, .phone_only, .small_only{
	display:none;
}

.desktop_only, .large_only{
	display:block;
}

.debug, .debug div div, .debug div div div div, .debug div div div div div div{
    border-top: solid 2px #FF00FF;
    border-left: solid 2px #FF00FF;
    border-bottom: solid 2px #DD00DD;
    border-right: solid 2px #DD00DD;
}

.debug div, .debug div div div, .debug div div div div div{
    border-top: solid 2px #00DDBB;
    border-left: solid 2px #00DDBB;
    border-bottom: solid 2px #00BB99;
    border-right: solid 2px #00BB99;
}

.notransition, .notransition div, .notransition div div{
    -webkit-transition:all 0.0s;
    transition:all 0.0s;
}

div, *, *:before, *:after
{	
    -webkit-transition:all 1s;
    transition:all 1s;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing:border-box;         /* Opera/IE 8+ */
}

html,body{
    height:100%;
    width:100%;
    padding:0;
    margin:0;
	font-family: "geinspira", Arial, sans-serif;
	background-color:#000000;
	color:#ffffff;
}

.blue{
	color:#00B1EF;
}

.gray{
	color:#999999;
}

.container{
	width:100%; height:calc(56vw); position:absolute; overflow:hidden;
}

.results_container{
	overflow-y: hidden;
}

.panel {
	transition: left 0.7s ease, opacity 0.5s ease;
}

#panel_cover {
	transition: all 1.4s ease 0.4s;
}

.panel_white {
	transition: all 0.8s ease;
	position:absolute; width:100%; height:100%; top:0; left:0; opacity:1; z-index:8;
}

.panel_shadow {
	opacity:0; position:absolute; right: -40px; z-index:9;
}

.panel_glow {	
	transition: all 1s ease 0.5s;
	opacity:1; position:absolute; right: -40px; z-index:10;
}

.panel{
position: absolute;
top:0%;
height:90%;
background-image:url('../images/bg.jpg');
background-color:#313131;
background-size: calc(10vw);
background-repeat: repeat-x;
}

.panelbg{
background-image:url('../images/bg.jpg');
background-color:#313131;
background-size: calc(10vw);
background-repeat: repeat-x;
}

.panel1_hidden{
opacity:0;
left:-13%;
width:33.3%;
overflow-y:visible;
overflow-x:visible;
}

.panel1_shown{
opacity:1;
left:0%;
width:33.3%;
overflow-y:visible;
overflow-x:visible;
}

.panel2_hidden{
opacity:0;
left:15%;
width:33.3%;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
overflow-x:hidden;
}

.panel2_shown{
opacity:1;
left:33.3%;
width:33.3%;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
overflow-x:hidden;
}

.panel3_hidden{
opacity:0;
left:50%;
width:33.3%;
}

.panel3_shown{
opacity:1;
left:66.66%;
width:33.3%;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
overflow-x:hidden;
}

.streak_show {
  animation-duration: 1.1s;
  animation-name: streak_show;
  animation-iteration-count: 1;
}

@keyframes streak_show {
  from {
    left:18%;
    opacity:0;
  }

  50% {
    opacity:1;
  }
  
  to {
    left:-27%;
    opacity:1;
  }
}

.streak_hide {
  animation-duration: 1.1s;
  animation-name: streak_hide;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes streak_hide {
  from {
    left:-27%;
    opacity:1;
  }

  50% {
    opacity:1;
  }
  
  to {
    left:18%;
    opacity:0;
  }
}

.flare {
  animation-duration: 1.5s;
  animation-name: flare;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes flare {
  from {
    top:0px;
    opacity:0;
  }
  
  50% {
    opacity:1;
  }
  
  to {
    top:-15%;
    opacity:0;
  }
}

.glow_click_circle {
  animation-duration: 1s;
  animation-name: glow_click_circle;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes glow_click_circle {
  from {
    opacity:0;
    transform: scale(0.9, 0.9);
  }
  
  35% {
	opacity:1;
	transform: scale(1.1, 1.1);
  }
  
  70% {
	opacity:1;
	transform: scale(0.95, 0.95);
  }
  
  to {
    transform: scale(1.0, 1.0);
  }
}

.fill_click_circle {
  animation-duration: 1.2s;
  animation-name: fill_click_circle;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fill_click_circle {
  from {
    opacity:0;
    transform: scale(0.5, 0.5);
  }
  
  35% {
	transform: scale(1.0, 1.0);
  }
  
  70% {
	opacity:0.6;
	transform: scale(0.75, 0.75);
  }
  
  to {
  	opacity:0.4;
    transform: scale(0.85, 0.85);
  }
}

.glow_click_pill {
  animation-duration: 1s;
  animation-name: glow_click_pill;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes glow_click_pill {
  from {
    opacity:0;
    transform: scale(.95, 0.9);
  }
  
  35% {
	transform: scale(1.03, 1.01);
  }
  
  70% {
	opacity:1;
	transform: scale(0.98, 0.93);
  }
  
  to {
  	opacity:1;
    transform: scale(1.0, 1.0);
  }
}

.fill_click_pill {
  animation-duration: 1.2s;
  animation-name: fill_click_pill;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fill_click_pill {
  from {
    opacity:0;
    transform: scale(0.9, 0.85);
  }
  
  35% {
	transform: scale(1, 1);
  }
  
  70% {
	opacity:0.6;
	transform: scale(1.0, 1.0);
  }
  
  to {
  	opacity:0.4;
    transform: scale(1.0, 1.0);
  }
}


.fill_off{
	opacity:0;
}

.glow_off{
	opacity:0;
}

.huge{
	font-size: 4.6vw;
	line-height: 4.3vw;
}

.large{
	font-size: 2.2vw;
}

.medium{
	font-size: 1.5vw;
}

.small{
	font-size:1.3vw;
}

.tiny{
	font-size:10px;
}

.footer{
	z-index:20; width:100%; height:10%; position:absolute; bottom:-10%; background-color:white; color:black;
}

.result_image{
	width:100%;
}

.result_content{
	position:absolute; width:100%; height:100%; padding-left:45%; padding-top:2%; padding-right:5%;
}

.result_list{
	height:calc(33vw); width:99%; overflow-y:auto;
}

.table_header{
	padding:0%;
}

.gallery{
	z-index:15;
	position:absolute;
	top:0;
	opacity:0;
	height:90%;
	width:100%;
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
	background-color:black;
	-webkit-transition:all 0.5s;
    transition:all 0.5s;
	transform: scale(1.1, 1.1);
}

.gallery_shown{
	z-index:15;
	position:absolute;
	top:0;
	opacity:1;
	height:90%;
	width:100%;
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
	background-color:black;
	-webkit-transition:all 0.5s;
    transition:all 0.5s;
	transform: scale(1, 1);
}

.gallery_image{
	float:left;
	padding:4%;
	width:33.3%;
}

/****** override for mobile ******/
@media
only screen and (max-width:900px) {

    .mobile_only, .phone_only, .small_only{
        display:block;
    }

    .desktop_only, .large_only{
        display:none !important;
    }

	.container{
		width:100%; height:100%; position:absolute; overflow:hidden;
	}
	
	.results_container{
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}


	@keyframes streak_show {
	  from {
		left:18%;
		opacity:0;
	  }

	  50% {
		opacity:0;
	  }
  
	  to {
		left:-27%;
		opacity:0;
	  }
	}

	@keyframes streak_hide {
	  from {
		left:-27%;
		opacity:0;
	  }

	  50% {
		opacity:0;
	  }
  
	  to {
		left:18%;
		opacity:0;
	  }
	}

	.panel1_hidden{
	opacity:0;
	left:50%;
	width:100%;
	z-index:2;
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
	overflow-x:visible;
	}

	.panel1_shown{
	opacity:1;
	left:0%;
	width:100%;
	z-index:2;
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
	overflow-x:hidden;
	}

	.panel2_hidden{
	opacity:0;
	left:50%;
	width:100%;
	z-index:3;
	}

	.panel2_shown{
	opacity:1;
	left:0%;
	width:100%;
	z-index:3;
	}

	.panel3_hidden{
	opacity:0;
	left:50%;
	width:100%;
	z-index:5;
	}

	.panel3_shown{
	opacity:1;
	left:0%;
	width:100%;
	z-index:5;
	}

	.huge{
		font-size: 9vw;
		line-height: 8vw;
	}

	.large{
		font-size: 5vw;
	}

	.medium{
		font-size: 4vw;
	}

	.small{
		font-size:3vw;
	}

	.tiny{
		font-size:10px;
	}

	.footer{
		position:fixed;
	}
	
	.result_image{
		width:210%;
	}
	
	.result_content{
		position:absolute; width:100%; height:100%; padding-left:5%; padding-top:calc(105vw); padding-right:5%;
	}
	
	.result_list{
		height:auto; width:auto; overflow-y:visible;
	}
	
	.gallery_image{
		float:left;
		width:100%;
		padding:10%;
		margin-bottom:5%;
	}

}