.main {
  overflow: hidden;
}

.hero-section-hero {
  background-repeat: no-repeat;
  background-image: url('/National_Library/20161130034600oe_/https://developer.apple.com/programs/enterprise/images/enterprise-hero.jpg');
  background-size:984px 596px;
  width:984px;
  height:596px;
  margin: 0 auto 48px;
}

@-webkit-keyframes scaleBar {
  from { -webkit-transform: scaleX(0); }
  to { -webkit-transform: scaleX(1);}
}

#enroll {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  margin: 0 auto;
  display:block;
}

.animate .enroll-form {
  -webkit-transform-origin: 175px 95px;
  -moz-transform-origin: 175px 95px;
  -o-transform-origin: 175px 95px;
  transform-origin: 175px 95px;
  position: relative;
  -webkit-animation: pop 0.4s 1 0.5s ease-in-out both;
  -moz-animation: pop 0.4s 1 0.5s ease-in-out both;
  -o-animation: pop 0.4s 1 0.5s ease-in-out both;
  animation: pop 0.4s 1 0.5s ease-in-out both;
  -webkit-animation-play-state: inherit;
  -moz-animation-play-state: inherit;
  -o-animation-play-state: inherit;
  animation-play-state: inherit;
}

.animate .enroll-bar-1 {
  -webkit-transform-origin: 131px 57.8px;
  -moz-transform-origin: 131px 57.8px;
  -o-transform-origin: 131px 57.8px;
  transform-origin: 131px 57.8px;
  -webkit-animation: scaleBar 0.4s 1 0.8s ease-in-out both;
  -moz-animation: scaleBar 0.4s 1 0.8s ease-in-out both;
  -o-animation: scaleBar 0.4s 1 0.8s ease-in-out both;
  animation: scaleBar 0.4s 1 0.8s ease-in-out both;
  -webkit-animation-play-state: inherit;
  -moz-animation-play-state: inherit;
  -o-animation-play-state: inherit;
  animation-play-state: inherit;
}

.animate .enroll-bar-2 {
  -webkit-transform-origin: 131px 73.7px;
  -moz-transform-origin: 131px 73.7px;
  -o-transform-origin: 131px 73.7px;
  transform-origin: 131px 73.7px;
  -webkit-animation: scaleBar 0.4s 1 1s ease-in-out both;
  -moz-animation: scaleBar 0.4s 1 1s ease-in-out both;
  -o-animation: scaleBar 0.4s 1 1s ease-in-out both;
  animation: scaleBar 0.4s 1 1s ease-in-out both;
  -webkit-animation-play-state: inherit;
  -moz-animation-play-state: inherit;
  -o-animation-play-state: inherit;
  animation-play-state: inherit;
}

.animate .enroll-bar-3 {
  -webkit-transform-origin: 131px 89.5px;
  -moz-transform-origin: 131px 89.5px;
  -o-transform-origin: 131px 89.5px;
  transform-origin: 131px 89.5px;
  -webkit-animation: scaleBar 0.4s 1 1.2s ease-in-out both;
  -moz-animation: scaleBar 0.4s 1 1.2s ease-in-out both;
  -o-animation: scaleBar 0.4s 1 1.2s ease-in-out both;
  animation: scaleBar 0.4s 1 1.2s ease-in-out both;
  -webkit-animation-play-state: inherit;
  -moz-animation-play-state: inherit;
  -o-animation-play-state: inherit;
  animation-play-state: inherit;
}

.animate .enroll-submit-button {
  -webkit-transform-origin: 142px 110px;
  -moz-transform-origin: 142px 110px;
  -o-transform-origin: 142px 110px;
  transform-origin: 142px 110px;
  position: relative;
  -webkit-animation: pop 0.3s 1 1.2s ease-in-out both;
  -moz-animation: pop 0.3s 1 1.2s ease-in-out both;
  -o-animation: pop 0.3s 1 1.2s ease-in-out both;
  animation: pop 0.3s 1 1.2s ease-in-out both;
  -webkit-animation-play-state: inherit;
  -moz-animation-play-state: inherit;
  -o-animation-play-state: inherit;
  animation-play-state: inherit;
}

@-webkit-keyframes distribute-device-front {
  from { -webkit-transform: scale(1.2); }
  to { -webkit-transform: scale(1);}
}

@keyframes distribute-device-front {
  from {
    -moz-transform: scale(1.2);
      -o-transform: scale(1.2);
         transform: scale(1.2);

    }
  to {
    -moz-transform: scale(1);
      -o-transform: scale(1);
         transform: scale(1);
    }
}

@-webkit-keyframes distribute-device-middle-left {
  from { -webkit-transform: translateX(-80px); }
  top { -webkit-transform: translateX(0); }
}

@keyframes distribute-device-middle-left {
  from {
    -moz-transform: translateX(-80px);
      -o-transform: translateX(-80px);
         transform: translateX(-80px);
    }
  top {
    -moz-transform: translateX(0);
      -o-transform: translateX(0);
         transform: translateX(0);
    }
}

@-webkit-keyframes distribute-device-middle-right {
  from { -webkit-transform: translateX(80px); }
  to { -webkit-transform: translateX(0);  }
}

