@charset "utf-8";

html, body 				{	font-size:12px; margin:0; padding:0; height:100%;  }

div 					{	box-sizing:border-box; }

button 					{	padding:0; height:50px; font-size:22px; font-weight:bold; font-family:arial; }

body 					{	background-color:#000000 !important; } /* can this be changed to anything? No. it CAN be, when you fix the 4 map background masks that you fucked up: rat race, */

.hide					{	display:none; }

.hand:hover				{	cursor:pointer; cursor:hand; }

.cortimer_label			{	
	font-family: arial;
	font-size: 14px;
	text-align: right;
	background-color: white;
	box-shadow: 0 0 5px white;
	padding: 5px 20px;
}

.stat {
	color:#222;
	padding-left:5px;
	margin-left:5px;
}

.cortimer {
	position:absolute;
	height:70px;
	width:400px;
	top:3px;
	left:100px;
	color:#ccc;
	font-size:22px;
	font-weight:bold;
	color:#eeeeee;
	text-shadow:2px 2px 3px rgba(0, 0, 0, 0.6);
	z-index:8;
	background-image:url('../images/logos/cortana_ortana.png');
	background-size:contain;
	background-repeat:no-repeat;
	animation:slide_right 1s;
	animation-delay:2s;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}

.cortana_c {
	height:100%;
	animation:rotate_cw 0.7s;
    animation-iteration-count:3;
	animation-play-state:running;
	animation-timing-function:linear;
}

.version_container {
	font-size: 12px;
	position: absolute;
	top: 52px;
	left: 77px;
	color: #C1DAF1;
}


@-webkit-keyframes rotate_cw {
	from 	{ transform: rotate(0deg); }
	to		{ transform: rotate(360deg); }
}

@-webkit-keyframes slide_right {
	from 	{ transform: translateX(0); }
	to		{ transform: translateX(-95px); }
}

.home_button {	float:right; margin:2px; height:26px; padding:0 4px; border-radius:3px; outline:none; border:1px solid #555; }
.home_button.clear_left {clear:left;}

.mapround {
	background-size:cover;
	background-repeat:no-repeat;
	background-position:100% 0%;
	z-index:1;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
}

.mapround_cover {
	z-index:2;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background-color:black;
}

.halftana_div {
	position:absolute;
	top:0px;
	z-index:3;
	background:url('../images/backgrounds/cortana_half_left_4.png');
	position:absolute;
	background-size:contain;
	height:100%;
	width:100%;
	background-position:0% 50%;
	background-repeat:no-repeat;
}

@font-face {
    font-family: 'creditcard'; /*a name to be used later*/
   	src: url('../fonts/CREDC___.ttf')  format('truetype');
}

@font-face {
	font-family:"Digital-7 Mono";
	src:url("../fonts/dig7/digital-7__mono_.eot?#iefix") format("embedded-opentype"),
		/*url("../fonts/dig7/digital-7__mono_.woff") format("woff"),*/
		url("../fonts/dig7/digital-7__mono_.ttf") format("truetype"),
		url("../fonts/dig7/digital-7__mono_.svg#Digital-7Mono") format("svg");
	font-weight:normal;
	font-style:normal;
}

.saved_colors_div			{	box-shadow:4px 6px 3px rgba(40,40,40,0.8); text-align:center; }
.saved_colors_div button	{	  padding: 2px 7px;
	height: auto;
	margin: 4px;
	border-radius: 3px;
	border: none;
	width: 100%;
}

.saved_color_button		{	float:left; clear:both; font-size:26px; text-shadow:3px 3px 3px black; color:white; }

.saved_colors_div 		{	position:absolute; z-index:31; top:70px; height:auto; padding:10px 20px; width:420px; left:50%; margin-left:-210px; border:1px solid #888888; background-color:rgba(161, 193, 215, 0.96); border-radius:8px; }


.time_color_div							{	width:100%; background-color:transparent; margin-bottom:4px; }
.time_color_table						{	width:100%; }
.time_color_div .time_color_picker		{	width:60%; border:none; border-radius:2px; outline:none; text-align:center; background-color:transparent; }
.time_label								{	width:30%; padding-left: 5px; }

.color_cell								{	padding:3px; box-sizing:content-box; }
.color_div								{	border-radius:3px; border:1px solid #444; }



.clock_color_div							{	width:100%; background-color:white; margin-bottom:4px; }
.clock_color_bar							{	width:100%; }
.clock_color_div .clock_color_picker		{	width:60%; bordeR:none; border-radius:2px; outline:none; text-align:center; background-color:transparent; }
.clock_picker_label							{	width:30%; padding-left: 5px; }

.clock_color_cell								{	padding:3px; box-sizing:content-box; }
.clock_color_div								{	border-radius:3px; border:1px solid #444; }


.clock_settings 		{	width:98%; color:black; }

.clock_settings_button	{	float:right; margin:2px; height:26px; padding:0 4px; border-radius:3px; outline:none; border:1px solid #555;}




.choice_alert {
	color:red;
}


.screen_headers {
	position: absolute;
	width: 33.33%;
	left: 33.33%;
	min-width: 540px;
	width:100%;
	left:0px;
}

.full .screen_headers {
	/*left:33.33%;*/
}

.docked .screen_headers {
	/*left:30%;*/
}


.screen_area.left.half, .screen_area.right.half {
    position:absolute;
    z-index:9;
    top:0px;
}

.docked .screen_area.left.half {
	width:42%;
	left:0%;
}

.docked .screen_area.right.half {
	width:42%;
	left:42%;
}

.full .screen_area.left.half {
	width:50%;
	left:0%;
}

.full .screen_area.right.half {
	width:50%;
	right:0%;
}



.screen_area.left.third, .screen_area.middle.third, .screen_area.right.third {
    position:absolute;
    z-index:9;
    top:0px;
	height:50px;
}

.docked .screen_area.left.third {
	width:33.33%;
	left:0%;
}

.docked .screen_area.middle.third {
	width:33.33%;
	left:33.33%;
}

.docked .screen_area.right.third {
	width:33.33%;
	left:66.66%;
}

.full .screen_area.left.third {
	width:33.33%;
	left:0%;
}

.full .screen_area.middle.third {
	width:33.33%;
	left:33.33%;
}

.full .screen_area.right.third {
	width:33.33%;
	left:66.66%;
}





.div_halo_version {
	position: absolute;
    z-index: 9;
    font-family: helvetica;
    top: 0px;
    background-color: rgba(0,0,0,0.5);
    color: white;
    text-align: right;
    font-size: 24px;
    right: 0px;
}
.current_halo_version {
	padding: 7px 14px 7px 28px;
}

.current_halo_version:hover {
	background-color:rgba(120,120,120,0.2);
}

.halo_version_list {
    background-color:rgba(0,0,0,0.85);
	font-size: 20px;
}

.halo_version_choice {
    padding: 2px 14px 2px 28px;
}

.halo_version_choice:hover {
	background-color:rgba(120,120,120,0.2);
}


/* .map_options {
	color:white;
	width:100%;
	display:inline-block;
	outline:0;
	border:none;
	background-color:rgba(0,0,0,0.6);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	padding-left:12px;
}
.gametype_options {
	color:white;
	width:100%;
	display:inline-block;
	outline:0;
	border:none;
	background-color:rgba(0,0,0,0.6);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	padding-left:12px;
} */

.div_maps {
	position: absolute;
    z-index: 9;
    font-family: helvetica;
    top: 0px;
    background-color: rgba(0,0,0,0.5);
    color: white;
    text-align: right;
/*     border-bottom-left-radius: 26px; */
    font-size: 24px;
/*     width: 300px; */
/*     min-height: 50px; */
/*     min-width: 50%; */
/*     padding: 2px 30px; */
    right: 0px;
	width:100%;
	text-align:center;
	height:48px;
}
.current_map {
/* 	border-bottom-left-radius:26px; */
	padding: 7px 2px;
}

.current_map:hover {
	background-color:rgba(120,120,120,0.2);
}

.map_list {
    background-color:rgba(0,0,0,0.8);
	font-size: 20px;
	column-count: 2;
	width:100%;
	/*margin-left:-40%;*/
}

.map_choice {
    padding: 2px;
}

.map_choice:hover {
	background-color:rgba(120,120,120,0.2);
}

.div_gametype {
	position: absolute;
    z-index: 9;
    font-family: helvetica;
    top: 0px;
    background-color: rgba(0,0,0,0.5);
    color: white;
    text-align: left;
/*     border-bottom-right-radius: 26px; */
    font-size: 24px;
/*     width: 300px; */
/*     min-height: 50px; */
/*     min-width: 50%; */
/*     padding: 2px 30px; */
    left: 0px;
}

.current_gametype {
/* 	border-bottom-right-radius:26px; */
	padding: 7px 28px 7px 14px;
	white-space:nowrap;
}

.current_gametype:hover {
	background-color:rgba(120,120,120,0.2);
}

.gametype_list {
    background-color:rgba(0,0,0,0.85);
	font-size:20px;
}

.gametype_choice {
    padding: 2px 28px 2px 14px;
}

.gametype_choice:hover {
	background-color:rgba(120,120,120,0.2);
}


.screen_area.left .curvy { border-bottom-left-radius:26px;}
.screen_area.left .curvy.uncurvy { border-bottom-left-radius:0px;}
.screen_area.right .curvy { border-bottom-right-radius:26px;}
.screen_area.right .curvy.uncurvy { border-bottom-right-radius:0px;}





@mixin aspect-ratio($width, $height) {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
  > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
.sixteen-nine {
  @include aspect-ratio(16, 9);
}

.sixteen-nine {
  position: relative;
}
.sixteen-nine:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}
.sixteen-nine > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.toggle {
    position: absolute;
	width:181px;
	text-align:center;
    padding: 5px 12px;
	z-index:7;
	color: #CCC;
    font-weight: bold;
	background-color:rgba(20,20,20,0.4);
	left:0px;
	font-size:12px;
	height:30px;
	line-height:20px;
	border-bottom:1px solid rgba(88, 88, 88, 0.39);
}

.toggle.settings.brighter, .toggle.legend.brighter {
	background-color:rgba(20,20,20,0.4);
}

.toggle.settings, .toggle.legend {
	background-color:rgba(0,0,0,0.4);
}

.legend_box {
	position: absolute;
	padding: 4px;
	left: 0px;
	bottom: 31px;
	width: 181px;
	height: auto;
	background-color: rgba(20,20,20,0.4);
	z-index: 1000;
	color: #CCC;
	font-size: 10px;
	text-align: center;
}

.legend_box td {
	padding:4px 0px;
}

.legend_box td h5 {
	text-align:center;
	color:rgb(120,120,120);
}

.legend_box tr td:first-child {
	text-align:right;
	padding-right:4px;
}

.legend_box tr td:last-child {
	text-align:left;
	padding-left:4px;
}

.legend_box div {
	padding-bottom:15px;
	border-bottom:1px solid rgba(150,150,150,0.7);
}

.legend_box div:last-child {
	border-bottom:none;
}

.toggle.settings, .toggle.legend {
	border-bottom:none;
}

.play_icon {
	position:relative;
	left:42%;
	width: 0; 
	height: 0; 
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 48px solid green;
}

.legend_table {
	width:100%;
	padding-bottom:5px;
}

.hover .play_icon {
	box-shadow:20px 20px 20px white;
}

.toggle:hover {
	background-color:rgba(40,40,40,0.4) !important;
}

.keybutton {
	border-radius:2px;
	background-color:rgba(120,120,120,0.07);
	border:1px solid rgb(140,140,140);
	padding:2px 5px;
	text-align:center;
}

.toggle.play_welcome {
    bottom: 210px;
/* 	font-size:12px; */
	display:none;
}

.toggle.cascade_location {
    bottom: 180px;
}

.toggle.cascade_direction {
    bottom: 150px;
}

.toggle.animate_style {
    bottom: 120px;
}

.toggle.sniper_display {
    bottom: 90px;
}

.toggle.pulse_warning {
    bottom: 60px;
}

.toggle.tenths_display {
    bottom: 30px;
}

.toggle.settings {
    bottom: 0px;
	width:90px
}

.toggle.legend {
    bottom: 0px;
	width:90px;
	left:91px;
}

.setting_title {
	color:#666;
}

.volume_icon {
	position:absolute;
	left:183px;
	height:24px;
	bottom:3px;
	width:24px;
	background-image:url(../images/volume_3.png);
	opacity:1;
	z-index:7;
}

.volume_control {
	position: absolute;
	bottom: 0px;
	left: 205px;
	width: 158px;
	height: 29px;
	background-color: transparent;
	z-index: 7;
}



/* MOVEABLE DIV STATIC PROPERTIES */

.clock {
	left:0;
	z-index:5;
	line-height:200px;
	margin:auto;
	margin-top:-5%;
	position:absolute;
/* 	top:44%; */
/* 	width:94%; */
	font-size:18vw;
	text-align:center;
	font-family:'Lucida Console', Monaco, monospace;
	font-family:'Digital-7 Mono';
	color:white;
/* 	-webkit-text-fill-color: white; */
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: black;
	opacity:0.65;
}

.cascade {
	position:absolute;
	top:0px;
	right:0px;
	bottom:0px;
	z-index:4;
	opacity:0.7;
}

.pillar_wrap {
	position:absolute;
	height:100%;
	width:25%;
	top:0%;
}

.sniper_off .pillar_wrap {
	width:33.33%;
}

.pillar_wrap.rocket {
	right:0%;
}

.pillar_wrap.red_rocket, .pillar_wrap.top_rocket {
	right:0%;
	width:12.5%;
}

.pillar_wrap.blue_rocket, .pillar_wrap.bottom_rocket {
	right:12.5%;
	width:12.5%;
}

.pillar_wrap.camo {
	right:25%;
}

.pillar_wrap.os {
	right:50%
}

.pillar_wrap.os_camo {
	right:50%;
}

.pillar_wrap.camo_os {
	right:25%;
}

.pillar_wrap.sniper {
	right:75%;
}

.sniper_off .pillar_wrap.rocket {
	right:0%
}

.sniper_off .pillar_wrap.red_rocket, .sniper_off .pillar_wrap.top_rocket {
	right:0%;
	width:16.66%;
}

.sniper_off .pillar_wrap.blue_rocket, .sniper_off .pillar_wrap.bottom_rocket {
	right:16.66%;
	width:16.66%;
}

.sniper_off .pillar_wrap.camo {
	right:33.33%;
}

.sniper_off .pillar_wrap.os {
	right:66.66%
}

.sniper_off .pillar_wrap.os_camo {
	right:66.66%;
}

.sniper_off .pillar_wrap.camo_os {
	right:33.33%;
}

.sniper_off .pillar_wrap.sniper {
	display:none;
}

.baction.sniper_on .pillar_wrap {
	width:20%;
}

.baction.sniper_on .pillar_wrap.blue_rocket {
	right:20%;
}

.baction.sniper_on .pillar_wrap.camo {
	right:40%;
}

.baction.sniper_on .pillar_wrap.os {
	right:60%;
}

.baction.sniper_on .pillar_wrap.sniper {
	right:80%;
}

.baction.sniper_off .pillar_wrap {
	width:25%;
}

.baction.sniper_off .pillar_wrap.blue_rocket {
	right:25%;
}

.baction.sniper_off .pillar_wrap.camo {
	right:50%;
}

.baction.sniper_off .pillar_wrap.os {
	right:75%;
}


.pillar {
	position:absolute;
	width:100%;
	height:50%; /* this shouid get changed on page load. if you ever see the bars at 50%, a cookie malfunctioned, code is fucked up, or something else halted somewhere */
	z-index:1;
}

.pillar_flash {
	position:absolute;
	width:100%;
	height:100%;
	z-index:2;
	background-color:rgba(255,0,0,1);
	opacity:0;
}

.rocket .pillar_flash, .red_rocket .pillar_flash, .blue_rocket .pillar_flash, .top_rocket .pillar_flash, .bottom_rocket .pillar_flash {
	background-color:#fff400;
}

.camo .pillar_flash, .camo_os .pillar_flash {
	background-color:#00f6ff;
}

.os .pillar_flash, .os_camo .pillar_flash {
	background-color:#f800ff;
}

.sniper .pillar_flash {
	background-color:#2aff00;
}

.pillar.half.left {
	width:50%;
	left:0%;
}
.pillar.half.right {
	width:50%;
	left:50%;
}

.pillar.camo {
	background-color:#4FBFDE;
}

.pillar.os {
	background-color:#EF387E;
}

.pillar.os_camo {
	background: repeating-linear-gradient(135deg, rgba(239, 56, 126, 1), rgba(239, 56, 126, 0) 15px, rgba(79, 191, 222, 0) 0, rgba(79, 191, 222, 1) 30px);
	background: repeating-linear-gradient(90deg, rgba(239,56,126,1) 2%, rgba(79,191,222,1) 47%, rgba(79,191,222,1) 53%, rgba(239,56,126,1) 98%);
}

.pillar.camo_os {
	background: repeating-linear-gradient(135deg, rgba(239, 56, 126, 1), rgba(239, 56, 126, 0) 15px, rgba(79, 191, 222, 0) 0, rgba(79, 191, 222, 1) 30px);
	background: repeating-linear-gradient(90deg, rgba(79,191,222,1) 2%, rgba(239,56,126,1) 47%, rgba(239,56,126,1) 53%, rgba(79,191,222,1) 98%);
}

.pillar.rocket, .pillar.top_rocket {
	background-color:#8C5E38;
}

.pillar.bottom_rocket {
	background-color:#7B512E;
}

.pillar.red_rocket {
	background-color:#99552D;
}

.pillar.blue_rocket {
	background-color:#7B5849;
}

.pillar.sniper {
	background-color:#7D7D7D;
}

.powerup_icon {
	position:absolute;
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
	width:100%;
	height:10%;
	z-index:3;
}

.powerup_icon.rocket, .powerup_icon.bottom_rocket, .powerup_icon.top_rocket {
	background-image:url("../images/powerups/powerup_rocket.png");
}

.powerup_icon.red_rocket {
	background-image:url("../images/powerups/powerup_red_rocket.png");
}

.powerup_icon.blue_rocket {
	background-image:url("../images/powerups/powerup_blue_rocket.png");
}

.powerup_icon.camo {
	background-image:url("../images/powerups/powerup_camo.png");
}

.powerup_icon.os {
	background-image:url("../images/powerups/powerup_os.png");
}

.powerup_icon.os_camo {
	background-image:url("../images/powerups/powerup_os_camo.png");
}

.powerup_icon.camo_os {
	background-image:url("../images/powerups/powerup_camo_os.png");
}

.powerup_icon.sniper {
	background-image:url("../images/powerups/powerup_sniper.png");
}

.power_one {
	margin-left: -10% !important;
}

.power_two {
	position: absolute !important;
	width: 86% !important;
	margin-left: 20% !important;
	z-index: 0 !important;
}

.time_left {
	position: absolute;
    color: white;
    width: 100%;
    text-align: center;
	z-index:4;
}

.multi_question {
	position: absolute;
	width: 100%;
	text-align: center;
	color: white;
	z-index: 2;
	text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.85);
}




/* MOVEABLE DIV VARIABLE PROPERTIES */


.full .infinity {
	font-size:9vh !important;
	line-height:75%;
}

.docked .infinity {
	font-size:2.5vw !important;
	line-height:90%;
}


.docked .cascade {
	width:16%;
}

.full .cascade {
	width:100%;
}

.docked .clock {
	top:35%;
	width:94%;
}

.full.climb .clock, .full.drain .clock {
	top:30%;
	width:100%;
}

.full.lift .clock, .full.rain .clock {
	top:47%;
	width:100%;
}

.docked .buttons.time_control {
	top:64%;
	/*left:47%;*/
}

.full.climb .buttons.time_control, .full.drain .buttons.time_control {
	top:50%;
	/*left:50%;*/
}

.full.lift .buttons.time_control, .full.rain .buttons.time_control {
	top:70%;
	/*left:50%;*/
}


.climb .pillar, .drain .pillar {
	bottom:0%;
}

.lift .pillar, .rain .pillar {
	top:0%;
}

.docked .powerup_icon {
	width:90%;
	margin-left:5%;
	height: 6%;
    min-height: 50px;
}

.full .powerup_icon {
	height:16%;
	display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

.docked .multi_question {
	font-size: 1.5vw;
}

.full .multi_question {
	font-size: 5vw;
}

.docked .time_left {
    font-size: 1.3vw;
}

.full .time_left {
    font-size: 5vh;
}

.docked.climb .multi_question, .docked.drain .multi_question {
	bottom: 3%;
}

.docked.lift .multi_question, .docked.rain .multi_question {
    top: 0%;
}

.full.climb .multi_question, .full.drain .multi_question {
	bottom: 6%;
}

.full.lift .multi_question, .full.rain .multi_question {
	top: 3%;
}

.docked.climb .powerup_icon, .docked.drain .powerup_icon {
	bottom:1.5%;
}

.docked.lift .powerup_icon, .docked.rain .powerup_icon {
	top:0.5%;
}

.full.climb .powerup_icon, .full.drain .powerup_icon {
	bottom:0.5%;
}

.full.lift .powerup_icon, .full.rain .powerup_icon {
	top:8%;
}

.docked.climb .time_left, .docked.drain .time_left {
    bottom: 10%;
}

.docked.lift .time_left, .docked.rain .time_left {
    top: 10%;
}

.full.climb .time_left, .full.drain .time_left {
    bottom: 17%;
}

.full.lift .time_left, .full.rain .time_left {
    top: 24%;
}



/* .docked .div_maps {
	left:31%
}

.full .div_maps {
	left:34%
}

.docked .div_gametype {
	left:47%;
}

.full .div_gametype {
	left:50%;
} */




.pillar {
	min-height:3px;
}









.buttons.time_control {
	position: absolute;
    z-index: 6;
    margin-left: 25%;
    width: 50%;
    border: 0px solid black;
}

.time_control .glow {
    display: inline-block;
    float: left;
    width: 16%;
    margin-left: 4.5%;
    margin-right: 4.5%;
    min-width: 30px;
    border-radius: 50%;
    border: 8px solid rgba(0, 101, 245, 0.84);
    font-size: 1.2vw;
    color: rgb(195, 197, 206);
    text-shadow: 2px 2px 1px rgb(57, 24, 162);
    text-align: center;
    text-decoration: none;
    background-color: transparent;
    outline: none;
    box-shadow: 0px 0px 15px rgba(0, 126, 255, 0.2), 0px 0px 15px rgba(0,197,255,0.2) inset;
    /* line-height: 15vh; */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.time_control .glow:hover {
	cursor:pointer;
}

.time_control .glow.hover {
	border: 8px solid #9ACCFF;
    color: rgb(255, 255, 255);
    text-decoration: none;
    box-shadow: 0px 0px 30px rgba(0, 197, 255, 0.9), 0px 0px 35px rgba(0,197,255,0.9) inset;
    font-size: 1.3vw;
}

.glow .left1 {
    height: 138px;
    width: 25%;
    box-sizing: content-box;
    margin-top: -8px;
    margin-right: 4.5%;
}

.glow .left2 {
    margin-left: 0;
    height: 138px;
    width: 25%;
    box-sizing: content-box;
    margin-top: -8px;
    margin-right: 8.5%;
}

.glow .right1 {
    height: 138px;
    width: 25%;
    box-sizing: content-box;
    margin-top: -8px;
    margin-left: 4.5%;
    float:right;
}

.glow .right2 {
    margin-right: 0;
    height: 138px;
    width: 25%;
    box-sizing: content-box;
    margin-top: -8px;
    margin-left: 8.5%;
    float:right;
}

.reveal {
	position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 400%;
}

.reveal.right {
	left:0px;
}