/* CSS Document */
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,600&display=swap");
/* CSS Document */
h1 {
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  display: block;
  font-size: 3.5em;
  font-weight: bold;
  line-height: 1em;
  text-align: center; }
  h1 > span {
    margin-top: 5px;
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: .2em;
    font-weight: 400;
    line-height: 1em;
    text-transform: uppercase;
    letter-spacing: 2px; }
  @media (min-width: 64em) {
    h1 {
      width: 140px;
      margin: 0px 20px; } }
  @media (min-width: 118em) {
    h1 {
      width: 100%;
      margin: 0px; } }

h2 {
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  display: block;
  font-size: 1.8em;
  font-weight: 400;
  line-height: 1em;
  text-align: center; }

h3 {
  margin: 20px 0px 0px 0px;
  padding: 0px;
  font-size: .875em;
  font-weight: bold;
  line-height: 1.25em; }
  h3 > span {
    font-size: .75em; }
  h3.windows::after {
    width: 12px;
    height: 12px;
    display: inline-block;
    content: "";
    background-image: url("../assets/ui/applications/windows.svg");
    background-repeat: no-repeat;
    background-size: contain;
    padding: 0px;
    margin-top: 2px;
    margin-left: 5px;
    vertical-align: top; }
  h3.apple::after {
    width: 13px;
    height: 13px;
    display: inline-block;
    content: "";
    background-image: url("../assets/ui/applications/apple.svg");
    background-repeat: no-repeat;
    background-size: contain;
    padding: 0px;
    margin-top: 0px;
    margin-left: 5px;
    vertical-align: top; }
  h3.powerpoint::after {
    width: 15px;
    height: 15px;
    display: inline-block;
    content: "";
    background-image: url("../assets/ui/applications/powerpoint.svg");
    background-repeat: no-repeat;
    background-size: contain;
    padding: 0px;
    margin-top: 0px;
    margin-left: 5px;
    vertical-align: top; }

p {
  font-size: 1.25em;
  text-align: justify;
  line-height: 1.5em; }

sub {
  display: inline-block;
  font-size: .75em;
  vertical-align: baseline; }

