/* Variables */
/* Mixins */
header > form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 1.4em;
  padding-bottom: 4em;
}
header > form > * {
  max-width: 100%;
}
header > form > h1 {
  text-align: center;
  font-size: 3em;
}
header > form > div,
header > form > div > input[type=text] {
  border-radius: 5px;
}
header > form > div {
  display: flex;
  margin: 0;
  padding: 0;
  width: 500px;
  box-shadow: 2px 2px 10px #004a7f;
  background-color: #FFF;
}
header > form > div > input[type=text],
header > form > div > input[type=submit] {
  outline: 0;
  border: 0;
}
header > form > div > input[type=text] {
  flex: 1;
  padding: 1.125em;
  background-color: transparent;
  background-color: #FFF;
  color: #434955;
  font-size: 1em;
}
header > form > div > input[type=text]::placeholder {
  color: #A5A5A5;
  font-style: italic;
  opacity: 1;
}
header > form > div > input[type=submit] {
  width: calc(2.25em + 24px);
  border-radius: 0 5px 5px 0;
  background: #2db8e4 url("../Images/search_24.png") center no-repeat;
  color: #FFF;
  font-size: 1em;
}
header > form > div > input[type=submit]:hover {
  background: #073F5C url("../Images/search_24.png") center no-repeat;
}
main > form > .menu > div > h1 {
  display: none;
}
main > form > .menu > div > .otherLinks {
  margin-top: 0.5em;
}
main > form > .menu > div > nav > ul {
  padding-left: 0;
  list-style: none;
}
main > form > .menu > div > nav > ul > li > .myRequests:before {
  content: "\f3ff";
}
main > form > .menu > div > nav > ul > li > .myDocuments:before {
  content: "\f15c";
}
main > form > .menu > div > nav > ul > li > .chat:before {
  content: "\f075";
}
main > form > .menu > div > nav > ul > li > .myServices:before {
  content: "\f085";
}
main > form > .menu > div > nav > ul > li > .myServiceStatus:before {
  content: "\f071";
}
main > form > .menu > div > nav > ul > li > .myPendingApprovals:before {
  content: "\f164";
}
main > form > .menu > div > nav > ul > li > .raiseNewRequest:before {
  content: "\f044";
}
main > form > .menu > div > nav > ul > li > .mySurveys:before {
  content: "\f328";
}
main > form > .menu > div > nav > ul > li > .knowledgeItems:before {
  content: "\f02d";
}
main > form > .menu > div > nav > ul > li > .myResources:before {
  content: "\f234";
}
main > form > .menu > div > nav > ul > li > a > .description {
  display: none;
}
main > form > .knowledgeBase > div > div {
  display: flex;
}
main > form > .knowledgeBase > div > div > section {
  width: calc(33.3% - 1em);
  margin-right: 1em;
}
main > form > .knowledgeBase > div > div > section:last-child {
  margin-right: 0;
}
main > form > .knowledgeBase > div > div > section > h2 {
  font-size: 1em;
}
main > form > .knowledgeBase > div > div > section > ul {
  padding-left: 0;
  list-style: none;
}
main > form > .knowledgeBase > div > div > section > ul > li > a:before {
  content: "\f02d";
}
main > form > .knowledgeBase > div > ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin-top: 1em;
}
main > form > .knowledgeBase > div > ul > li {
  margin-bottom: 0;
}
main > form > .knowledgeBase > div > ul > li > a:before {
  content: '\f111';
  width: auto;
  color: #434955;
  font-weight: normal;
}
main > form > .knowledgeBase > div > ul > li > a.selected:before {
  font-weight: bold;
}
main > form > .knowledgeBase > div > div:not(:first-of-type) {
  display: none;
}
main > form > .latestNews > div > .moreNews {
  display: block;
  margin-top: 1.5em;
}
main > form > .latestNews > div > h1 > a {
  color: #434955;
}
main > form > .latestNews > div > article > h3 {
  color: #757575;
}
@media only screen and (max-width: 900px) {
  header > form {
    padding-top: 0;
    padding-bottom: 2em;
  }
  main > form > .menu > div > h1 {
    display: block;
  }
  main > form > .knowledgeBase > div > div {
    flex-direction: column;
  }
  main > form > .knowledgeBase > div > div > section {
    margin-bottom: 1em;
    margin-right: 0;
    width: auto;
  }
  main > form > .knowledgeBase > div > div > section:last-child {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 900px) {
  header {
    z-index: 2;
  }
  main > form > .menu > div {
    padding-top: 0;
    padding-bottom: 0;
  }
  .messages + main > form > .menu > div {
    padding-top: 2em;
  }
  .messages + main > form > .menu > div > .promotedLinks,
  main > form > .menu > div > .otherLinks {
    border-top: 1px solid #E5E5E5;
  }
  main > form > .menu > div > .promotedLinks > ul {
    display: flex;
  }
  main > form > .menu > div > .promotedLinks > ul > li {
    flex: 1;
    margin-bottom: 0;
    border-left: 1px solid #E5E5E5;
  }
  main > form > .menu > div > .promotedLinks > ul > li:hover {
    z-index: 1;
    transition: border-color 0.5s;
  }
  main > form > .menu > div > .promotedLinks > ul > li:nth-child(1) {
    border-left-color: transparent;
  }
  main > form > .menu > div > .promotedLinks > ul > li:nth-child(1):hover {
    border-left-color: #E5E5E5;
  }
  main > form > .menu > div > .promotedLinks > ul > li:last-child {
    border-right: 1px solid transparent;
  }
  main > form > .menu > div > .promotedLinks > ul > li:last-child:hover {
    border-right-color: #E5E5E5;
  }
  main > form > .menu > div > .promotedLinks > ul > li > a {
    padding: 2em;
    height: 100%;
    text-align: center;
    white-space: normal;
    transition: box-shadow 0.5s;
    font-size: 12pt;
  }
  main > form > .menu > div > .promotedLinks > ul > li > a:hover {
    background-color: #FFFFFF;
    box-shadow: 2px 2px 50px #c2c2c2;
  }
  main > form > .menu > div > .promotedLinks > ul > li > a:before {
    display: block;
    width: 100%;
    font-size: 5em;
    margin-bottom: 0.25em;
  }
  main > form > .menu > div > .promotedLinks > ul > li > a > .title {
    font-size: 1.25em;
    font-weight: bold;
  }
  main > form > .menu > div > .promotedLinks > ul > li > a > .description {
    display: block;
    color: #434955;
  }
  main > form > .menu > div > .otherLinks {
    margin-top: 0;
    padding: 2em 8em 1.5em 8em;
  }
  main > form > .menu > div > .otherLinks > ul {
    text-align: center;
  }
  main > form > .menu > div > .otherLinks > ul > li {
    display: inline-block;
    margin-right: 0.5em;
  }
  main > form > .menu > div > .otherLinks > ul > li:last-child {
    margin-bottom: 0.5em;
  }
}