/* Reset */
html, body, div, h1, h2, p, a, img, dl, dt, dd, ul, li, input {
  margin:                             0;
  padding:                            0;
  border:                             0;
  outline:                            0;
  vertical-align:                     baseline;
  background:                         transparent;
  text-decoration:                    none;
  position:                           relative; 
}


/* Document setup */
html, body {
  width:                              100%;
}
html {
  height:                             100%;
  overflow:                           auto;
  overflow-x:                         hidden;
}
body {
  min-height:                         100%;
  overflow:                           hidden;
  font:                               normal normal normal 15px /1.5 Segoe UI, Open Sans, Arial, Verdana, sans-serif;
  color:                              #1a1a1a; /* [r7] $spx-color-black-500 .9 */
  background-color:                   #ffffff;
}


/* General typography */
h1, h2, p, dt, dd {
  padding:                            1.5em 1.5em 0 1.5em; /* [r0] */
}

h1 {
  font-weight:                        100;
  font-size:                          1.7em;
  line-height:                        1.3;
  white-space:                        nowrap; /* [r2] */
  height:                             5em; /* IE8... */
  height:                             10vh;
  min-height:                         2em;
  max-height:                         5em;
  color:                              #808080; /* [r7] $spx-color-black-500 .5 */
  padding-top:                        2.4em; /* [r10] */
}
h1:before { /* [r2] */
  content:                            "";
  display:                            inline-block;
  height:                             100%;
  vertical-align:                     bottom;
}
h1 span { /* [r2] */
  display:                            inline-block;
  white-space:                        normal;
}


h2 {
  font-weight:                        600;
  font-size:                          1.2em;
}


dt, dd {
  padding-top:                        0;
  padding-bottom:                     0;
}
dt {
  font-weight:                        600;
}
dd {
  font-size:                          .9em;
}

ul {
  list-style:                         square outside none;
  padding:                            0 1.5em 0 2.5em; /* [r0] */
}
li {
  padding:                            1em 0 0 0; /* [r0] */
}

a:link, a:visited {
  color:                              #487fc7; /* $spx-color-blue-450 */
  position: static;
}
a:active, a:hover, a:focus {
  color:                              #15437f; /* $spx-color-blue-700 */
}


/* Page sections */
.header {
  background:                         #071326; /* $spx-color-asphalt-500 */
  z-index:                            2;
}

.main {
  margin:                             0 0 12em 0; /* [r1] */
  z-index:                            1;
}

.footer {
  position:                           absolute;
  left:                               0;
  bottom:                             0;
  width:                              100%;
  min-height:                         8em; /* [r1] */
  padding:                            0 1em 2em 1em; /* [r1] */
  color:                              #999999; /* IE8: $spx-color-white-500 .6 */
  color:                              rgba(255, 255, 255, .6); /* $spx-color-white-500 .6 */
  background-color:                   #071326; /* $spx-color-asphalt-500 */
}

/* Sets center aligned content column */
.canvas {
  max-width:                          640px;
  margin:                             0 auto;
  text-align:                         center;
}


/* Inside section Header */
.logo {
  position:                           absolute;
  top:                                24px;
  left:                               24px;
  width:                              160px;
  max-width:                          33%;
}

/* Sets the height of the header */
.badge {
  display:                            block;
  height:                             24vh;
  min-height:                         11em;
}


.badge img {
  width:                              164px;
  height:                             164px;
  left:                               50%;
  margin-left:                        -82px;
  position:                           absolute;
  z-index:                            1;
  bottom:                             -55px;
}

.pattern {
  position:                           absolute;
  width:                              100%;
  height:                             50em;
  left:                               0px;
  bottom:                             0px;
  margin:                             0 0 1px 0; /* 1 px margin to prevent resize rounding artifact in edge */
  overflow:                           hidden;
}