a {
  font-size: inherit;
  color: inherit;
  text-decoration: none; }
  a.button {
    width: 300px;
    height: 50px;
    margin: 20px auto 100px auto;
    display: block;
    background-color: #4392f3;
    border: 1px solid #999999;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 50px;
    color: #f1f1f1;
    cursor: pointer;
    transition: .125s ease-in; }
    a.button:hover {
      background-color: #1376f0; }
      a.button:hover:after {
        background-position: 5px 0px; }
    a.button:after {
      content: "";
      width: 20px;
      height: 20px;
      margin: 0px;
      background-image: url("../assets/ui/icons/arrow-forward.svg");
      background-repeat: no-repeat;
      background-size: contain;
      display: inline-block;
      margin-left: 5px;
      vertical-align: text-bottom;
      transition: .125s ease-in; }
  a.download-logo {
    width: 100%;
    height: 50px;
    margin: 10px 0px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; }
    a.download-logo.zoom {
      background-image: url("../assets/ui/applications/zoom.png"); }
    a.download-logo.amazon {
      background-image: url("../assets/ui/applications/amazon.png"); }
    a.download-logo.adobe {
      background-image: url("../assets/ui/applications/adobe.png"); }
    a.download-logo.office {
      background-image: url("../assets/ui/applications/office.png"); }
    a.download-logo.mediaspace {
      background-image: url("../assets/ui/applications/mediaspace.png"); }
    a.download-logo.tophat {
      background-image: url("../assets/ui/applications/tophat.png"); }
    a.download-logo.calendly {
      background-image: url("../assets/ui/applications/calendly.png"); }
  a.download-textbook {
    width: 100%;
    height: 100px;
    margin: 10px 0px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; }
  a.download-pdf {
    width: 100%;
    height: 60px;
    margin: 10px 0px;
    display: block;
    background-image: url("../assets/ui/icons/pdf.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; }

.bold {
  font-weight: 600; }

/* CSS Document */
label {
  width: 300px;
  height: auto;
  margin: 0px auto;
  padding: 0px 20px;
  display: block;
  font-size: .55em;
  font-weight: 700;
  text-align: left;
  line-height: 1.3em; }

input[type=text], input[type=number] {
  width: 300px;
  height: 40px;
  margin: 0px 5px;
  padding: 0px;
  display: inline-block;
  background-color: #f1f1f1;
  border: 1px solid rgba(174, 174, 174, 0.3);
  border-radius: 5px;
  outline: none;
  box-sizing: border-box;
  font-size: 1em;
  text-align: center;
  color: #333333;
  transition: .125s ease; }
  input[type=text]:focus, input[type=number]:focus {
    background-color: #fefefe;
    color: #333333;
    box-shadow: 0px -5px 15px 0px rgba(255, 255, 255, 0.9), 0px 5px 15px 0px rgba(174, 174, 174, 0.7); }

input[type=color] {
  width: 50%;
  height: 100px;
  padding: 0px;
  outline: none;
  display: block; }

textarea {
  background-color: transparent;
  width: 100%;
  height: 150px;
  margin: 0px;
  padding: 10px;
  overflow: auto;
  border: 1px solid rgba(174, 174, 174, 0.3);
  border-radius: 5px;
  box-sizing: border-box;
  outline: none;
  resize: none; }

button {
  width: 30px;
  height: 40px;
  margin: 0px;
  padding: 0px;
  display: inline-block;
  background-color: #f1f1f1;
  background-image: url("../assets/ui/icons/add.svg");
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid rgba(174, 174, 174, 0.3);
  border-radius: 5px;
  outline: none;
  vertical-align: middle;
  cursor: pointer; }
  button:hover {
    background-color: #4392f3;
    background-image: url("../assets/ui/icons/add-invert.svg"); }

/* CSS Document */
article.widget, article.textbook {
  width: 320px;
  min-height: 0px;
  height: auto;
  margin: -90px auto 50px auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  background: transparent;
  background-color: #f1f1f1;
  border: 1px solid rgba(174, 174, 174, 0.3);
  border-radius: 7px;
  box-shadow: 0px -5px 15px 0px rgba(255, 255, 255, 0.9), 0px 5px 15px 0px rgba(174, 174, 174, 0.7); }
  @media (min-width: 64em) {
    article.widget, article.textbook {
      margin: -200px auto 50px auto; } }
  @media (min-width: 85em) {
    article.widget, article.textbook {
      margin: -160px auto 70px auto; } }
  @media (min-width: 118em) {
    article.widget, article.textbook {
      margin: -260px auto 100px auto; } }
  @media (min-width: 158em) {
    article.widget, article.textbook {
      margin: -460px auto 150px auto; } }
  article.widget #widget-title, article.textbook #widget-title {
    width: 100%;
    height: 50px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 30px; }
  article.widget #widget-user, article.textbook #widget-user {
    width: 20%;
    height: auto;
    margin-left: 5%; }
  article.widget #widget-link, article.textbook #widget-link {
    width: 65%;
    height: auto;
    padding: 0px 5%;
    font-size: 14px;
    text-align: center;
    line-height: 20px; }
  article.widget #widget-software, article.textbook #widget-software {
    text-align: center; }
    article.widget #widget-software img, article.textbook #widget-software img {
      width: 80%;
      height: auto; }
  article.widget a, article.textbook a {
    height: auto;
    margin: 0px;
    padding: 0px;
    display: inline-block; }
  article.widget img, article.textbook img {
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0px; }

