
/****************************************
  ==== RESETS
****************************************/
.aside {
  display:none;
}

.article {
  border-right: 0 transparent solid!important;
  width:100%;
}
* { margin: 0; padding: 0; }
::-moz-selection { color: #333; text-shadow: none; }
::selection {  color: #333; text-shadow: none; }
.clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clear { display: inline-table; clear: both; }
/* Hides from IE-mac \*/ * html .clear { height: 1%; } .clear { display: block; } /* End hide from IE-mac */

/****************************************
  ==== LAYOUT
****************************************/

 .template { width: 100%; height: 100%; font-family: Helvetica, Verdana, Arial, sans-serif; }

p.header, p.footer { display: none; }
div.logo { width: 204px; height: 38px; float: left; background: url(logo.png) 0 0 no-repeat; position: relative; z-index: 10; }
div.title { height: 38px; line-height: 38px; padding: 0 10px; margin: 0 1px 0 0; float: right; color: #333; text-align: right; font-size: 18px; position: relative; z-index: 10; }
.template-wrap { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.template-wrap canvas { margin: 0 0 10px 0; position: relative; z-index: 9; box-shadow: 0 10px 30px rgba(0,0,0,0.2); -moz-box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.fullscreen { float: right; position: relative; z-index: 10; }

.template { }
.template .template-wrap { }
.template .template-wrap canvas { }


/****************************************
  ==== LOADING
****************************************/
img#spinner {
	border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
	border: 2px solid #4874a3;
	-webkit-box-shadow: 0px 0px 5px 1px rgba(4,14,77,1);
    -moz-box-shadow: 0px 0px 5px 1px rgba(4,14,77,1);
    box-shadow: 0px 0px 5px 1px rgba(4,14,77,1);
}


div#loadingBox {
  text-align: center;
  width: 100%;
  height: 300px;
}

p#loadingInfo {
color: #666;
  letter-spacing: 1px;
  width: 100%;
  font-family: "Monaco", sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 8px;
  margin-top: 10px;
}


@import url(http://fonts.googleapis.com/css?family=Roboto:100italic,100,300italic,300,700italic,700);

#mc-advanced-progress.progress {
  font-size: 1.2em;
  height: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);

  width: 50%;
  margin:auto;

}

#mc-advanced-progress.progress--active .progress__bar {
  opacity: 1;
}

.progress__text {
  width: 20em;
  padding: 0 0.9em;
  position: absolute;
  color: black;
  text-shadow: 2px 1px 1px rgb(255, 255, 255);
}

.progress__text em {
  font-style: normal;
}