svg {
  position:                           absolute;
  width:                              90em;
  height:                             90em;
  left:                               50%;
  margin-left:                        -45em;
}
path.shape {
  opacity: .1;
  fill: #FFFFFF;
  stroke: none;
  transform-origin: 500px 535px;
}
path.path-animation {
  opacity: 0;
  animation: flash-shape 2s ease-out forwards;
}
/* :nth-child(1) is the radial gradient, (2) the asphalt background */
path.path-animation:nth-child(3) {
  animation-delay: .15s;
}
path.path-animation:nth-child(4) {
  animation-delay: .3s;
}
path.path-animation:nth-child(5) {
  animation-delay: .45s;
}
path.path-animation:nth-child(6) {
  animation-delay: .6s;
}
path.path-animation:nth-child(7) {
  animation-delay: .75s;
}
path.path-animation:nth-child(8) {
  animation-delay: .9s;
}
path.path-animation:nth-child(9) {
  animation-delay: 1.05s;
}
path.path-animation:nth-child(10) {
  animation-delay: 1.2s;
}
path.path-animation:nth-child(11) {
  animation-delay: 1.35s;
}
path.path-animation:nth-child(12) {
  animation-delay: 1.5s;
}
path.path-animation:nth-child(13) {
  animation-delay: 1.65s;
}
@keyframes flash-shape {
  0% {
    opacity: 0;
    transform: scale(.8) rotate(10deg);
  }
  50% {
    opacity: .12;
  }
  100% {
    opacity: .1;
    transform: scale(1) rotate(0deg);
  }
}

/* Inside section Main */
a.startbutton {
  display:                            inline-block;
  font-weight:                        600;
  font-size:                          1.3em;
  line-height:                        2.5;
  margin:                             2em 0;
  padding:                            0 2em;
  color:                              #ffffff;
  background-color:                   #3c73bb; /* $spx-color-blue-500 */
  border-radius:                      3px;
  -webkit-user-select:                none;
  -khtml-user-select:                 none;
  -moz-user-select:                   none;
  -ms-user-select:                    none;
  user-select:                        none;
}
a.startbutton:focus {
  -webkit-box-shadow:                 0 0 0 4px #b7cdeb; /* $spx-color-blue-400, 4px, a: .4 */
  -moz-box-shadow:                    0 0 0 4px #b7cdeb; /* $spx-color-blue-400, 4px, a: .4 */
  box-shadow:                         0 0 0 4px #b7cdeb; /* $spx-color-blue-400, 4px, a: .4 */
}
a.startbutton:hover {
  background-color:                   #568bd1; /* $spx-color-blue-400 */
}
a.startbutton:active {
  background-color:                   #6498db; /* $spx-color-blue-350 */
  -webkit-box-shadow:                 0 0 0 4px #c7d8ef; /* $spx-color-blue-400, 4px, a: .3 */
  -moz-box-shadow:                    0 0 0 4px #c7d8ef; /* $spx-color-blue-400, 4px, a: .3 */
  box-shadow:                         0 0 0 4px #c7d8ef; /* $spx-color-blue-400, 4px, a: .3 */
}


/* Warning message */
.warning {
  text-align:                         left;
  margin:                             1.5em 0;
  padding:                            0 0 1.5em 0;
  border:                             4px solid #ffc738; /* $spx-color-yellow-500 */
  border-radius:                      4px;
}
.warning h2 {
  background-color:                   #ffc738; /* $spx-color-yellow-500 */
  padding-top:                        .5em;
  padding-bottom:                     .5em;
}
.warning h2:before {
  content:                            "";
  display:                            inline-block;
  width:                              1.6em;
  height:                             1.2em;
  vertical-align:                     sub;
  background:                         transparent url(profile.22.1.png) no-repeat -96px 0;
}


/* Inside section Footer */
.footer dl {
  float:                              left;
  min-width:                          15em;
  border-left:                        1px solid #394251; /* $spx-color-white-500, a: .3 */
  border-right:                       1px solid #394251; /* $spx-color-white-500, a: .3 */
  margin:                             2em 0 0 -1px; /* [r1] */
}
.footer dl:first-child {
  border-left:                        none;
}
.footer dl:last-child {
  border-right:                       none;
}
.footer dt {
  color:                              #e6e6e6; /* $spx-color-white-500 .9 */
}
.footer dd > a:link, .footer dd > a:visited {
  color:                              inherit;
}
.footer dd > a:active, .footer dd > a:hover, .footer dd > a:focus, 
  dl.info dt:active, dl.info dt:hover {
  color:                              #a9caf6; /* $spx-color-blue-150 */
}


