/* import fonts */

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

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

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/RobotoCondensed-Light-webfont.eot');
  src: url('../fonts/RobotoCondensed-Light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/RobotoCondensed-Light-webfont.woff') format('woff'), url('../fonts/RobotoCondensed-Light-webfont.ttf') format('truetype'), url('../fonts/RobotoCondensed-Light-webfont.svg#roboto_condensedlight') format('svg');
  font-weight: 300;
  font-style: normal;
}


/* reset */

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  font-size: 100%;
  font: inherit;
  padding: 0;
  border: 0;
  margin: 0;
  vertical-align: baseline
}

html,
body {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #fff;
}

html {
  background-color: #016690;
  background-image: url(../images/jpg/Background.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

body {
  background-color: transparent;
  line-height: 1;
  /*padding: 5%;*/
}

sub {
  vertical-align: sub;
}

sup {
  vertical-align: super;
  font-size: 80%;
  line-height: 0;
  top: -.4rem;
  position: relative;
}

#buttonChangeBoom_tag sup,
.page-title sup {
  top: 0;
}

ol,
ul {
  display: block;
  float: left;
  clear: both;
  margin-left: 2rem;
  margin-bottom: 1.25rem;
}

ol > li:not(:last-child),
ul > li:not(:last-child) {
  margin-bottom: .5rem;
}

/* basic classes */

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

* html .clearfix {
  zoom: 1;
}

/* IE6 */
*:first-child+html .clearfix {
  zoom: 1;
}


/* IE7 */

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.float-center {
  float: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.small {
  font-size: 1rem;
}

#legal .small {
  font-size: .75rem;
}

.dialog {
  display: none;
}

.wide {
  display: inline-block;
}
  
.medium:not(.wide) {
  display: none;
}

.narrow {
  display: none;
}


/* button styles */

.button {
  display: block;
  border: 2px solid #CFD4D8;
  background: rgba(0, 68, 124, .5);
  padding: .75rem 1.5rem;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.5rem;
}

.button:hover {
  background: rgba(0, 68, 124, 1);
}

.button.float-right {
  margin-left: 1.5rem;
}

.button.float-left {
  margin-right: 1.5rem;
}

.button.arrow {
  box-sizing: content-box;
  display: inline-block;
  position: relative;
  margin: 1rem 1.1rem;
  border: 2px solid #CFD4D8;
  white-space: nowrap;
}

.button.arrow.right {
  border-top-right-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
  padding: .75rem 3rem .75rem 1.5em;
}

.button.arrow.left {
  border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
  padding: .75rem 1.5rem .75rem 3rem;
}

.button.arrow:before,
.button.arrow:after {
  position: absolute;
  width: 1.3rem;
  height: calc(50% + 2px);
  background: #CFD4D8;
  content: '';
}

.button.arrow.right:before,
.button.arrow.right:after {
  right: -.2rem;
}

.button.arrow.left:before,
.button.arrow.left:after {
  left: -.2rem;
}

.button.arrow:before {
  top: -2px;
}

.button.arrow:after {
  bottom: -2px;
}

.button.arrow.right:before {
  transform: skewX(50deg);
}

.button.arrow.right:after {
  transform: skewX(-50deg);
}

.button.arrow.left:before {
  transform: skewX(-50deg);
}

.button.arrow.left:after {
  transform: skewX(50deg);
}

/* change colors for "Enter to Win" button */
body.finish #buttonNext.button.arrow, 
#buttonChangeBoom.button.arrow {
  background-color: #fff;
  color: #00447C;
  border-color: #BB8D0B;
}

body.finish #buttonNext.button.arrow:hover, 
#buttonChangeBoom.button.arrow:hover {
  background-color: #f4ede1;
  box-shadow: 0 0 15px #BB8D0B;
}

body.finish #buttonNext.button.arrow:hover:before, 
body.finish #buttonNext.button.arrow:hover:after {
  box-shadow: 2px 0 5px rgba(187, 141, 11, 0.8);
}

#buttonChangeBoom.button.arrow:hover:before, 
#buttonChangeBoom.button.arrow:hover:after {
  box-shadow: -2px 0 5px rgba(187, 141, 11, 0.8);
}

body.finish #buttonNext.button.arrow:before, 
body.finish #buttonNext.button.arrow:after, 
#buttonChangeBoom.button.arrow:before, 
#buttonChangeBoom.button.arrow:after {
  background-color: #BB8D0B;
}


/* content */
.result-success-bg {
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: -2;
  opacity: .8;
}