article.textbook {
  background-color: #f1f1f1;
  width: 760px;
  min-height: 0px;
  height: auto;
  margin: -90px auto 50px auto;
  padding: 20px;
  border-radius: 7px;
  box-shadow: 0px -5px 15px 0px rgba(255, 255, 255, 0.9), 0px 5px 15px 0px rgba(174, 174, 174, 0.7);
  border: 1px solid rgba(174, 174, 174, 0.3);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  @media (min-width: 64em) {
    article.textbook {
      margin: -200px auto 50px auto; } }
  @media (min-width: 85em) {
    article.textbook {
      margin: -160px auto 70px auto; } }
  @media (min-width: 118em) {
    article.textbook {
      margin: -260px auto 100px auto; } }
  @media (min-width: 158em) {
    article.textbook {
      margin: -460px auto 150px auto; } }
  article.textbook #news-headline {
    font-size: 2em;
    font-weight: 500;
    color: #4392f3;
    flex-basis: 100%;
    text-align: left;
    margin-bottom: 20px; }
    article.textbook #news-headline::after {
      width: 30px;
      height: 30px;
      display: inline-block;
      content: "";
      font-weight: 600;
      background-image: url("../assets/ui/icons/arrow-down.svg");
      background-repeat: no-repeat;
      background-size: contain;
      color: #666666;
      padding: 0px;
      vertical-align: middle;
      opacity: .5; }
  article.textbook #news-image {
    width: 15%;
    height: auto; }
    article.textbook #news-image img {
      width: 100%;
      height: auto; }
  article.textbook #news-content {
    width: calc(85% - 35px);
    height: auto;
    text-align: left; }
    article.textbook #news-content > div {
      margin: 0px;
      font-size: 1.25em;
      font-weight: 600;
      line-height: 1.7em; }
      article.textbook #news-content > div#news-title {
        font-weight: 600; }
      article.textbook #news-content > div#news-author, article.textbook #news-content > div#news-isbn {
        padding-left: 20px;
        font-size: 1.125em; }
    article.textbook #news-content img {
      height: 45px;
      width: auto;
      margin: 20px 0px; }

article.description {
  width: 800px;
  min-height: 0px;
  height: auto;
  margin: -90px auto 50px auto;
  padding: 0px;
  border-radius: 7px;
  box-shadow: 0px -5px 15px 0px rgba(255, 255, 255, 0.9), 0px 5px 15px 0px rgba(174, 174, 174, 0.7);
  border: 1px solid #333333;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  @media (min-width: 64em) {
    article.description {
      margin: -200px auto 50px auto; } }
  @media (min-width: 85em) {
    article.description {
      margin: -160px auto 70px auto; } }
  @media (min-width: 118em) {
    article.description {
      margin: -260px auto 100px auto; } }
  @media (min-width: 158em) {
    article.description {
      margin: -460px auto 150px auto; } }
  article.description > div.desc-title {
    height: 30px;
    margin-bottom: 0px;
    border-bottom: 1px solid #aaaaaa;
    font-size: 11px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    box-sizing: border-box; }
  article.description > div.desc-content {
    height: auto;
    padding: 5px 20px;
    text-align: left;
    box-sizing: border-box; }
  article.description > div.desc-length, article.description > div.desc-questions {
    height: 30px;
    margin-bottom: 0px;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #aaaaaa;
    border-radius: 5px 0px 0px 0px;
    font-size: 11px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    box-sizing: border-box; }
  article.description > div.desc-lengthvalue, article.description > div.desc-questionsvalue {
    height: auto;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #333333;
    border-radius: 0px 0px 0px 5px;
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    box-sizing: border-box; }
  article.description > div.desc-slides {
    height: 30px;
    margin-bottom: 0px;
    border-left: 1px solid #333333;
    border-bottom: 1px solid #aaaaaa;
    border-radius: 0px 5px 0px 0px;
    font-size: 11px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    box-sizing: border-box; }
  article.description > div.desc-slidesvalue {
    height: auto;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid #333333;
    border-radius: 0px 0px 5px 0px;
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    box-sizing: border-box; }