/* Info links + popups */
dl.info dt {
  cursor:                             pointer;
}
dl.info dt:before {
  content:                            "";
  display:                            inline-block;
  width:                              1.2em;
  height:                             1.2em;
  vertical-align:                     baseline;
  background:                         transparent url(profile.22.1.png) no-repeat -76px 0;
}
/* Popup info box */
dl.info dd { /* [r6] */
  position:                           absolute;
  bottom:                             110%;
  left:                               50%;
  width:                              32em; /* [r3] */
  margin-left:                        -16em; /* [r3] */
  padding:                            0 0 2em 0;
  color:                              #1a1a1a; /* [r7] $spx-color-black-500 .9 */
  background:                         #ffffff;
  border:                             1px solid #cccccc; /* $spx-color-black-500, a: .2 */
  border-radius:                      3px;
  -webkit-box-shadow:                 0 8px 8px rgba(0, 0, 0, .5); /* $spx-color-black-500, a: .5 */
  -moz-box-shadow:                    0 8px 8px rgba(0, 0, 0, .5); /* $spx-color-black-500, a: .5 */
  box-shadow:                         0 8px 8px rgba(0, 0, 0, .5); /* $spx-color-black-500, a: .5 */
  /* [r9] */
  visibility:                         hidden;
  opacity:                            0;
  z-index:                            3;
}
/* Beak [r8] */
dl.info dd:before {
  content:                            "";
  position:                           absolute;
  top:                                100%;
  left:                               50%;
  margin-left:                        -12px; /* [r4] */
  border-style:                       solid; /* [r4] */
  border-color:                       #ffffff transparent transparent transparent; /* [r4] */
  border-width:                       12px 12px 0 12px; /* [r4] */
}
/* Show on foucus */
dl.info dd.show { /* [r9] */
  visibility:                         visible;
  opacity:                            1;
  transition:                         opacity .3s, visibility 0s;
}

/* Close buutton [r11] */
dl.info .closebutton {
  position:                           absolute;
  font-weight:                        800;
  text-align:                         center;
  top:                                0;
  right:                              0;
  width:                              2em;
  line-height:                        2em;
  cursor:                             pointer;
}


/* Narrow layout; align info not to overflow */
@media screen and (max-width: 53em) {
  dl.info dd {
    left:                             auto;
    right:                            5em;
    margin-left:                      0;
  }
  /* Beak [r8] */
  dl.info dd:before {
    left:                             auto;
    right:                            5em;
    margin-left:                      0; /* [r4] */
  }
}


/* Small/mobile screens: [r12] */
@media screen and (max-width: 46em) {
  .main {
    margin:                           0 0 2em 0; /* [r1] */
  }
  dl.info dt:before, dl.info dd:before, dl.info dd:after { /* [r8] [r11] */
    content:                          none;
  }
  dl.info .closebutton {
    display: none;
  }
  dl.info dd {
    position:                         relative;
    visibility:                       visible;
    opacity:                          1;
    bottom:                           auto;
    left:                             auto;
    right:                            auto;
    width:                            auto;
    margin:                           -2em 0 2em 0;
    padding:                          1.5em 0 0 0;
    border:                           none;
    color:                            inherit;
    background:                       none;
    -webkit-box-shadow:               none;
    -moz-box-shadow:                  none;
    box-shadow:                       none;
  }
  dl.info dd.transition {
    transition:                       none;
  }
  dl.info dd h2 {
    display:                          none;
  }
   { 
    content:                          none;
  }
  .footer {
    position:                         relative;
    padding:                          0 0 2em 0; /* [r1] */
  }
  .footer {
    overflow:                         hidden;
  }
  .footer dl {
    float:                            none;
    min-width:                        0;
    border:                           none;
  }
}

/* Small width, small height: */
@media screen and (max-width: 33em), screen and (max-height: 28em) {
  h1 {
    height:                           auto;
    max-height:                       none;
  }
  .intro {
    display:                          none;
  }
}

/* Small/mobile scrrens, small height: [r12] */
@media screen and (max-width: 46em), screen and (max-height: 28em) {
  .badge img, svg {
    transform:                        scale(.8);
  }
}