.finish .result-success-bg {
  background-image: url('../images/png/Confetti.png');
}

.small-square-wrapper.button {
  padding: .5rem 1rem;
}

img.small-square {
  height: 1.8rem;
}

.page-title h1 > span {
  display: block;
  float: left;
  clear: both;
  text-transform: uppercase;
  font-size: calc(1rem + 2.5vh + 2.5vw);
}

.page-title h1 span.line2 {
  font-weight: bold;
  text-indent: 3rem;
}


/* http://stackoverflow.com/questions/12030835/div-with-cut-out-edges-border-and-transparent-background */

.wrapper {
  width: 100%;
}

.wrapper.content-wrapper {
  height: auto;
  position: relative;
}

.header-wrapper {
  width: 82%;
  margin-left: 11%;
  margin-right: 7%;
  margin-bottom: -.4rem;
  padding: 0;
  position: relative;
}

.page-title, .top.buttons {
  padding-top: 4.5%;
}
 
.button.small-square-wrapper.float-right {
  clear: both;
  margin-bottom: 1rem;
}

body.finish .page-title {
  background-color: #BB8D0B;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-left: 2%;
  padding-right: 2%;
  box-shadow: 0 5px 20px #000;
  z-index: 5;
  max-width: 90%;
}

#boomReminder {
  width: 40%;
  position: absolute;
  right: 8.5%;
  bottom: 0;
  background-color: #00447C;
  padding: 2% 2.25% 1.5%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-size: 1.15rem;
  line-height: 1.1;
}

.callout, 
.divider {
  display: inline-block;
}

.callout {
  font-weight: bold;
  text-transform: uppercase;
}

#placeholder {
  display: block;
  float: left;
  clear: both;
  margin-top: .4rem;
}

.instructions-top {
  width: 78%;
  margin: .4rem auto 0;
  padding: 0;
  text-align: right;
  font-size: .9rem;
}

.footer-relative-wrapper, 
.footer-fixed-wrapper {
  position: relative;
  width: 86%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.legal {
  width: 78%;
  clear: both;
  margin: 0 auto;
}

#legal_copyright {
  margin-top: .75rem;
}

.content {
  width: 78%;
  height: auto;
  margin: 40px auto;
  overflow: hidden;
  /*margin: auto;*/
  margin: 0 auto;
}

.applications {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: justify;
  flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -moz-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  cursor: pointer;
}

.application-button {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: center;
  flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column; /* needs explicit height property for IE? */
  flex-direction: column;
  width: 32%;
  height: 48%;
  background-color: rgba(0, 68, 124, 0.5);
  border: 3px solid #949CA1;
  margin: 0 0.5% 1rem;
}

.application-button.application-split, 
.application-button.application-split .application-container {
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.application-button.application-split .application {
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column; /* needs explicit height property for IE? */
  flex-direction: column;
}

.application-wrapper {
  position: relative;
  overflow: hidden;
  background: transparent;
  border: none;
}

.application {
  text-align: center;
  padding: .5rem;
  position: relative;
}

.application h2 {
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.application-icon {
  height: auto;
  width: 40%;
  flex: none;
}

/* absolutely centered content */
.container:not(.current-weight), 
.buttons-wrapper, 
.booms {
  position: relative;
  overflow: hidden;
  margin: auto;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

.container {
  overflow: visible;
  border: 3px solid #949CA1;
  background-color: rgba(0, 68, 124, .5);
}

.container:not(.current-weight), 
.applications, 
.prize-form,
.intro-text-wrapper {
  height: 60vh;
  min-height: 30rem;
}

#canvas {
  display: block;
  float: left;
  max-width: 50%;
  max-height: 100%;
  position: relative;
  overflow: hidden;
}

/* loaders */
#loaderOverlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 68, 124, .8);
  z-index: 2;
}
.loading-container {
  display: block;
  width: auto;
  position: absolute;
  top: 45%;
  left: 25%;
  z-index: 3;
}
.loading-container .loader {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  min-height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.loading-container .loader * {
  animation-play-state: paused;
}
.loading-spinning-bubbles {
  position: relative;
  margin: auto;
}
.loading-spinning-bubbles .bubble-container {
  position: absolute;
  top: calc(50% - 10px/2);
  left: calc(50% - 10px/2);
  transform-origin: -150% 50%;
}
.loading-spinning-bubbles .bubble-container .bubble {
  background: #FFF;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: bubble 1s infinite;
  animation-delay: inherit;
  box-shadow: 0px 0px 15px 0px #000;
}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+1) {
  transform: translateX(200%) rotate(-90deg);
  animation-delay: -1.5s;
}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+2) {
  transform: translateX(200%) rotate(-45deg);
  animation-delay: -1.375s;
}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+3) {
  transform: translateX(200%);
  animation-delay: -1.25s;
}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+4) {
  transform: translateX(200%) rotate(45deg);
  animation-delay: -1.125s;
}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+5) {
  transform: translateX(200%) rotate(90deg);
  animation-delay: -1s;
}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+6) {
  transform: translateX(200%) rotate(135deg);
  animation-delay: -0.875s;
}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+7) {
  transform: translateX(200%) rotate(180deg);
  animation-delay: -0.75s;
}
.loading-spinning-bubbles .bubble-container:nth-of-type(0n+8) {
  transform: translateX(200%) rotate(225deg);
  animation-delay: -0.625s;
}