@keyframes distribute-device-middle-right {
  from {
    -moz-transform: translateX(80px);
      -o-transform: translateX(80px);
         transform: translateX(80px);
    }
  top {
    -moz-transform: translateX(0);
      -o-transform: translateX(0);
         transform: translateX(0);
    }
}

@-webkit-keyframes distribute-device-back-left {
  from { -webkit-transform: translateX(-150px); }
  to { -webkit-transform: translateX(0); }
}

@keyframes distribute-device-back-left {
  from {
    -moz-transform: translateX(-150px);
      -o-transform: translateX(-150px);
         transform: translateX(-150px);
    }
  top {
    -moz-transform: translateX(0);
      -o-transform: translateX(0);
         transform: translateX(0);
    }
}

@-webkit-keyframes distribute-device-back-right {
  from { -webkit-transform: translateX(150px); }
  to { -webkit-transform: translateX(0); }
}

@keyframes distribute-device-back-right {
  from {
    -moz-transform: translateX(150px);
      -o-transform: translateX(150px);
         transform: translateX(150px);
    }
  top {
    -moz-transform: translateX(0);
      -o-transform: translateX(0);
         transform: translateX(0);
    }
}

@-webkit-keyframes device-download {
  from { fill-opacity:0; stroke-opacity:0; -webkit-transform: translateY(-40px); }
  to { fill-opacity:1; stroke-opacity:1; -webkit-transform: translateY(0); }
}

@keyframes device-download {
  from {
    fill-opacity:0;
    stroke-opacity:0;
    -moz-transform: translateY(-40px);
      -o-transform: translateY(-40px);
         transform: translateY(-40px);
    }
  to {
    fill-opacity:1;
    stroke-opacity:1;
    -moz-transform: translateY(0);
      -o-transform: translateY(0);
         transform: translateY(0);
    }
}