.style-a {
  background-color: #fefcf1; }
  .style-a > div.desc-title, .style-a > div.desc-content {
    width: 100%; }

.style-b, .style-d {
  background-color: #f1fff3; }
  .style-b > div.desc-length, .style-b > div.desc-lengthvalue, .style-d > div.desc-length, .style-d > div.desc-lengthvalue {
    width: 15%;
    background-color: #cfffd7; }
  .style-b > div.desc-title, .style-b > div.desc-content, .style-d > div.desc-title, .style-d > div.desc-content {
    width: 85%; }

.style-c {
  background-color: #f5fcff; }
  .style-c > div.desc-length, .style-c > div.desc-slides {
    width: 15%;
    background-color: #ddf5ff; }
  .style-c > div.desc-title, .style-c > div.desc-content {
    width: 70%; }
  .style-c > div.desc-lengthvalue, .style-c > div.desc-slidesvalue {
    width: 15%;
    background-color: #ddf5ff; }

.style-d {
  background-color: #fff2e6; }
  .style-d > div.desc-questions, .style-d > div.desc-questionsvalue {
    width: 15%;
    background-color: #ffe4ca; }

/* CSS Document */
ol {
  margin: 20px 0px 50px 0px;
  padding: 0px;
  padding-left: 0px;
  list-style-type: none;
  counter-reset: elementcounter; }
  ol > li {
    font-size: 1.25em;
    text-align: justify;
    line-height: 2em; }
    ol > li::before {
      content: "Step " counter(elementcounter) ". ";
      font-weight: 600;
      counter-increment: elementcounter; }
    ol > li > a {
      font-weight: 400;
      color: #4392f3; }
      ol > li > a > sup {
        width: 1em;
        height: 1em;
        display: inline-block;
        vertical-align: text-top;
        background-image: url("../assets/ui/icons/launch-accent.svg");
        background-repeat: no-repeat;
        background-size: contain; }
  ol > div {
    text-align: center; }
    ol > div img {
      width: 33%; }
  ol > ul {
    margin: 0px;
    padding: 20px 40px; }
    ol > ul > li {
      font-size: 1.25em;
      text-align: justify;
      line-height: 2em; }
  ol > ol.inset {
    margin: 0px;
    padding: 10px 60px;
    background-color: #c8c8c8;
    border-radius: 5px;
    list-style-type: upper-roman;
    counter-reset: none; }
    ol > ol.inset > li::before {
      content: "";
      counter-increment: none; }

ul.collection {
  margin: 0px 0px 10px 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-around; }
  @media (min-width: 64em) {
    ul.collection {
      margin: 0px .5% 10px .5%;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap; } }
  ul.collection > li {
    width: 90%;
    margin: 20px auto;
    padding: 0px;
    border: 1px solid rgba(174, 174, 174, 0.3);
    border-radius: 10px; }
    @media (min-width: 64em) {
      ul.collection > li {
        width: 45%;
        margin: 20px 2%; } }
    @media (min-width: 85em) {
      ul.collection > li {
        width: 30%;
        margin: 20px 1.5%; } }
    @media (min-width: 158em) {
      ul.collection > li {
        width: 22.5%;
        margin: 20px 1.125%; } }
    ul.collection > li > a {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;
      text-decoration: none;
      color: inherit; }
      @media (min-width: 64em) {
        ul.collection > li > a {
          flex-direction: row; } }
      ul.collection > li > a > img {
        margin: 0px auto;
        padding: 0px 10px;
        display: block; }
        ul.collection > li > a > img:first-of-type {
          width: 50px;
          padding: 5px 0px; }
          @media (min-width: 64em) {
            ul.collection > li > a > img:first-of-type {
              padding: 0px 10px; } }
        ul.collection > li > a > img:last-of-type {
          width: 20px;
          height: auto;
          padding: 10px calc(50% - 10px);
          background-color: #4392f3;
          border-radius: 0px 0px 10px 10px; }
          @media (min-width: 64em) {
            ul.collection > li > a > img:last-of-type {
              padding: 10px;
              border-radius: 0px 10px 10px 0px; } }
          ul.collection > li > a > img:last-of-type:hover {
            background-color: #1376f0; }
      ul.collection > li > a > div {
        width: 100%;
        margin: 0px;
        padding: 10px;
        box-sizing: border-box;
        border-top: 1px solid rgba(174, 174, 174, 0.3);
        border-bottom: 1px solid rgba(174, 174, 174, 0.3); }
        @media (min-width: 64em) {
          ul.collection > li > a > div {
            border: none;
            border-left: 1px solid rgba(174, 174, 174, 0.3);
            border-right: 1px solid rgba(174, 174, 174, 0.3);
            width: calc(100% - 110px;); } }
        ul.collection > li > a > div > p {
          font-size: .875em;
          margin-bottom: 0px; }

div.note {
  background-color: #d8d8d8;
  margin: 0px;
  padding: 20px;
  text-align: left; }
  div.note a {
    color: #4392f3;
    text-decoration: underline;
    cursor: pointer; }

html {
  height: 100%; }

body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #333333 radial-gradient(ellipse at center, #333333 0%, #0d0d0d 100%);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333; }
  @media (min-width: 64em) {
    body {
      font-size: 14.7px; } }
  @media (min-width: 118em) {
    body {
      flex-direction: row;
      justify-content: space-between;
      font-size: 15.4px; } }
  @media (min-width: 158em) {
    body {
      font-size: 19.6px; } }

header {
  width: 100%;
  height: 90px;
  margin: 0px;
  padding: 10px 0px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  color: #f1f1f1; }
  @media (min-width: 64em) {
    header {
      flex-direction: row;
      justify-content: flex-start; } }
  @media (min-width: 118em) {
    header {
      width: calc(100% * 1/12);
      height: 100%;
      padding: 20px 0px;
      flex-direction: column; } }
  header > nav {
    width: 100%;
    height: auto;
    margin: 20px 0px;
    padding: 0px;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box; }
    @media (min-width: 64em) {
      header > nav {
        margin: 0px 20px;
        display: flex;
        flex-direction: row; } }
    @media (min-width: 118em) {
      header > nav {
        margin: 40px 0px;
        flex-direction: column;
        flex-grow: 2; } }
    header > nav > ul {
      width: 100%;
      height: 40px;
      margin: 0px;
      padding: 0px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start; }
      @media (min-width: 64em) {
        header > nav > ul {
          flex-direction: row; } }
      @media (min-width: 118em) {
        header > nav > ul {
          flex-direction: column; } }
      header > nav > ul > li {
        width: 100%;
        height: 50px;
        margin: 5px 0px;
        display: inline-block;
        opacity: 0.6;
        font-size: .875em;
        font-weight: normal;
        text-align: center;
        line-height: 1em;
        list-style: none; }
        @media (min-width: 64em) {
          header > nav > ul > li {
            width: auto;
            height: calc(31px + 1em);
            padding: 10px 20px;
            margin: 0px; } }
        @media (min-width: 118em) {
          header > nav > ul > li {
            width: 100%;
            height: calc(46px + 1em);
            padding: 0px;
            margin: 20px 0px; } }
        header > nav > ul > li > a {
          width: 100%;
          height: inherit;
          display: block;
          text-decoration: none;
          color: inherit; }
          header > nav > ul > li > a::before {
            display: block;
            width: 100%;
            height: 46px;
            content: "";
            background-size: 100% 36px;
            background-position: center;
            background-repeat: no-repeat;
            transition: .125s ease-in; }
            @media (min-width: 64em) {
              header > nav > ul > li > a::before {
                background-size: 100% 31px;
                height: 35px; } }
            @media (min-width: 118em) {
              header > nav > ul > li > a::before {
                background-size: 100% 36px;
                height: 46px; } }
          @media (min-width: 64em) {
            header > nav > ul > li > a:hover::before {
              background-size: 100% 31px; } }
          @media (min-width: 118em) {
            header > nav > ul > li > a:hover::before {
              background-size: 100% 46px; } }
        header > nav > ul > li:hover {
          opacity: .9; }
        header > nav > ul > li.home > a::before {
          background-image: url("../assets/ui/icons/home.svg"); }
        header > nav > ul > li.office-widget > a::before {
          background-image: url("../assets/ui/icons/office-widget.svg"); }
        header > nav > ul > li.software-widget > a::before {
          background-image: url("../assets/ui/icons/software-widget.svg"); }
        header > nav > ul > li.textbook-news > a::before {
          background-image: url("../assets/ui/icons/textbook-news.svg"); }
        header > nav > ul > li.descriptions > a::before {
          background-image: url("../assets/ui/icons/descriptions.svg"); }
        header > nav > ul > li.resources > a::before {
          background-image: url("../assets/ui/icons/resources.svg"); }
        header > nav > ul > li.active {
          opacity: 1; }
  header > div {
    display: none; }
    @media (min-width: 118em) {
      header > div {
        margin: 0px 0px;
        display: block;
        font-size: .875em;
        text-align: center;
        color: #333333; } }

main {
  width: calc(100% - 20px);
  height: auto;
  min-height: calc(100% - 110px);
  margin: 0px auto;
  padding: 10px 0px;
  box-sizing: border-box;
  overflow: auto;
  background: #f1f1f1;
  background-image: url("../assets/ui/general.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
  border-radius: 10px;
  box-shadow: 0px 0px 0.75em 0.75em rgba(0, 0, 0, 0.9); }
  @media (min-width: 64em) {
    main {
      width: calc(100% - 40px); } }
  @media (min-width: 118em) {
    main {
      width: calc(100% * 11/12);
      min-height: 100%;
      margin: 0px;
      border-radius: 10px 0px 0px 10px; } }
  main.office-widget {
    background-image: url("../assets/ui/office-widget.png"); }
  main.software-widget {
    background-image: url("../assets/ui/software-widget.png"); }
  main.textbook-news {
    background-image: url("../assets/ui/textbook-news.png"); }
  main > section {
    width: 100%;
    height: auto;
    padding: 125px 0px 0px 0px;
    overflow: hidden; }
    @media (min-width: 64em) {
      main > section {
        padding: 225px 0px 0px 0px; } }
    @media (min-width: 118em) {
      main > section {
        padding: 375px 0px 0px 0px; } }
    @media (min-width: 158em) {
      main > section {
        padding: 750px 0px 0px 0px; } }
    main > section#office-widget-home {
      display: block; }
    main > section#office-widget-creator {
      display: none; }
    main > section#software-widget-home {
      display: block; }
    main > section#software-widget-creator {
      display: none; }
    main > section#textbook-news-home {
      display: block; }
    main > section#textbook-news-creator {
      display: none; }
    main > section#descriptions-home {
      display: block; }
    main > section#descriptions-creator {
      display: none; }
    main > section > aside {
      width: 100%;
      height: auto;
      margin: 0px;
      padding: 10px 20px 40px 20px;
      box-sizing: border-box;
      background-color: #f1f1f1;
      box-shadow: 0px 0px 50px 50px #f1f1f1;
      color: #ff0004; }
      @media (min-width: 64em) {
        main > section > aside {
          display: none; } }
    main > section > article {
      width: 100%;
      height: auto;
      margin: 0px;
      padding: 10px 20px 40px 20px;
      box-sizing: border-box;
      background-color: #f1f1f1;
      box-shadow: 0px 0px 50px 50px #f1f1f1; }
      @media (min-width: 64em) {
        main > section > article {
          padding: 10px 200px 40px 200px; } }
      @media (min-width: 118em) {
        main > section > article {
          padding: 10px 300px 40px 300px; } }
      main > section > article > div.input {
        height: auto;
        margin: 5px auto;
        padding: 0px;
        text-align: center; }
      main > section > article > ul {
        margin: 20px 0px;
        padding: 0px;
        display: flex;
        flex-direction: row;
        justify-content: center; }
        main > section > article > ul > li {
          width: 175px;
          height: auto;
          padding: 0px 20px;
          display: inline-block;
          text-align: center; }
          main > section > article > ul > li > img {
            width: 100px;
            height: auto;
            margin-bottom: 10px;
            display: inline-block;
            border-radius: 50px; }
      main > section > article > ul.application-selection {
        text-align: left;
        margin: 20px 0px 50px 20px;
        padding: 0px;
        padding-left: 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; }
        main > section > article > ul.application-selection li {
          background-color: #f1f1f1;
          background-repeat: no-repeat;
          background-size: 80%;
          background-position: center;
          width: 320px;
          height: 100px;
          margin: 0px 20px;
          margin-bottom: 20px;
          border-radius: 5px;
          display: inline-block;
          box-sizing: border-box;
          cursor: pointer; }
          main > section > article > ul.application-selection li#adobe {
            background-image: url("../assets/ui/applications/adobe.png"); }
          main > section > article > ul.application-selection li#office {
            background-image: url("../assets/ui/applications/office.png"); }
          main > section > article > ul.application-selection li#mediaspace {
            background-image: url("../assets/ui/applications/mediaspace.png"); }
          main > section > article > ul.application-selection li#tophat {
            background-image: url("../assets/ui/applications/tophat.png"); }
          main > section > article > ul.application-selection li#calendly {
            background-image: url("../assets/ui/applications/calendly.png"); }
          main > section > article > ul.application-selection li.active {
            border: 3px solid #4392f3; }
          main > section > article > ul.application-selection li.inactive {
            border: 1px solid rgba(174, 174, 174, 0.3); }
      main > section > article > ul.devs > li {
        width: 175px; }
        main > section > article > ul.devs > li > img {
          width: 100px;
          border-radius: 50px; }

footer {
  width: 100%;
  height: 20px;
  margin: 0px;
  padding: 0px;
  font-size: .75em;
  text-align: center;
  line-height: 20px; }
  @media (min-width: 118em) {
    footer {
      display: none; } }