@keyframes bubble {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

#percentLoaded {
  display: inline-block;
  width: auto;
  font-size: 1.5rem;
  line-height: 1;
  float: none;
  clear: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#percentLoaded p {
  margin: 0;
}

.objects-list, 
.half-button.button-right, 
.half-button.button-left,  
.operation-wrapper {
  display: block;
  width: 50%;
  height: 100%;
  position: relative;
}

.half-button {
  cursor: pointer;
  min-height: 465px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.object:not(.person), 
.half-button.button-right, 
.half-button.button-left {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: center;
  flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.objects-list, 
.half-button.button-right, 
.operation-wrapper {
  float: right;
  border-left: 2px solid #949CA1;
}

.objects-list {
  height: 100%;
  overflow: auto;
}

/* to remove borders when scrollbar is visible */
.noborder {
  border: none;
}

.half-button.button-left {
  float: left;
}

.units, 
.booms {
  padding: 1rem;
}

.units {
  text-align: center;
  line-height: 1;
}

.units h2 {
  font-size: 15rem;
  position: relative;
  z-index: 0;
}

.units p {
  margin-top: .5rem;
  font-size: 2rem;
  background-color: rgba(0, 68, 124, .5);
  border: 1px solid #fff;
  padding-top: 4%;
  padding-bottom: 5%;
  position: relative;
  z-index: 3;
  text-transform: uppercase;
}

.list-wrapper {
  width: 100%;
  height: auto;
  padding: 2%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -moz-box-align: start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  -ms-flex-line-pack: start;
  flex-line-pack: start;
  -webkit-align-content: flex-start;
  -moz-align-content: flex-start;
  -ms-align-content: flex-start;
  align-content: flex-start;
  direction: ltr;
}

.list-wrapper:not(.people) {
  -ms-flex-pack: start;
  flex-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  justify-content: flex-start;
}

.booms {
  min-height: 465px;
}

.booms h2, 
.booms p {
  width: 73%;
  z-index: 3;
  position: relative;
  color: #CFD4D8;
}

.booms h2 {
  font-size: 3rem;
}

.small.asterisk {
  display: inline-block;
  height: 2rem;
  position: absolute;
}

.booms h2 .small {
  bottom: .5rem;
}

.booms p {
  margin-top: 1rem;
  font-size: 1.3rem;
}

.booms p .capacity {
  display: block;
}

.highlight {
  display: block;
  text-transform: uppercase;
}

.highlight.color {
  color: #fff;
}

.highlight.bold {
  font-weight: bold;
}

.booms .boom-image {
  position: absolute;
  /*height: 80%;*/
  max-width: 83%;
  bottom: 5%;
  left: 10%;
  z-index: 0;
}

#boomStandard.booms .boom-image {
  max-width: 73%;
}

.xc-logo {
  position: absolute;
}

.booms .xc-logo {
  bottom: 1rem;
  right: 1rem;
  width: 30%;
  z-index: 3;
}

.overlay-wrapper .xc-logo {
  bottom: 3%;
  right: 5%;
  width: 40%;
}


/* scrollbar styles */


/* Turn on a 13x13 scrollbar */

.objects-list::-webkit-scrollbar {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 1rem;
}

.objects-list::-webkit-scrollbar-button:vertical {
  background-color: rgba(0, 68, 124, .2);
  border: none;
}


/* Turn on single button up on top, and down on bottom */

.objects-list::-webkit-scrollbar-button:start:decrement,
.objects-list::-webkit-scrollbar-button:end:increment {
  display: block;
}


/* Turn off the down area up on top, and up area on bottom */

.objects-list::-webkit-scrollbar-button:vertical:start:increment,
.objects-list::-webkit-scrollbar-button:vertical:end:decrement {
  display: none;
}


/* Place The scroll down button at the bottom */

.objects-list::-webkit-scrollbar-button:vertical:increment {
  background-image: url(../images/png/Arrow_Down.png);
}


/* Place The scroll up button at the up */

.objects-list::-webkit-scrollbar-button:vertical:decrement {
  background-image: url(../images/png/Arrow_Up.png);
}

.objects-list::-webkit-scrollbar-button:vertical:increment,
.objects-list::-webkit-scrollbar-button:vertical:decrement {
  background-color: transparent;
  border: none;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-position: center;
}

.objects-list::-webkit-scrollbar-track:vertical {
  background-color: rgba(0, 68, 124, .5);
  background-color: rgba(0, 68, 124, .5);
  border: 2px solid #949CA1;
}


/* Top area above thumb and below up button */

.objects-list::-webkit-scrollbar-track-piece:vertical:start {
  border: 2px solid #949CA1;
}


/* Bottom area below thumb and down button */

.objects-list::-webkit-scrollbar-track-piece:vertical:end {
  border: 2px solid #949CA1;
}


/* The thumb itself */

.objects-list::-webkit-scrollbar-thumb:vertical {
  background-color: #949CA1;
}


/* Corner */

.objects-list::-webkit-scrollbar-corner:vertical {
  background-color: #949CA1;
}

.object {
  width: 33%;
  height: 13rem;
  padding: 0 1.5%;
  margin: .5rem 0;
  -webkit-box-flex: 0 1 auto;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 0 1 auto;         /* OLD - Firefox 19- */
  width: 0 1 auto;                     /* For old syntax, otherwise collapses. */
  -webkit-flex: 0 1 auto;          /* Chrome */
  -ms-flex: 0 1 auto;              /* IE 10 */
  flex: 0 1 auto;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  text-align: center;
  position: relative;
  cursor: pointer;
}

.object.person {
  height: 26vh;
  min-height: 15rem;
}

.object img {
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  flex: none;
}

.object:not(.person) img {
  -webkit-box-flex: none;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: none;         /* OLD - Firefox 19- */
  width: auto;                     /* For old syntax, otherwise collapses. */
  -webkit-flex: none;          /* Chrome */
  -ms-flex: none;              /* IE 10 */
  flex: none;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.object:not(.person) .status img {
  -webkit-box-flex: 0 1 auto;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 0 1 auto;         /* OLD - Firefox 19- */
  width: 2.5rem;                     /* For old syntax, otherwise collapses. */
  -webkit-flex: 0 1 auto;          /* Chrome */
  -ms-flex: 0 1 auto;              /* IE 10 */
  flex: 0 1 auto;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.object .object-info {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  background-color: rgba(0, 68, 124, .5);
  border: 1px solid #fff;
  padding-top: 2%;
  padding-bottom: 2%;
}

.object.person .object-info {
  width: 5rem;
  top: 34%;
}

.object:not(.person) .object-info {
  width: 65%;
  padding-left: 2%;
  padding-right: 2%;
  bottom: 10%;
}

.object .object-info .name,
.object .object-info .weight, 
.object .object-info .factory {
  display: block;
}

.object .object-info .name {
  font-weight: bold;
}

.status {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  margin: 0 auto;
  text-align: center;
  z-index: 1;
}

.application .status {
  right: 8%;
  bottom: 8%;
  left: auto;
  top: auto;
}

.booms .status {
  top: 50%;
}

.object.person .status {
  bottom: 15%;
  top: auto;
}

.status img {
  width: 2.5rem;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}

/* form */
.intro-text-wrapper,
.prize-form {
  width: 80%;
  margin: 0 auto;
}

.prize-form .form-instructions,
#formCTA {
  font-size: 2rem;
  float: left;
}

.intro-text-wrapper p {
  font-size: 1.25rem;
  float: left;
}

.prize-form .form-instructions {
  width: 63%;
}

.intro-text-wrapper p {
  line-height: 1.25;
  margin-bottom: 1.25rem;
}

.intro-text-wrapper img.demoScreenshot {
  max-width: 50%;
  float: none;
  clear: both;
  margin: 0 auto;
  border: 2px solid #949CA1;
}

.prize-form form input {
  width: 100%;
  margin: 1rem 0;
  font-size: 2rem;
  padding: .25rem;
  border: 2px solid #949CA1;
  color: #00447C;
  box-shadow: none;
}

.prize-form form input.new:invalid, 
.prize-form form input.new:valid {
  border: 2px solid #949CA1;
  box-shadow: none;
}

.prize-form form input:invalid {
  border: 2px solid #af0000;
  box-shadow: none;
}

.prize-form form input:valid {
  border: 2px solid #197924;
  box-shadow: none;
}

#formCTA {
  width: auto;
  margin: 1.65rem 1.65rem 1.65rem 13.6%;
}

/* results */
.overlay-wrapper {
  height: 100%;
  width: 30%;
  position: absolute;
  right: 50%;
  z-index: 5;
  padding: 1.5%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column; /* needs explicit height property for IE? */
  flex-direction: column;
}

.warning-wrapper {
  text-align: center;
}

.warning-image, 
.warning-text {
  margin: .25rem auto;
}

.warning-text {
  background-color: #ab162b;
  border: 2px solid #CFD4D8;
  padding: 2%;
}

.warning-text h2 {
  font-size: 2rem;
  text-transform: uppercase;
}

.warning-text p {
  font-size: .75rem;
}

.warning-image {
  width: 20%;
}

.operational-weight {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  text-transform: uppercase;
  width: 90%;
  min-height: 5rem;
  margin: .5rem auto;
  overflow: hidden;
  position: relative;
  text-align: center;
  border-color: #CFD4D8;
  background-color: rgba(0, 68, 124, .8);
}

.operational-weight span, 
.status-text span {
  display: block;
}

.operational-weight .basket {
  font-size: 2rem;
}

.change-buttons-wrapper .button.arrow {
  font-size: 1rem;
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.change-buttons-wrapper .button.arrow.left {
  margin-left: 1.1rem;
  margin-right: 0;
  padding-left: 2rem;
  padding-right: 1rem;
}

.change-buttons-wrapper .button.arrow.left:before, 
.change-buttons-wrapper .button.arrow.left:after {
  height: calc(50% + 3px);
}

.change-button {
  width: 70%;
  float: left;
}

.change-button.fullwidth {
  width: 100%;
  float: none;
  margin: 0 auto;
}

.change-button .button {
  background-color: rgba(0, 68, 124, .8);
}

.button-tag {
  width: 30%;
  float: right;
  font-size: .6rem;
}

.button-tag .tag {
  margin: .5rem 0;
  padding: .48rem 8%;
  background-color: #00447c;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0 0 15px #fff;
	-webkit-animation: flash linear 4s infinite;
	animation: flash linear 4s infinite;
}

@-webkit-keyframes flash {
	0% { opacity: 1; } 
	20% { opacity: 1; } 
	60% { opacity: .1; } 
	100% { opacity: 1; }
}
@keyframes flash {
	0% { opacity: 1; } 
	20% { opacity: 1; } 
	60% { opacity: .1; } 
	100% { opacity: 1; }
}

.operation-status {
  height: 100%;
  overflow: hidden;
}

.operation-status.overweight {
  background-image: url(../images/jpg/MenInBoom.jpg);
  background-position: 40% top;
  background-repeat: no-repeat;
  background-size: cover;
}

.operation-status .contents-wrapper {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}

.operation-status.overweight .contents-wrapper {
  background-color: rgba(171, 22, 43, 0.5);
}

.status-text-wrapper {
  width: 40%;
  padding-left: 5%;
}

.status-text .functions {
  font-size: 2rem;
  text-transform: uppercase;
}

.status-image-wrapper {
  width: 60%;
  padding-right: 5%;
  padding-left: 5%;
}

.status-image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
}

.xc-info-wrapper {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.xc-info-wrapper .xc-info {
  font-size: 1.8rem;
  line-height: 1.1;
  margin-top: 1rem;
}

/* jQuery UI modal dialog */
.ui-dialog, 
.ui-dialog.ui-widget.ui-widget-content {
  border: 3px solid #949CA1;
  border-radius: 0;
  background-color: #00447c;
  padding: .5rem 1rem;
  margin: 0;
}

.ui-dialog, 
.ui-dialog .ui-dialog-titlebar, 
.ui-dialog .ui-widget-content {
  color: #fff;
}

.ui-dialog .ui-dialog-titlebar, 
.ui-dialog .ui-widget-content, 
.ui-dialog .ui-dialog-buttonpane {
  border: none;
  background: transparent;
  color: #fff;
  padding: .5rem 0;
}

.ui-dialog .ui-dialog-titlebar {
  font-size: 1.25rem;
  text-transform: uppercase;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: none;
  width: 100%;
}

.ui-dialog .ui-button {
  background-color: #cfd4d8;
  border-color: #949CA1;
  color: #00447c;
}

.ui-dialog .ui-button:hover {
  background-color: #949CA1;
  border-color: #cfd4d8;
  color: #00447c;
}

.ui-dialog .ui-dialog-buttonset .ui-button {
  margin: 0;
  padding: .75rem;
  width: 100%;
}

.ui-widget-overlay {
  background: #000;
  opacity: .5;
  filter: Alpha(Opacity=50);
}

.ui-dialog p {
  line-height: 1.1;
}

.ui-dialog p:not(:last-child) {
  margin-bottom: 1rem;
}

@media (max-width: 91rem) {
  .status-text-wrapper, 
  .status-image-wrapper {
    width: 50%;
  }
}

@media (max-height: 60rem) and (min-width: 45.8rem) {
  html, body {
    height: auto;
    max-height: none;
  }
  
  html {
    padding-bottom: 5.5rem;
  }
  
  body {
    overflow: auto;
  }
  
  .footer-relative-wrapper, 
  .footer-fixed-wrapper {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-left: 2%;
    padding-right: 2%;
    z-index: 100;
    background-color: rgba(0, 68, 124, 0.75);
  }
  
  .legal {
    padding-top: 1rem;
  }
}

@media (max-width: 73.6rem) {
  html, 
  body {
    height: auto;
    max-height: none;
    min-height: 100vh;
    padding-bottom: 5%;
  }
  
  .wide:not(.medium) {
    display: none;
  }
  
  .medium {
    display: inline-block;
  }

  .narrow {
    display: none;
  }
  
  .page-title {
    padding-top: 2rem;
  }
  
  .page-title h1 span.line2 {
    text-indent: 0;
  }
  
  .top.buttons {
    position: absolute;
    top: 2rem;
    right: 0;
    padding-top: 0;
    margin-bottom: 1rem;
  }
  
  .object {
    width: 50%
  }
  
  .wrapper.content-wrapper {
    height: auto;
  }
  
  #boomReminder {
    width: 95.1%;
    position: relative;
    right: auto;
    float: left;
  }
  
  .operation-status .contents-wrapper {
    padding: 1rem;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  
  .status-text-wrapper, 
  .status-image-wrapper {
    width: 100%;
    padding-left: 10%;
    padding-right: 10%;
  }
  
  .status-text-wrapper {
    margin-bottom: 1rem;
  }
  
  #percentLoaded {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

@media (max-width: 45.7rem) {
  body {
    padding-bottom: 6rem;
  }
  
  .wide,
  .medium {
    display: none;
  }
  
  .on-people .wide.people-show:not(#legal_welding), 
  .on-people .medium.people-show:not(#legal_welding) {
    display: none !important;
  }

  .narrow,
  .narrow.people-show:not(#legal_welding) {
    display: inline-block;
  }
  
  #buttonNext .changing,
  .on-objects #buttonNext .changing.objects-show:not(#legal_welding) {
    display: none !important;
  }
  
  #percentLoaded {
    width: 100%;
    position: relative;
    top: auto;
    left: auto;
    transform: translate(0,0);
    font-size: .75rem;
    line-height: 1;
    padding: .25rem;
    display: block;
    clear: both;
  }
  
  #percentLoaded p,
  #percentLoaded p.small {
    display: inline-block;
    font-size: .75rem;
    line-height: 1;
  }
  
  #percentLoaded p.small {
    margin-left: .25rem;
  }
  
  .loading-container {
    top: 15%;
    left: 50%;
  }
  
  .header-wrapper, 
  .content, 
  .legal {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
  }
  
  .top.buttons {
    position: relative;
    top: auto;
    padding-top: 2rem;
    margin-bottom: 0;
    width: 100%;
  }
  
  .button.small-square-wrapper.float-right {
    clear: none;
    margin-bottom: 0;
  }
  
  body.finish .page-title {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-width: 100%;
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    margin-top: 1rem;
  }
  
  .page-title h1 > span {
    font-size: calc(1rem + 1vh + 1vw);
  }
  
  #boomReminder {
    width: 100%;
  }
  
  .units {
    width: 70%;
  }
  
  .units h2 {
    font-size: calc(1rem + 10vh);
  }
  
  .units p {
    font-size: 1.5rem;
    padding-right: 10%;
    padding-left: 10%;
    margin-top: 0;
  }
  
  .application {
    padding: 1rem 10%;
  }
  
  .application-button {
    width: 100%;
    height: auto;
    -webkit-flex-direction: row-reverse;
    -moz-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse; /* needs explicit height property for IE? */
    flex-direction: row-reverse;
    -ms-flex-pack: end;
    flex-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -ms-justify-content: flex-end;
    justify-content: flex-end;
  }
  
  .application-icon {
    margin-right: 10%;
    width: 20%;
    height: auto;
  }
  
  .application h2 {
    margin-bottom: 0;
    text-align: left;
    width: 70%;
  }
  
  .container {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    -moz-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse; /* needs explicit height property for IE? */
    flex-direction: column-reverse;
  }
 
  .buttons-wrapper, 
  .booms, 
  .container:not(.current-weight), 
  .applications, 
  .prize-form,
  .intro-text-wrapper {
    height: auto;
    max-height: none;
    min-height: 0;
  }
  
  #canvas {
    order: 3;
  }
  
  .objects-list,
  .overlay-wrapper {
    order: 2;
  }
  
  .operation-wrapper {
    order: 1;
  }
  
  .half-button, 
  .objects-list, 
  .half-button.button-right, 
  .half-button.button-left, 
  .operation-wrapper {
    width: 100%;
    height: auto;
  }
  
  .objects-list, 
  .half-button.button-right, 
  .operation-wrapper {
    border-left: none;
    border-top: 2px solid #949CA1;
  }
  
  .half-button, 
  .booms {
    min-height: auto;
  }
  
  .booms h2 {
    font-size: 2rem;
  }
  
  .booms h2 .small {
    bottom: 0;
  }
  
  .booms .boom-image, 
  #boomStandard.booms .boom-image {
    position: relative;
    left: auto;
    bottom: auto;
    margin-top: -3.5rem;
    height: auto;
    max-height: 30vh;
    width: auto;
    max-width: 100%;
    float: right;
  }
  
  .overlay-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    right: auto;
    border-top: 2px solid #949ca1;
    padding: 1rem;
  }
  
  .overlay-wrapper .xc-logo {
    bottom: auto;
    right: auto;
    margin-top: .25rem;
    position: relative;
  }
  
  .warning-image {
    width: auto;
    max-height: 3rem;
  }
  
  .operation-status, 
  .operation-status .contents-wrapper {
    height: auto;
  }
  
  .operation-status .contents-wrapper {
    padding: 1rem;
    min-height: 30vh;
  }
  
  .status-text-wrapper, 
  .status-image-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
  
  .operation-status.overweight {
    border-right: none;
    border-left: none;
    border-bottom: none;
  }
  
  #canvas {
    max-width: 100%;
  }
  
  .objects-list {
    height: auto;
  }
  
  .object, 
  .object.person {
    padding: 0 3%;
    height: 20vh;
    max-height: 10rem;
    min-height: 0;
  }
  
  .xc-info-wrapper .xc-info {
    font-size: 1.25rem;
  }
  
  .prize-form, 
  .prize-form .form-instructions,
  .intro-text-wrapper,
  .intro-text-wrapper p {
    width: 100%;
  }
  
  .prize-form .form-instructions,
  .intro-text-wrapper p {
    font-size: 1.5rem;
  }
  
  .legal {
    padding: 1rem 0;
  }
  
  .footer-relative-wrapper, 
  .footer-fixed-wrapper {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-left: 2%;
    padding-right: 2%;
    z-index: 100;
    background-color: rgba(0, 68, 124, 0.85);
  }
  
  .button {
    font-size: 1rem;
  }
  
  .button.arrow.right, 
  .button.arrow.left {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  .bottom.buttons.wrapper .button.arrow.right, 
  .bottom.buttons.wrapper .button.arrow.left {
    max-width: calc(50% - 4rem);
  }
  
  .button.arrow.right {
    padding-right: 13%;
    padding-left: 7%;
  }
  
  .button.arrow.left {
    padding-right: 7%;
    padding-left: 13%;
  }
  
  .button.arrow::before, 
  .button.arrow::after {
    width: 20%;
  }
}