.paused svg {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

#distribute {
  position: relative;
  overflow: visible;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.animate .device-download {
  position: relative;
  -webkit-animation: device-download 0.5s 1 ease-in-out both;
  -moz-animation: device-download 0.5s 1 ease-in-out both;
  -o-animation: device-download 0.5s 1 ease-in-out both;
  animation: device-download 0.5s 1 ease-in-out both;
  -webkit-animation-play-state: inherit;
  -moz-animation-play-state: inherit;
  -o-animation-play-state: inherit;
  animation-play-state: inherit;
}
.animate .download-front {
   -webkit-animation-delay: 0.4s;
   -moz-animation-delay: 0.4s;
   -o-animation-delay: 0.4s;
   animation-delay: 0.4s;
}

.animate .download-middle {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.animate .download-back {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  -o-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.animate .distribute-device-front {
  position: relative;
  -webkit-transform-origin: 210px 100px;
  -o-transform-origin: 210px 100px;
  -webkit-animation: distribute-device-front 1s 1 ease-in-out both;
  -o-animation: distribute-device-front 1s 1 ease-in-out both;
  -webkit-animation-play-state: inherit;
  -o-animation-play-state: inherit;

}

.animate .distribute-device-middle-left{
  -webkit-animation: distribute-device-middle-left 0.5s 1 ease-in-out both;
  -moz-animation: distribute-device-middle-left 0.5s 1 ease-in-out both;
  -o-animation: distribute-device-middle-left 0.5s 1 ease-in-out both;
  animation: distribute-device-middle-left 0.5s 1 ease-in-out both;
  position: relative;
  -webkit-animation-play-state: inherit;
  -moz-animation-play-state: inherit;
  -o-animation-play-state: inherit;
  animation-play-state: inherit;
}

.animate .distribute-device-middle-right {
  -webkit-animation: distribute-device-middle-right 0.5s 1 ease-in-out both;
  -moz-animation: distribute-device-middle-right 0.5s 1 ease-in-out both;
  -o-animation: distribute-device-middle-right 0.5s 1 ease-in-out both;
  animation: distribute-device-middle-right 0.5s 1 ease-in-out both;
  position: relative;
  -webkit-animation-play-state: inherit;
  -moz-animation-play-state: inherit;
  -o-animation-play-state: inherit;
  animation-play-state: inherit;
}

.animate .distribute-device-back-left {
  -webkit-animation: distribute-device-back-left 0.8s 1 ease-in-out both;
  -moz-animation: distribute-device-back-left 0.8s 1 ease-in-out both;
  -o-animation: distribute-device-back-left 0.8s 1 ease-in-out both;
  animation: distribute-device-back-left 0.8s 1 ease-in-out both;
  position: relative;
  -webkit-animation-play-state: inherit;
  -moz-animation-play-state: inherit;
  -o-animation-play-state: inherit;
  animation-play-state: inherit;
}

.animate .distribute-device-back-right {
  -webkit-animation: distribute-device-back-right 0.8s 1 ease-in-out both;
  -moz-animation: distribute-device-back-right 0.8s 1 ease-in-out both;
  -o-animation: distribute-device-back-right 0.8s 1 ease-in-out both;
  animation: distribute-device-back-right 0.8s 1 ease-in-out both;
  position: relative;
  -webkit-animation-play-state: inherit;
  -moz-animation-play-state: inherit;
  -o-animation-play-state: inherit;
  animation-play-state: inherit;
}


@-webkit-keyframes pop {
  from { -webkit-transform: scale(0); }
  to { -webkit-transform: scale(1); }
}

@keyframes pop {
  from {
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
  to {
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

#test-devices {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  margin: 0 auto;
  display:block;
}

.animate .test-circle {
  position: relative;
  -webkit-animation: pop 0.4s 1 both;
  -moz-animation: pop 0.4s 1 both;
  -o-animation: pop 0.4s 1 both;
  animation: pop 0.4s 1 both;
  -webkit-animation-play-state: inherit;
  -moz-animation-play-state: inherit;
  -o-animation-play-state: inherit;
  animation-play-state: inherit;
}

.animate .test-checkmark {
  stroke-dasharray:50;
  stroke-dashoffset: 0;
  -webkit-animation: dash 0.9s 1 both;
  -moz-animation: dash 0.9s 1 both;
  -o-animation: dash 0.9s 1 both;
  animation: dash 0.9s 1 both;
  -webkit-animation-play-state: inherit;
  -moz-animation-play-state: inherit;
  -o-animation-play-state: inherit;
  animation-play-state: inherit;
}

.animate .circle-1 {
  -webkit-transform-origin: 70px 94px;
  -moz-transform-origin: 70px 94px;
  -o-transform-origin: 70px 94px;
  transform-origin: 70px 94px;
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}

.animate .circle-2 {
  -webkit-transform-origin: 130px 130px;
  -moz-transform-origin: 130px 130px;
  -o-transform-origin: 130px 130px;
  transform-origin: 130px 130px;
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

@-webkit-keyframes dash {
  0% {
    stroke-dashoffset:50;
  }
  15% {
    stroke-dashoffset:50;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset:50;
  }
  15% {
    stroke-dashoffset:50;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

#get-started {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  margin: 0 auto;
  display:block;
}

.animate .member {
  -webkit-transform-origin: 55px 110px;
  -moz-transform-origin: 55px 110px;
  -o-transform-origin: 55px 110px;
  transform-origin: 55px 110px;
  position: relative;
  -webkit-animation: pop 0.4s 0.6s 1 both;
  -moz-animation: pop 0.4s 0.6s 1 both;
  -o-animation: pop 0.4s 0.6s 1 both;
  animation: pop 0.4s 0.6s 1 both;
  -webkit-animation-play-state: inherit;
  -moz-animation-play-state: inherit;
  -o-animation-play-state: inherit;
  animation-play-state: inherit;
}

.animate .member-2 {
  -webkit-transform-origin: 102px 143px;
  -moz-transform-origin: 102px 143px;
  -o-transform-origin: 102px 143px;
  transform-origin: 102px 143px;
  -webkit-animation-delay:0.8s !important;
  -moz-animation-delay:0.8s !important;
  -o-animation-delay:0.8s !important;
  animation-delay:0.8s !important;
}

.animate .hammer {
  -webkit-transform-origin: 168px 80px;
  -moz-transform-origin: 168px 80px;
  -o-transform-origin: 168px 80px;
  transform-origin: 168px 80px;
  position: relative;
  -webkit-animation: spin 0.7s 1 both;
  -moz-animation: spin 0.7s 1 both;
  -o-animation: spin 0.7s 1 both;
  animation: spin 0.7s 1 both;
  -webkit-animation-play-state: inherit;
  -moz-animation-play-state: inherit;
  -o-animation-play-state: inherit;
  animation-play-state: inherit;
}

@-webkit-keyframes spin {
  from { -webkit-transform: scale(0) rotate(-180deg); }
  to { -webkit-transform: scale(1) rotate(0deg);}
}

@keyframes spin {
  from {
    -moz-transform: scale(0) rotate(-180deg);
    -o-transform: scale(0) rotate(-180deg);
    transform: scale(0) rotate(-180deg);
  }
  to {
    -moz-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
  }
}

@media all and (min-width: 768px) and (max-width: 1023px) {
  .hero-section-hero {
    background-image: url('/National_Library/20161130034600oe_/https://developer.apple.com/programs/enterprise/images/enterprise-hero-medium.jpg');
    background-size:700px 424px;
    width:700px;
    height:424px;
    margin: 0 auto 48px;
  }
}

@media all and (max-width: 767px) {
  .hero-section-hero {
    background-image: url('/National_Library/20161130034600oe_/https://developer.apple.com/programs/enterprise/images/enterprise-hero-small.jpg');
    background-size:300px 182px;
    width:300px;
    height:182px;
    margin: 0 auto 24px;
  }

  .router svg,
  .how-it-works svg {
    width:100%;
  }

  .how-it-works svg {
    margin-bottom:24px !important;
  }

  .router svg {
    margin-bottom: 0 !important
  }

  .about-enterprise .col-50 {
    padding-left:1em !important;
    padding-right:1em !important;
  }

  .about-enterprise .col-50 table {
    width:100%;
  }
}