.progress__bar {
  color: white;
  font-size: 12px;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  line-height: 19px;
  display: block;
  position: relative;
  top: -1px;
  left: -1px;
  width: 0%;
  height: 100%;
  opacity: 0;
  border: 1px solid;
  border-radius: 2px 0 0 2px;
  background-size: 100px 30px, 130px 30px, 130px 30px;
  background-position: -20% center, right center, left center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  -webkit-transition: opacity 0.2s ease, width 0.8s ease-out, background-color 1s ease, border-color 0.3s ease, box-shadow 1s ease;
  transition: opacity 0.2s ease, width 0.8s ease-out, background-color 1s ease, border-color 0.3s ease, box-shadow 1s ease;
  -webkit-animation: pulse 2s ease-out infinite;
          animation: pulse 2s ease-out infinite;
  background-color: rgba(201, 4, 20, 0.95);
  background-image: -webkit-linear-gradient(0deg, rgba(226, 4, 22, 0) 10%, rgba(250, 6, 26, 0.8) 30%, #fb1f31 70%, rgba(250, 6, 26, 0.8) 80%, rgba(226, 4, 22, 0) 90%), -webkit-linear-gradient(left, rgba(251, 31, 49, 0) 0%, #fb1f31 100%), -webkit-linear-gradient(right, rgba(251, 31, 49, 0) 0%, #fb1f31 100%);
  background-image: linear-gradient(90deg, rgba(226, 4, 22, 0) 10%, rgba(250, 6, 26, 0.8) 30%, #fb1f31 70%, rgba(250, 6, 26, 0.8) 80%, rgba(226, 4, 22, 0) 90%), linear-gradient(to right, rgba(251, 31, 49, 0) 0%, #fb1f31 100%), linear-gradient(to left, rgba(251, 31, 49, 0) 0%, #fb1f31 100%);
  border-color: #fb3848;
  box-shadow: 0 0 0.6em #fa061a inset, 0 0 0.4em #e20416 inset, 0 0 0.5em rgba(201, 4, 20, 0.5), 0 0 0.1em rgba(254, 206, 210, 0.5);
}
.progress__bar--orange {
  background-color: rgba(201, 47, 0, 0.95);
  background-image: -webkit-linear-gradient(0deg, rgba(227, 53, 0, 0) 10%, rgba(252, 59, 0, 0.8) 30%, #ff4d17 70%, rgba(252, 59, 0, 0.8) 80%, rgba(227, 53, 0, 0) 90%), -webkit-linear-gradient(left, rgba(255, 77, 23, 0) 0%, #ff4d17 100%), -webkit-linear-gradient(right, rgba(255, 77, 23, 0) 0%, #ff4d17 100%);
  background-image: linear-gradient(90deg, rgba(227, 53, 0, 0) 10%, rgba(252, 59, 0, 0.8) 30%, #ff4d17 70%, rgba(252, 59, 0, 0.8) 80%, rgba(227, 53, 0, 0) 90%), linear-gradient(to right, rgba(255, 77, 23, 0) 0%, #ff4d17 100%), linear-gradient(to left, rgba(255, 77, 23, 0) 0%, #ff4d17 100%);
  border-color: #ff6030;
  box-shadow: 0 0 0.6em #fc3b00 inset, 0 0 0.4em #e33500 inset, 0 0 0.5em rgba(201, 47, 0, 0.5), 0 0 0.1em rgba(255, 214, 201, 0.5);
}
.progress__bar--yellow {
  background-color: rgba(232, 158, 0, 0.95);
  background-image: -webkit-linear-gradient(0deg, rgba(255, 174, 3, 0) 10%, rgba(255, 183, 28, 0.8) 30%, #ffbf36 70%, rgba(255, 183, 28, 0.8) 80%, rgba(255, 174, 3, 0) 90%), -webkit-linear-gradient(left, rgba(255, 191, 54, 0) 0%, #ffbf36 100%), -webkit-linear-gradient(right, rgba(255, 191, 54, 0) 0%, #ffbf36 100%);
  background-image: linear-gradient(90deg, rgba(255, 174, 3, 0) 10%, rgba(255, 183, 28, 0.8) 30%, #ffbf36 70%, rgba(255, 183, 28, 0.8) 80%, rgba(255, 174, 3, 0) 90%), linear-gradient(to right, rgba(255, 191, 54, 0) 0%, #ffbf36 100%), linear-gradient(to left, rgba(255, 191, 54, 0) 0%, #ffbf36 100%);
  border-color: #ffc74f;
  box-shadow: 0 0 0.6em #ffb71c inset, 0 0 0.4em #ffae03 inset, 0 0 0.5em rgba(232, 158, 0, 0.5), 0 0 0.1em rgba(255, 248, 232, 0.5);
}
.progress__bar--green {
  background-color: rgba(0, 178, 23, 0.95);
  background-image: -webkit-linear-gradient(0deg, rgba(0, 204, 26, 0) 10%, rgba(0, 229, 30, 0.8) 30%, #00ff21 70%, rgba(0, 229, 30, 0.8) 80%, rgba(0, 204, 26, 0) 90%), -webkit-linear-gradient(left, rgba(0, 255, 33, 0) 0%, #00ff21 100%), -webkit-linear-gradient(right, rgba(0, 255, 33, 0) 0%, #00ff21 100%);
  background-image: linear-gradient(90deg, rgba(0, 204, 26, 0) 10%, rgba(0, 229, 30, 0.8) 30%, #00ff21 70%, rgba(0, 229, 30, 0.8) 80%, rgba(0, 204, 26, 0) 90%), linear-gradient(to right, rgba(0, 255, 33, 0) 0%, #00ff21 100%), linear-gradient(to left, rgba(0, 255, 33, 0) 0%, #00ff21 100%);
  border-color: #19ff37;
  box-shadow: 0 0 0.6em #00e51e inset, 0 0 0.4em #00cc1a inset, 0 0 0.5em rgba(0, 178, 23, 0.5), 0 0 0.1em rgba(178, 255, 188, 0.5);
}
.progress__bar--blue {
  background-color: rgba(18, 135, 204, 0.95);
  background-image: -webkit-linear-gradient(0deg, rgba(20, 151, 227, 0) 10%, rgba(37, 162, 236, 0.8) 30%, #3dacee 70%, rgba(37, 162, 236, 0.8) 80%, rgba(20, 151, 227, 0) 90%), -webkit-linear-gradient(left, rgba(61, 172, 238, 0) 0%, #3dacee 100%), -webkit-linear-gradient(right, rgba(61, 172, 238, 0) 0%, #3dacee 100%);
  background-image: linear-gradient(90deg, rgba(20, 151, 227, 0) 10%, rgba(37, 162, 236, 0.8) 30%, #3dacee 70%, rgba(37, 162, 236, 0.8) 80%, rgba(20, 151, 227, 0) 90%), linear-gradient(to right, rgba(61, 172, 238, 0) 0%, #3dacee 100%), linear-gradient(to left, rgba(61, 172, 238, 0) 0%, #3dacee 100%);
  border-color: #54b6f0;
  box-shadow: 0 0 0.6em #25a2ec inset, 0 0 0.4em #1497e3 inset, 0 0 0.5em rgba(18, 135, 204, 0.5), 0 0 0.1em rgba(225, 242, 252, 0.5);
}
.progress__bar:before, .progress__bar:after {
  content: "";
  position: absolute;
  right: -1px;
  top: -10px;
  width: 1px;
  height: 40px;
}
.progress__bar:before {
  width: 7px;
  right: -4px;
  background: -webkit-radial-gradient(center ellipse, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 75%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 75%);
}
.progress__bar:after {
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 100%);
}
#mc-advanced-progress.progress--complete .progress__bar {
  -webkit-animation: none;
          animation: none;
  border-radius: 2px;
}
#mc-advanced-progress.progress--complete .progress__bar:after,
#mc-advanced-progress.progress--complete .progress__bar:before {
  opacity: 0;
}

@-webkit-keyframes pulse {
  0% {
    background-position: -50% center, right center, left center;
  }
  100% {
    background-position: 150% center, right center, left center;
  }
}

@keyframes pulse {
  0% {
    background-position: -50% center, right center, left center;
  }
  100% {
    background-position: 150% center, right center, left center;
  }
}


h1 {
  font-weight: 900;
  line-height: 1em;
  margin: 0.5em 0;
}

h1 b {
  font-weight: 100;
}