/* for hiding and showing interactive sections */
.intro-text-wrapper,
.result-success-bg,
.footer-relative-wrapper,
.footer-fixed-wrapper,
.instructions-top,
#placeholder,
#boomReminder,
#buttonPrev,
#buttonNext,
#buttonNext .changing,
#percentLoaded,
#loaderOverlay,
.applications,
.container,
.prize-form,
.status .checkMark,
#legal,
#intro_browserWarning,
#intro_clearCache,
#legal_loading,
#legal_attachments,
#legal_welding,
#legal_boomStandard,
#legal_range,
#legal_third,
.buttons-wrapper,
#canvas,
.objects-list,
.object,
.object:not(.person),
.operation-wrapper,
.overlay-wrapper,
.buttons-wrapper #boomGenie,
.buttons-wrapper #boomStandard,
.buttons-wrapper #lb,
.buttons-wrapper #kg,
.list-wrapper.objects,
.list-wrapper.people,
#objectInstructions,
.object.attachment,
.page-title h1 .line1,
.page-title h1 .line2,
.page-title h1 .line1,
.page-title h1 .line2,
.page-title h1 .line1,
.page-title h1 .line2,
.status-text-wrapper,
.status-image-wrapper,
.xc-info-wrapper,
.change-buttons-wrapper,
.warning-wrapper,
.on-genie .standard-show,
.on-standard .genie-show,
.on-pounds .kilograms,
.on-kilograms .pounds,
.on-unrestricted .restricted-show,
.on-restricted .unrestricted-show, 
.on-underweight .overweight-show,
.on-overweight .underweight-show {
  display: none;
}

.on-intro .intro-show,
.on-booms .booms-show,
.on-application .application-show,
.on-units .units-show,
.on-objects .objects-show:not(#legal_welding),
.on-people .people-show:not(#legal_welding),
.on-people .object.person,
.on-result.on-underweight .result-show:not(.overweight-show),
.on-result.on-overweight .result-show:not(.underweight-show),
.on-finish .finish-show,
.on-genie.on-underweight .genie-show.underweight-show,
.on-standard.on-underweight .standard-show.underweight-show,
.on-overweight .overweight-show,
.on-restricted.on-pounds .restricted-show:not(.kilograms),
.on-restricted.on-kilograms .restricted-show:not(.pounds),
.on-unrestricted.on-pounds .unrestricted-show:not(.kilograms),
.on-unrestricted.on-kilograms .unrestricted-show:not(.pounds),
.on-objects.on-welding .list-wrapper.objects .object.welding-show,
.on-objects.on-welding #legal #legal_welding.welding-show,
.on-people.on-welding #legal #legal_welding.welding-show,
.on-objects.on-window .list-wrapper.objects .object.window-show,
.on-objects.on-electrical .list-wrapper.objects .object.electrical-show,
.on-objects.on-plumbing .list-wrapper.objects .object.plumbing-show,
.on-objects.on-HVAC .list-wrapper.objects .object.HVAC-show,
.on-objects.on-other .list-wrapper.objects .object.other-show {
  display: inherit !important;
}

.on-booms #boomStandard.booms-show,
.on-booms #boomGenie.booms-show,
.on-units #lb.units-show,
.on-units #kg.units-show,
.on-result .operation-wrapper.result-show,
.on-result.on-standard.on-underweight .operation-wrapper.result-show .standard-show.underweight-show,
.on-result.on-underweight .result-show.overlay-wrapper:not(.overweight-show) > div:not(.overweight-show),
.on-result.on-overweight .result-show.overlay-wrapper:not(.underweight-show) > div:not(.underweight-show),
.on-genie.on-underweight .status-image-wrapper.genie-show.underweight-show,
.on-standard.on-underweight .status-image-wrapper.standard-show.underweight-show,
.on-booms #percentLoaded.booms-show,
.on-application #percentLoaded.application-show,
.on-units #percentLoaded.units-show,
.on-objects #percentLoaded.objects-show:not(#legal_welding),
.on-people #percentLoaded.people-show:not(#legal_welding) {
  display: block !important;
}

.on-application .applications.application-show,
.on-objects .objects-list.objects-show:not(#legal_welding),
.on-people .objects-list.people-show:not(#legal_welding),
.on-objects .list-wrapper.objects-show:not(#legal_welding),
.on-people .list-wrapper.people-show:not(#legal_welding),
.on-objects #canvas.objects-show:not(#legal_welding),
.on-people #canvas.people-show:not(#legal_welding),
.on-result.on-underweight .result-show.overlay-wrapper:not(.overweight-show),
.on-result.on-overweight .result-show.overlay-wrapper:not(.underweight-show),
.on-result.on-underweight .result-show.overlay-wrapper:not(.overweight-show) > div.result-show.operational-weight:not(.overweight-show),
.on-result.on-overweight .result-show.overlay-wrapper:not(.underweight-show) > div.result-show.operational-weight:not(.underweight-show) {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -webkit-flexbox !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
}

@media (max-width: 45.7rem) {
  .on-objects .container.objects-show:not(.current-weight):not(#legal_welding),
  .on-people .container.people-show:not(.current-weight):not(#legal_welding),
  .on-result .container.people-show:not(.current-weight) {
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -webkit-flexbox !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
  }
}