/* -------------------------------- 

Global styles

-------------------------------- */
/* -------------------------------- 

Primary style

-------------------------------- */
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html, body {
  height: 100%; }

body {
  font-size: 100%;
  font-family: "aktiv-grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #F5F6F7;
  background-color: #021725; }
  body.overflow-hidden {
    /* when primary navigation is visible, the content in the background won't scroll */
    overflow: hidden; }
    body.overflow-hidden .header {
      position: fixed; }

a:link, a:visited, a:hover, a:active {
  text-decoration: none;
  color: #F5F6F7; }

ul {
  padding: 0;
  margin: 0;
  list-style: none; }

img {
  vertical-align: top; }

/* -------------------------------- 

Header

-------------------------------- */
.header {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  height: 80px;
  width: 100%;
  z-index: 3;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important; }
  @media only screen and (min-width: 640px) {
    .header {
      height: 100px;
      background: transparent;
      box-shadow: none; } }
  @media only screen and (max-width: 639px), only screen and (min-width: 640px) {
    .header {
      -webkit-transition: background-color 0.3s;
      -moz-transition: background-color 0.3s;
      transition: background-color 0.3s;
      /* Force Hardware Acceleration in WebKit */
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden; }
      .header.is-fixed {
        /* when the user scrolls down, we hide the header right above the viewport */
        position: fixed;
        top: -100px;
        background-color: #021725;
        -webkit-transition: -webkit-transform 0.3s;
        -moz-transition: -moz-transform 0.3s;
        transition: transform 0.3s; }
      .header.is-visible {
        /* if the user changes the scrolling direction, we show the header */
        -webkit-transform: translate3d(0, 100%, 0);
        -moz-transform: translate3d(0, 100%, 0);
        -ms-transform: translate3d(0, 100%, 0);
        -o-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0); }
      .header.menu-is-open {
        /* add a background color to the header when the navigation is open */
        background-color: #021725; } }

.menu-num {
  font-weight: 400;
  display: inline-block;
  width: 35px;
  color: rgba(200, 200, 200, 0.6); }
  @media only screen and (min-width: 1024px) {
    .menu-num {
      display: none; } }

/* -------------------------------- 

Logo

-------------------------------- */
.logo {
  position: absolute;
  z-index: 4;
  top: -1px;
  right: auto;
  left: 50%;
  display: block;
  width: 60px;
  height: 70px;
  background: url("img/logo/dca_logo.svg") no-repeat center center;
  /* center logo in header */
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap; }
  @media only screen and (min-width: 640px) {
    .logo {
      top: 0;
      width: 70px;
      height: 80px; } }
  @media only screen and (min-width: 1024px) {
    .logo {
      left: 15px;
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0); } }
  @media only screen and (min-width: 1200px) {
    .logo {
      left: 50%;
      -webkit-transform: translateX(-585px);
      -moz-transform: translateX(-585px);
      -ms-transform: translateX(-585px);
      -o-transform: translateX(-585px);
      transform: translateX(-585px); } }

/* -------------------------------- 

Main navigation

-------------------------------- */
.main-nav {
  position: absolute;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 10px;
  bottom: auto;
  /* hidden on small devices */
  display: none; }
  @media only screen and (min-width: 1024px) {
    .main-nav {
      right: 15px;
      display: block; } }
  @media only screen and (min-width: 1200px) {
    .main-nav {
      right: 50%;
      left: auto;
      width: 100%;
      text-align: right;
      -webkit-transform: translateX(585px) translateY(-50%);
      -moz-transform: translateX(585px) translateY(-50%);
      -ms-transform: translateX(585px) translateY(-50%);
      -o-transform: translateX(585px) translateY(-50%);
      transform: translateX(585px) translateY(-50%); } }
  .main-nav li {
    display: inline-block;
    margin-left: 8px;
    padding: 5px 8px 5px 7px;
    color: #F5F6F7; }
    @media only screen and (min-width: 640px) {
      .main-nav li {
        margin-left: 16px; } }
    .main-nav li:last-child {
      border: 1px solid #F5F6F7;
      border-radius: 4px;
      margin-left: 23px; }

/* -------------------------------- 

Mobile navigation

-------------------------------- */
.nav-trigger {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  height: 100%;
  width: 40px;
  background-color: transparent; }
  @media only screen and (min-width: 640px) {
    .nav-trigger {
      width: 50px; } }
  @media only screen and (min-width: 1024px) {
    .nav-trigger {
      display: none; } }
  .nav-trigger .menu-button {
    /* this span is the central line of the menu icon */
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 18px;
    height: 2px;
    background-color: #F5F6F7;
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
    /* center in div */
    left: 50%;
    top: 40%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    /* these are the upper and lower lines in the menu icon */ }
    .nav-trigger .menu-button, .nav-trigger .menu-button::before, .nav-trigger .menu-button::after {
      border-radius: 2px; }
    .nav-trigger .menu-button::before, .nav-trigger .menu-button:after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: #F5F6F7;
      right: 0;
      -webkit-transition: -webkit-transform 0.3s, top 0.3s, background-color 0s;
      -moz-transition: -moz-transform 0.3s, top 0.3s, background-color 0s;
      transition: transform 0.3s, top 0.3s, background-color 0s; }
    .nav-trigger .menu-button::before {
      top: -5px; }
    .nav-trigger .menu-button::after {
      top: 5px; }
    .nav-trigger .menu-button.is-clicked {
      background-color: rgba(245, 246, 247, 0); }
      .nav-trigger .menu-button.is-clicked::before, .nav-trigger .menu-button.is-clicked::after {
        top: 0;
        background-color: #F5F6F7; }
      .nav-trigger .menu-button.is-clicked::before {
        top: 0;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg); }
      .nav-trigger .menu-button.is-clicked::after {
        top: 0;
        -webkit-transform: rotate(225deg);
        -moz-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
        -o-transform: rotate(225deg);
        transform: rotate(225deg); }

.mobile-nav {
  /* by default it's hidden - on top of the viewport */
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: #021725;
  z-index: 2;
  text-align: center;
  padding: 80px 0 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: auto;
  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s; }
  .mobile-nav li {
    font-size: 16px;
    font-size: 1rem;
    font-weight: 500;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    padding: 5px 0;
    text-align: left;
    border-bottom: 1px solid rgba(200, 200, 200, 0.3); }
    .mobile-nav li.social {
      border-bottom: none; }
  .mobile-nav a {
    display: inline-block;
    padding: 10px 0;
    text-decoration: none;
    color: #F5F6F7; }
  .mobile-nav .social {
    line-height: 0;
    display: inline-block;
    margin: 15px 5px; }
    .mobile-nav .social a {
      width: 25px;
      height: 24px;
      padding: 0;
      background-image: url("img/icons/socials.svg");
      /* image replacement */
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap; }
  .mobile-nav .facebook a {
    background-position: -4px -8px; }
  .mobile-nav .twitter a {
    background-position: -40px -7px; }
  .mobile-nav .instagram a {
    background-position: -81px -7px; }
  .mobile-nav .linkedin a {
    background-position: -121px -7px; }
  .mobile-nav.is-visible {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  @media only screen and (min-width: 640px) {
    .mobile-nav {
      padding: 100px 0; } }

/* -------------------------------- 

Phone icon 

-------------------------------- */
.phone-button {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  width: 50px;
  height: 100%;
  background-color: transparent; }
  @media only screen and (min-width: 640px) {
    .phone-button {
      display: none; } }
  .phone-button .phone-icon {
    position: absolute;
    display: block;
    /* center in div */
    left: 50%;
    top: 40%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 20px;
    height: 100%;
    background: url("img/icons/phone.svg") no-repeat center center;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap; }

/* -------------------------------- 

Typography

-------------------------------- */
h1, h2, h3, h4, h5, h6, p, a {
  font-family: "aktiv-grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  margin: 0; }

b, strong {
  font-weight: 500; }

h1, h2, h3, h4, p, a {
  line-height: 120%; }
  h1.single, h2.single, h3.single, h4.single, p.single, a.single {
    margin-bottom: 0; }
  @media only screen and (max-width: 639px) {
    h1.extra-top, h2.extra-top, h3.extra-top, h4.extra-top, p.extra-top, a.extra-top {
      margin-top: 20px; } }

h1 {
  font-weight: 400;
  font-size: 40px;
  font-size: 2.5rem;
  letter-spacing: -1px;
  line-height: 100%;
  margin-bottom: 20px; }
  @media only screen and (min-width: 640px) {
    h1 {
      font-size: 50px;
      font-size: 3.125rem; } }
  @media only screen and (min-width: 1024px) {
    h1 {
      font-size: 60px;
      font-size: 3.75rem; } }

h2 {
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 20px; }
  @media only screen and (min-width: 640px) {
    h2 {
      font-size: 22px;
      font-size: 1.375rem; } }
  @media only screen and (min-width: 1024px) {
    h2 {
      font-size: 24px;
      font-size: 1.5rem; } }
  .white h2 {
    color: #021725; }
  .light h2 {
    color: #021725; }
  .dark h2 {
    color: #F5F6F7; }
  h2.ref {
    text-align: right;
    font-weight: 400; }
    h2.ref span {
      font-size: 15px;
      font-size: 0.9375rem; }
      @media only screen and (min-width: 640px) {
        h2.ref span {
          font-size: 16px;
          font-size: 1rem; } }
      @media only screen and (min-width: 1024px) {
        h2.ref span {
          font-size: 18px;
          font-size: 1.125rem; } }

h3 {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400; }
  @media only screen and (min-width: 640px) {
    h3 {
      font-size: 16px;
      font-size: 1rem; } }
  @media only screen and (min-width: 1024px) {
    h3 {
      font-size: 18px;
      font-size: 1.125rem; } }
  .dark h3 {
    color: #C8C8C8; }

h4 {
  font-size: 12px;
  font-size: 0.75rem;
  font-weight: 400; }
  @media only screen and (min-width: 640px) {
    h4 {
      font-size: 12px;
      font-size: 0.75rem; } }
  @media only screen and (min-width: 1024px) {
    h4 {
      font-size: 14px;
      font-size: 0.875rem; } }
  .dark h4 {
    color: #828385; }

p {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
  padding-bottom: 20px; }
  p b, p strong {
    color: #021725; }
  p:last-of-type {
    padding-bottom: 0; }
  @media only screen and (min-width: 640px) {
    p {
      font-size: 16px;
      font-size: 1rem; } }
  @media only screen and (min-width: 1024px) {
    p {
      font-size: 18px;
      font-size: 1.125rem; } }
  .white p {
    color: #828385; }
  .light p {
    color: #828385; }
    .light p b, .light p strong {
      color: #021725; }
  .dark p {
    color: #C8C8C8; }
  .white p, .light p {
    color: #828385; }
    .white p.search-pagination, .light p.search-pagination {
      color: #021725; }
      .white p.search-pagination a:link, .white p.search-pagination a:visited, .light p.search-pagination a:link, .light p.search-pagination a:visited {
        color: #C8C8C8; }
      .white p.search-pagination a:hover, .white p.search-pagination a:active, .light p.search-pagination a:hover, .light p.search-pagination a:active {
        color: #238EF5; }

a:link, a:visited, a:hover, a:active {
  color: inherit; }
  a:link.btn, a:visited.btn, a:hover.btn, a:active.btn {
    color: #F5F6F7; }
  .light p a:link:link, .light p a:link:visited, .light p a:visited:link, .light p a:visited:visited, .light p a:hover:link, .light p a:hover:visited, .light p a:active:link, .light p a:active:visited {
    color: #021725; }
  .light p a:link:hover, .light p a:link:active, .light p a:visited:hover, .light p a:visited:active, .light p a:hover:hover, .light p a:hover:active, .light p a:active:hover, .light p a:active:active {
    color: #238EF5; }

.main-nav li a {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 500; }

/* -------------------------------- 

Sections

-------------------------------- */
.content {
  padding: 40px 0; }
  @media only screen and (min-width: 1024px) {
    .content {
      padding: 60px 0; } }
  .content-dbl {
    padding-top: 0; }

.white {
  background: #fff; }

.light {
  background: #F5F6F7; }

.dark {
  background: #021725; }

.intro, .intro-large {
  position: relative;
  z-index: 1;
  height: 100%; }
  .intro .arrow, .intro-large .arrow {
    position: absolute;
    right: auto;
    bottom: 40px;
    left: 50%;
    width: 22px;
    height: 13px;
    background-image: url("img/icons/arrow-large.svg");
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%); }
  .intro .scroll-text, .intro-large .scroll-text {
    position: absolute;
    right: auto;
    bottom: 70px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%); }
    .intro .scroll-text p, .intro-large .scroll-text p {
      font-weight: 500; }
  @media only screen and (min-width: 1024px) {
    .intro, .intro-large {
      height: 700px; } }

.intro {
  height: 420px; }
  @media only screen and (min-width: 640px) {
    .intro {
      height: 500px; } }
  .intro-content {
    position: absolute;
    width: 100%;
    max-width: 1200px;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    color: #fff;
    text-align: center; }

.intro-large {
  min-height: 100vh;
  height: 500px; }

.intro-small {
  min-height: 80px; }
  @media only screen and (min-width: 640px) {
    .intro-small {
      min-height: 100px; } }

@media only screen and (max-width: 639px) {
  .columns-extra {
    padding-top: 40px; } }
@media only screen and (max-width: 639px) {
  .columns-extra-small {
    padding-top: 20px; } }

/* -------------------------------- 

Map

-------------------------------- */
.map {
  padding-top: 40px; }
  @media only screen and (min-width: 640px) {
    .map {
      padding-top: 60px; } }
  .map .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%; }
  .map .embed-container iframe,
  .map .embed-container object,
  .map .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/* -------------------------------- 

Buttons

-------------------------------- */
.btn {
  margin: 0;
  padding: 0;
  border: none; }
  .btn-primary {
    font-weight: 500;
    display: inline-block;
    padding: 5px 8px 6px;
    color: #F5F6F7;
    background: rgba(35, 142, 245, 0.8);
    font-size: 16px;
    font-size: 1rem;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s; }
    .btn-primary-padding {
      margin-top: 20px; }
      .btn-primary-padding-half {
        margin-top: 20px; }
      @media only screen and (min-width: 1024px) {
        .btn-primary-padding {
          margin-top: 40px; } }
    .btn-primary:hover {
      background: #238ef5; }
    @media only screen and (min-width: 640px) {
      .btn-primary {
        font-size: 16px;
        font-size: 1rem; } }
    @media only screen and (min-width: 1024px) {
      .btn-primary {
        padding: 6px 10px 7px;
        font-size: 18px;
        font-size: 1.125rem; } }
  .btn-filled {
    background: #021725;
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s; }
    .btn-filled:hover {
      background: #021725; }
  .btn-add {
    float: right; }
    @media only screen and (min-width: 640px) {
      .btn-add {
        float: left; } }
  @media only screen and (max-width: 639px) {
    .btn-favourites {
      margin-top: 10px;
      width: 100%;
      text-align: center; } }
  .btn-inline {
    margin-left: 10px;
    margin-right: 10px; }
  .btn-booking {
    float: right; }
    @media only screen and (max-width: 639px) {
      .btn-booking {
        width: 100%;
        margin-top: 40px; } }

input.btn-full-width[type="submit"], .btn-full-width {
  width: 100%; }

/* -------------------------------- 

Icons

-------------------------------- */
/* -------------------------------- 

Form

-------------------------------- */
.form-control {
  box-shadow: none;
  font-size: inherit;
  color: #021725; }

.form-content {
  margin: 0 auto; }
  .form-content::after {
    clear: both;
    content: "";
    display: table; }
  .form-content .form-list li {
    margin: 0;
    padding: 1px 0; }
    @media only screen and (max-width: 639px) {
      .form-content .form-list li.complete-online {
        margin-bottom: 20px; } }
  .form-content label.form-label {
    margin: 0;
    padding: 0;
    line-height: 0; }
    .form-content label.form-label h2 {
      padding-left: 5px; }
  .form-content fieldset {
    margin-bottom: 20px; }
    @media only screen and (min-width: 640px) {
      .form-content fieldset {
        margin-bottom: 40px; } }
    .form-content fieldset:last-child {
      margin-bottom: 0; }
    .form-content fieldset.first {
      margin-bottom: 10px; }
      @media only screen and (min-width: 640px) {
        .form-content fieldset.first {
          margin-bottom: 20px; } }
    .form-content fieldset.first-apply {
      margin-top: 20px; }
      @media only screen and (min-width: 640px) {
        .form-content fieldset.first-apply {
          margin-top: 40px; } }
    .form-content fieldset.apply {
      margin: 0 5px;
      margin-top: 20px; }
      .form-content fieldset.apply:nth-of-type(1) {
        margin-top: 0; }
  .form-content .field {
    padding: 0; }
    .form-content .field-box {
      padding: 6px 10px;
      margin: 10px 0 0;
      border: 1px solid rgba(35, 142, 245, 0);
      background-color: #fff;
      border-radius: 4px; }
      @media only screen and (min-width: 640px) {
        .form-content .field-box {
          padding: 8px 12px;
          margin: 20px 0 0; } }
      .form-content .field-box p {
        color: rgba(130, 131, 133, 0.5);
        padding: 0;
        margin: 0; }
  .form-content .form-label {
    font-weight: 500;
    text-align: left;
    display: block;
    padding-left: 10px;
    margin: 0; }
  .form-content .info {
    margin-top: 10px; }
    @media only screen and (max-width: 639px) {
      .form-content .info {
        margin-top: 20px; } }
  .form-content .no-error {
    margin-top: 25px; }
    @media only screen and (max-width: 639px) {
      .form-content .no-error-mobile {
        margin-top: 0; } }
  .form-content .form-error {
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: #FF4949;
    padding: 10px 8px 0; }
    @media only screen and (max-width: 639px) {
      .form-content .form-error {
        padding: 10px 10px 0; } }
    @media only screen and (min-width: 640px) {
      .form-content .form-error {
        padding: 10px 12px 0; } }
    .form-content .form-error-extra {
      padding-left: 10px; }
      @media only screen and (min-width: 640px) {
        .form-content .form-error-extra {
          padding-left: 15px; } }
    .form-content .form-error-hidden {
      color: #F5F6F7; }
      @media only screen and (max-width: 639px) {
        .form-content .form-error-hidden {
          font-size: 1px; } }
  .form-content .textarea-intro {
    display: block;
    padding: 0 5px;
    margin: 20px 0 20px; }
    @media only screen and (max-width: 639px) {
      .form-content .textarea-intro {
        margin: 0; } }
    .form-content .textarea-intro p {
      color: #021725; }
      .form-content .textarea-intro p b {
        border-bottom: 1px solid #021725; }
  .form-content .message {
    padding: 8px; }
    @media only screen and (max-width: 639px) {
      .form-content .message {
        padding: 10px; } }
    @media only screen and (min-width: 640px) {
      .form-content .message {
        padding: 12px; } }
  .form-content .form-small {
    margin-left: 3px;
    font-size: 12px;
    font-size: 0.75rem; }
    @media only screen and (min-width: 640px) {
      .form-content .form-small {
        font-size: 14px;
        font-size: 0.875rem; } }
  .form-content .select-form {
    padding-right: 10px; }
    @media only screen and (min-width: 640px) {
      .form-content .select-form {
        padding-right: 15px; } }
    .form-content .select-form .btn-primary {
      margin-top: 20px;
      margin-bottom: 10px; }
    @media only screen and (min-width: 640px) {
      .form-content .select-form .btn-add {
        margin-bottom: 0; } }
  .form-content .skill-search .btn-primary {
    margin: 0; }
  .form-content .choice-container {
    padding: 10px; }
    @media only screen and (min-width: 640px) {
      .form-content .choice-container {
        padding: 15px; } }
    .form-content .choice-container p {
      margin: 0;
      color: #021725; }
    .form-content .choice-container .choice {
      display: inline-block;
      padding: 10px 30px 10px 0px; }
      .form-content .choice-container .choice.job-c {
        display: block;
        border-bottom: 1px solid rgba(2, 23, 37, 0.2);
        padding: 15px 0px 15px 0px; }
        .form-content .choice-container .choice.job-c:nth-child(2) {
          padding-top: 10px; }
        .form-content .choice-container .choice.job-c:last-child {
          border: none; }
        .form-content .choice-container .choice.job-c span {
          text-align: right;
          display: inline-block;
          width: 100px;
          float: right; }
          .form-content .choice-container .choice.job-c span:nth-child(1) {
            width: 80px; }
            @media only screen and (min-width: 640px) {
              .form-content .choice-container .choice.job-c span:nth-child(1) {
                width: 100px; } }
      .form-content .choice-container .choice .remove-btn {
        position: relative;
        cursor: pointer;
        /* replace text with image */
        height: 24px;
        width: 24px;
        background: rgba(35, 142, 245, 0.8);
        border-radius: 4px;
        border: none;
        text-indent: 100%;
        overflow: hidden;
        color: transparent;
        white-space: nowrap;
        transition: background .2s; }
        .form-content .choice-container .choice .remove-btn-right {
          margin-right: 0; }
        .form-content .choice-container .choice .remove-btn-left {
          position: absolute; }
      .form-content .choice-container .choice .remove-btn::before, .form-content .choice-container .choice .remove-btn::after {
        /* this is the 'X' arrow */
        content: '';
        position: absolute;
        top: 45%;
        left: 50%;
        height: 2px;
        width: 20px;
        background: #F5F6F7; }
      .form-content .choice-container .choice .remove-btn::before {
        transform: translate(-50%) rotate(45deg); }
      .form-content .choice-container .choice .remove-btn::after {
        transform: translate(-50%) rotate(-45deg); }
      .form-content .choice-container .choice .remove-btn:hover {
        background: #238ef5; }

/* -------------------------------- 

Input

-------------------------------- */
input, textarea, select, label {
  font-weight: 400;
  font-family: "aktiv-grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-size: 1rem;
  color: #021725;
  padding: 0;
  margin: 0; }
  @media only screen and (max-width: 639px) {
    input, textarea, select, label {
      font-size: 16px;
      font-size: 1rem; } }
  @media only screen and (min-width: 640px) {
    input, textarea, select, label {
      font-size: 18px;
      font-size: 1.125rem; } }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea,
select {
  display: block;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  margin: 0;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400; }
  @media only screen and (min-width: 640px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
      font-size: 16px;
      font-size: 1rem; } }
  @media only screen and (min-width: 1024px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
      font-size: 18px;
      font-size: 1.125rem; } }
  input[type="text"]::-webkit-input-placeholder,
  input[type="password"]::-webkit-input-placeholder,
  input[type="email"]::-webkit-input-placeholder,
  input[type="tel"]::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder,
  select::-webkit-input-placeholder {
    color: rgba(130, 131, 133, 0.5); }
  input[type="text"]::-moz-placeholder,
  input[type="password"]::-moz-placeholder,
  input[type="email"]::-moz-placeholder,
  input[type="tel"]::-moz-placeholder,
  textarea::-moz-placeholder,
  select::-moz-placeholder {
    color: rgba(130, 131, 133, 0.5); }
  input[type="text"]:-moz-placeholder,
  input[type="password"]:-moz-placeholder,
  input[type="email"]:-moz-placeholder,
  input[type="tel"]:-moz-placeholder,
  textarea:-moz-placeholder,
  select:-moz-placeholder {
    color: rgba(130, 131, 133, 0.5); }
  input[type="text"]:-ms-input-placeholder,
  input[type="password"]:-ms-input-placeholder,
  input[type="email"]:-ms-input-placeholder,
  input[type="tel"]:-ms-input-placeholder,
  textarea:-ms-input-placeholder,
  select:-ms-input-placeholder {
    color: rgba(130, 131, 133, 0.5); }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea,
select {
  /* general style for input elements */
  line-height: 120%;
  height: 35px;
  padding: 0 8px;
  border: 1px solid rgba(35, 142, 245, 0);
  background-color: #fff;
  border-radius: 4px;
  background-image: none; }
  @media only screen and (min-width: 640px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
      height: 35px;
      padding: 0 10px; } }
  @media only screen and (min-width: 1024px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
      height: 40px;
      padding: 0 12px; } }
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="email"]:focus,
  input[type="tel"]:focus,
  textarea:focus,
  select:focus {
    outline: none;
    border-color: rgba(35, 142, 245, 0.8); }

.select, .select-text {
  /* select element wapper */
  position: relative;
  margin: 10px 0 0; }
  @media only screen and (min-width: 640px) {
    .select, .select-text {
      margin: 20px 0 0; } }
  .select::after, .select-text::after {
    /* arrow icon for select element */
    content: '';
    position: absolute;
    z-index: 1;
    right: 16px;
    top: 50%;
    margin-top: -8px;
    display: block;
    width: 16px;
    height: 16px;
    background: url("img/icons/arrow-sm.svg") no-repeat center center;
    pointer-events: none; }

.select-text::after {
  background: none; }

select {
  text-transform: none;
  cursor: pointer;
  line-height: 2;
  padding-bottom: 2px; }

select::-ms-expand {
  display: none; }

.form-list::after {
  clear: both;
  content: "";
  display: table; }

.form-list li {
  /* wrapper for radio and checkbox input types */
  display: inline-block;
  width: 100%;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0 0 10px 0;
  float: left; }
  .form-list li:last-child {
    margin: 0; }

input[type="radio"],
input.custom-check[type="checkbox"] {
  /* hide original check and radio buttons */
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: -1; }

input[type="radio"] + label,
input.custom-check[type="checkbox"] + label {
  padding-left: 24px;
  color: rgba(130, 131, 133, 0.5); }

input.custom-check[type="checkbox"] + label.check {
  padding-left: 0; }

input.custom-check[type="checkbox"]:checked + label {
  color: #021725; }

input[type="radio"] + label::before,
input[type="radio"] + label::after,
input.custom-check[type="checkbox"] + label::before,
input.custom-check[type="checkbox"] + label::after {
  /* custom radio and check boxes */
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -6px;
  width: 14px;
  height: 14px; }
  @media only screen and (min-width: 1024px) {
    input[type="radio"] + label::before,
    input[type="radio"] + label::after,
    input.custom-check[type="checkbox"] + label::before,
    input.custom-check[type="checkbox"] + label::after {
      margin-top: -8px; } }

input.custom-check[type="checkbox"] + label {
  line-height: 0;
  padding-left: 15px;
  margin-right: 0; }

.apply-now input[type="radio"] + label::before,
.apply-now input[type="radio"] + label::after,
.apply-now input.custom-check[type="checkbox"] + label::before,
.apply-now input.custom-check[type="checkbox"] + label::after {
  left: auto;
  right: 0;
  margin-top: -7px; }
  @media only screen and (max-width: 639px) {
    .apply-now input[type="radio"] + label::before,
    .apply-now input[type="radio"] + label::after,
    .apply-now input.custom-check[type="checkbox"] + label::before,
    .apply-now input.custom-check[type="checkbox"] + label::after {
      margin-top: -6px; } }

.request input.custom-check[type="checkbox"] + label::before,
.request input.custom-check[type="checkbox"] + label::after {
  left: auto;
  right: 10px;
  margin-top: -3px; }

.request input.custom-check.custom-check-2[type="checkbox"] + label::before,
.request input.custom-check.custom-check-2[type="checkbox"] + label::after {
  margin-top: -8px; }

.request input.custom-check.custom-check-2.check-request[type="checkbox"] + label::before,
.request input.custom-check.custom-check-2.check-request[type="checkbox"] + label::after {
  margin-top: -9px; }
  @media only screen and (max-width: 639px) {
    .request input.custom-check.custom-check-2.check-request[type="checkbox"] + label::before,
    .request input.custom-check.custom-check-2.check-request[type="checkbox"] + label::after {
      margin-top: 36px; } }

input[type="radio"] + label::before,
input.custom-check[type="checkbox"] + label::before {
  border: 1px solid rgba(200, 200, 200, 0.5);
  background: #fff; }

input[type="radio"] + label::before,
input[type="radio"] + label::after {
  border-radius: 50%; }

input.custom-check[type="checkbox"] + label::before,
input.custom-check[type="checkbox"] + label::after {
  border-radius: 4px; }

input[type="radio"] + label::after,
input.custom-check[type="checkbox"] + label::after {
  background-color: rgba(35, 142, 245, 0.8);
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 0 0 5px rgba(35, 142, 245, 0.3);
  display: none; }

input[type="radio"] + label::after {
  /* custom image for radio button */
  background-image: url("img/icons/icon-radio.svg"); }

input.custom-check[type="checkbox"] + label::after {
  /* custom image for checkbox */
  background-image: url("img/icons/icon-check.svg"); }

input[type="radio"]:focus + label::before,
input.custom-check[type="checkbox"]:focus + label::before {
  /* add focus effect for radio and check buttons */
  box-shadow: 0 0 5px rgba(35, 142, 245, 0.8); }

input[type="radio"]:checked + label::after,
input.custom-check[type="checkbox"]:checked + label::after {
  display: block; }

.apply-now {
  text-align: right; }
  .apply-now h2 {
    margin-bottom: 0;
    padding-right: 20px;
    text-align: left; }
  .apply-now .hide-m {
    display: none; }
    @media only screen and (min-width: 640px) {
      .apply-now .hide-m {
        display: inline-block; } }

textarea {
  min-height: 150px;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  flex-grow: 1;
  -ms-flex-positive: 1;
  resize: vertical;
  overflow: auto; }

@media only screen and (min-width: 640px) {
  .field-flex {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; } }
@media only screen and (min-width: 640px) {
  .field-flex .field-grow {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    flex-grow: 1;
    -ms-flex-positive: 1;
    width: auto; } }

input[type="radio"]:checked + label::before,
input[type="radio"]:checked + label::after,
input.custom-check[type="checkbox"]:checked + label::before,
input.custom-check[type="checkbox"]:checked + label::after {
  -webkit-animation: bounce 0.3s;
  -moz-animation: bounce 0.3s;
  animation: bounce 0.3s; }

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: scale(1); }
  50% {
    -webkit-transform: scale(0.9); } }
@-moz-keyframes bounce {
  0%, 100% {
    -moz-transform: scale(1); }
  50% {
    -moz-transform: scale(0.9); } }
@keyframes bounce {
  0%, 100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); } }
/* hide original input */
.inputfile {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1; }
  .inputfile + label {
    border: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    max-width: 100%;
    padding: 0px 8px 2px 7px;
    margin-top: 10px;
    display: inline-block;
    font-weight: 500;
    font-size: 16px;
    font-size: 1rem;
    color: #F5F6F7;
    border-radius: 4px;
    background: rgba(35, 142, 245, 0.8);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s; }
    @media only screen and (min-width: 640px) {
      .inputfile + label {
        padding: 0px 10px 2px 9px;
        font-size: 18px;
        font-size: 1.125rem; } }
    .inputfile + label:last-child {
      margin-right: 0; }
    .inputfile + label:hover {
      background: #238ef5; }
  .inputfile:focus + label, .inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px; }
  .inputfile:focus + label, .inputfile.has-focus + label, .inputfile + label:hover {
    background: #238ef5; }

.no-js .inputfile + label {
  display: none; }

/* -------------------------------- 

Footer

-------------------------------- */
.footer .row {
  margin-bottom: 40px; }
  .footer .row:last-of-type {
    margin-bottom: 0; }
.footer .columns {
  position: relative; }

.footer-nav {
  margin-left: 10px;
  position: relative;
  bottom: 0;
  left: 0;
  line-height: 0; }
  @media only screen and (min-width: 640px) {
    .footer-nav {
      margin-left: 0px; } }
  .footer-nav li {
    font-size: 16px;
    font-size: 1rem;
    font-weight: 500;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    padding: 0;
    text-align: left;
    line-height: 1; }
  .footer-nav a {
    display: inline-block;
    text-decoration: none;
    color: #F5F6F7; }
  .footer-nav .social {
    display: inline-block;
    margin: 0 4px; }
    @media only screen and (min-width: 640px) {
      .footer-nav .social {
        margin: 0 5px; } }
    .footer-nav .social:nth-of-type(1) {
      margin-left: 0; }
    .footer-nav .social a {
      width: 25px;
      height: 24px;
      padding: 0;
      background-image: url("img/icons/socials.svg");
      /* image replacement */
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      display: block; }
  .footer-nav .facebook a {
    background-position: -10px -9px;
    width: 15px; }
  .footer-nav .twitter a {
    background-position: -40px -8px; }
  .footer-nav .instagram a {
    background-position: -81px -8px; }
  .footer-nav .linkedin a {
    background-position: -121px -8px; }

/* -------------------------------- 

DCA People

-------------------------------- */
.dca-people {
  position: relative;
  display: block;
  width: 85px;
  height: 40px;
  margin-top: 40px;
  text-indent: 1000em;
  background: url("img/icons/dca_people.svg") no-repeat center center;
  background-size: 100%;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap; }
  @media only screen and (min-width: 640px) {
    .dca-people {
      margin-top: 0;
      float: right; } }
  @media only screen and (min-width: 1024px) {
    .dca-people {
      width: 100px;
      height: 47px; } }
  @media only screen and (max-width: 639px) {
    .dca-people {
      left: 50%;
      right: auto;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%); } }

/* -------------------------------- 

Home

-------------------------------- */
.main-content {
  position: relative;
  z-index: 1; }

/* -------------------------------- 

Testimonials

-------------------------------- */
.testimonial {
  position: relative;
  float: left;
  width: 100%;
  height: 200px;
  overflow: hidden;
  text-align: center;
  color: #F5F6F7; }
  .testimonial.priorsfield {
    background: url("img/testimonials/priorsfield.jpg") no-repeat center center;
    background-size: cover; }
  .testimonial.ramsac {
    background: url("img/testimonials/ramsac.jpg") no-repeat center center;
    background-size: cover; }
  .testimonial.pharsafer {
    background: url("img/testimonials/pharsafer.jpg") no-repeat center center;
    background-size: cover; }
  .testimonial.waverley {
    background: url("img/testimonials/waverley.jpg") no-repeat center center;
    background-size: cover; }
  @media only screen and (min-width: 1024px) {
    .testimonial {
      width: 33.333333333%;
      /* fallback if needed */
      width: calc(100% / 3); } }
  .testimonial .photo-overlay h2, .testimonial .photo-overlay-text h2 {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    -webkit-transition: top 0.3s ease-in-out;
    -moz-transition: top 0.3s ease-in-out;
    transition: top 0.3s ease-in-out;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  .testimonial .photo-overlay h2 {
    top: 0;
    line-height: 200px; }
  .testimonial .photo-overlay-text h2 {
    top: 100%;
    line-height: 200px; }
  .testimonial:hover .photo-overlay h2 {
    top: -100%; }
  .testimonial:hover .photo-overlay-text h2 {
    top: 0; }
  .testimonial-logo {
    margin: 40px 0 20px;
    max-width: 100%;
    display: block; }
    .testimonial-logo img.priorsfield {
      height: 30px; }
    .testimonial-logo img.ramsac, .testimonial-logo img.pharsafer {
      height: 20px; }
    .testimonial-logo img.waverley {
      height: 70px; }
    @media only screen and (min-width: 640px) {
      .testimonial-logo {
        margin-bottom: 0; } }

/* -------------------------------- 

About

-------------------------------- */
.employee {
  padding-top: 40px; }
  .employee::after {
    clear: both;
    content: "";
    display: table; }
  @media only screen and (min-width: 640px) {
    .employee {
      padding-top: 60px; } }
  .employee-info {
    position: relative; }
  .employee .portrait {
    max-width: 100%; }
  .employee h2 {
    margin: 0; }
  .employee .job-title {
    margin-top: 0; }
  .employee .connect-icons {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    margin-top: auto; }
    .employee .connect-icons .connect {
      color: #021725; }

.social-nav {
  margin-left: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 0; }
  @media only screen and (min-width: 640px) {
    .social-nav {
      margin-left: 15px; } }
  .social-nav-share {
    margin-left: 0;
    margin-top: 10px;
    position: relative; }
  .social-nav li {
    font-size: 16px;
    font-size: 1rem;
    font-weight: 500;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    padding: 0;
    text-align: left;
    line-height: 1; }
  .social-nav a {
    display: inline-block;
    text-decoration: none;
    color: #F5F6F7; }
  .social-nav .social {
    display: inline-block;
    margin: 0 2px; }
    @media only screen and (min-width: 640px) {
      .social-nav .social {
        margin: 0 4px; } }
    @media only screen and (min-width: 1024px) {
      .social-nav .social {
        margin: 0 5px; } }
    .social-nav .social:nth-of-type(1) {
      margin-left: 0; }
    .social-nav .social a {
      width: 20px;
      height: 18px;
      padding: 0;
      background-image: url("img/icons/socials_dark_small.svg");
      /* image replacement */
      overflow: hidden;
      text-indent: 100%;
      white-space: nowrap;
      display: block; }
      @media only screen and (min-width: 640px) {
        .social-nav .social a {
          width: 25px;
          height: 24px;
          background-image: url("img/icons/socials_dark.svg"); } }
  .social-nav .email a {
    background-position: -9px -10px; }
    @media only screen and (min-width: 640px) {
      .social-nav .email a {
        background-position: -9px -9px; } }
  .social-nav .skype a {
    background-position: -44px -10px; }
    @media only screen and (min-width: 640px) {
      .social-nav .skype a {
        background-position: -49px -9px; } }
  .social-nav .facebook a {
    background-position: -78px -10px;
    width: 15px; }
    @media only screen and (min-width: 640px) {
      .social-nav .facebook a {
        background-position: -89px -9px; } }
  .social-nav .twitter a {
    background-position: -108px -9px; }
    @media only screen and (min-width: 640px) {
      .social-nav .twitter a {
        background-position: -119px -8px; } }
  .social-nav .linkedin a {
    background-position: -143px -9px; }
    @media only screen and (min-width: 640px) {
      .social-nav .linkedin a {
        background-position: -160px -8px; } }

.rec-logo {
  margin-top: 20px;
  max-width: 100%;
  display: block; }
  .rec-logo img {
    height: 40px; }
    @media only screen and (min-width: 640px) {
      .rec-logo img {
        height: 50px; } }

/* -------------------------------- 

Service

-------------------------------- */
.service::after {
  clear: both;
  content: "";
  display: table; }
.service-container {
  float: left; }
.service-image {
  float: right;
  height: 250px; }
.service-container, .service-image {
  width: 100%;
  padding: 40px 10px; }
  .service-container::after, .service-image::after {
    clear: both;
    content: "";
    display: table; }
  @media only screen and (min-width: 1024px) {
    .service-container, .service-image {
      width: 50%;
      padding: 60px; } }
.service:nth-of-type(2n+0) .service-image {
  float: left; }
.service-text {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  max-width: 525px;
  text-align: center; }
  @media only screen and (min-width: 1024px) {
    .service-text {
      float: right;
      text-align: right; } }
@media only screen and (min-width: 1024px) {
  .service:nth-of-type(2n+0) .service-text {
    float: left;
    text-align: left; } }
.service .option {
  margin-bottom: 15px; }
  .service .option::after {
    clear: both;
    content: "";
    display: table; }
  .service .option:last-child {
    margin-bottom: 0; }
  @media only screen and (min-width: 640px) {
    .service .option {
      margin-bottom: 30px; }
      .service .option:last-child {
        margin-bottom: 0; } }
  .service .option .service-option {
    position: relative;
    padding: 15px;
    border: 1px solid rgba(245, 246, 247, 0.2);
    border-radius: 4px;
    -webkit-transition: border 0.3s;
    -moz-transition: border 0.3s;
    transition: border 0.3s; }
    .service .option .service-option:hover {
      border: 1px solid rgba(35, 142, 245, 0.8); }
    @media only screen and (min-width: 640px) {
      .service .option .service-option {
        padding: 20px; } }
    .service .option .service-option .reg-no {
      display: inline-block;
      float: left;
      margin-right: 15px; }
      @media only screen and (min-width: 640px) {
        .service .option .service-option .reg-no {
          margin-right: 20px; } }
      .service .option .service-option .reg-no h1 {
        line-height: 38px;
        color: rgba(35, 142, 245, 0.8); }
        @media only screen and (min-width: 640px) {
          .service .option .service-option .reg-no h1 {
            line-height: 50px; } }
    .service .option .service-option .option-text {
      display: inline-block;
      float: left;
      width: 65%; }
      @media only screen and (min-width: 640px) {
        .service .option .service-option .option-text {
          width: 80%; } }
    .service .option .service-option .arrow {
      position: absolute;
      top: 50%;
      right: 10px;
      bottom: auto;
      -webkit-transform: translateY(-50%) rotate(-90deg);
      -moz-transform: translateY(-50%) rotate(-90deg);
      -ms-transform: translateY(-50%) rotate(-90deg);
      -o-transform: translateY(-50%) rotate(-90deg);
      transform: translateY(-50%) rotate(-90deg);
      width: 22px;
      height: 13px;
      background-image: url("img/icons/arrow-large.svg"); }
      @media only screen and (max-width: 639px) {
        .service .option .service-option .arrow {
          right: 15px; } }

.service-title {
  padding-bottom: 20px; }
  .service-title .highlight {
    color: rgba(35, 142, 245, 0.8);
    border-bottom: 2px solid rgba(35, 142, 245, 0.8); }

/* -------------------------------- 

Search

-------------------------------- */
.results .search-result {
  position: relative;
  padding: 40px 0;
  border-bottom: 1px solid rgba(2, 23, 37, 0.2); }
  .results .search-result::after {
    clear: both;
    content: "";
    display: table; }
  .results .search-result:first-child {
    padding-top: 0; }
  .results .search-result:last-child {
    padding-bottom: 0;
    border: none; }
  .results .search-result h2 {
    margin: 0; }
  .results .search-result .comments {
    padding-left: 20px; }
  .results .search-result .update-lists .select {
    margin-top: 0; }
  .results .search-result .add-sl {
    margin-bottom: 20px; }
  .results .search-result .list-update-message {
    margin: 10px 15px 0 9px;
    color: #238EF5; }
    @media only screen and (min-width: 640px) {
      .results .search-result .list-update-message {
        margin: 10px 15px 14px; } }
  .results .search-result .details {
    position: relative;
    margin-top: 20px;
    padding: 0px;
    border-radius: 4px; }
    @media only screen and (max-width: 639px) {
      .results .search-result .details {
        padding: 0px; } }
    .results .search-result .details p {
      padding: 0;
      margin-top: 5px;
      color: #021725; }
      .results .search-result .details p:first-child {
        margin: 0; }
      .results .search-result .details p span {
        display: inline-block;
        width: 90px;
        font-weight: 500; }
  .results .search-result .hide-m {
    display: none; }
    @media only screen and (min-width: 640px) {
      .results .search-result .hide-m {
        display: inline-block; } }
  .results .search-result .hide-d {
    display: inline-block; }
    @media only screen and (min-width: 640px) {
      .results .search-result .hide-d {
        display: none; } }

/* -------------------------------- 

Portal

-------------------------------- */
/* -------------------------------- 

Log in form

-------------------------------- */
.login-box {
  margin-top: 20px;
  padding: 15px;
  border-radius: 4px; }
  @media only screen and (min-width: 640px) {
    .login-box {
      margin-top: 40px; } }
  .login-box div:nth-of-type(n+2) {
    padding-top: 15px; }

/* -------------------------------- 

Profile features

-------------------------------- */
.profile {
  max-width: 100px;
  border-radius: 50%;
  margin-bottom: 20px; }
  @media only screen and (min-width: 640px) {
    .profile {
      max-width: 100%; } }
  .accordion-menu .profile {
    height: 81px;
    width: 81px;
    margin-bottom: 0px; }
  .results .profile {
    max-width: 50%;
    margin-top: 20px; }
    @media only screen and (min-width: 640px) {
      .results .profile {
        max-width: 100%; } }

/* -------------------------------- 

Candidate 

-------------------------------- */
table tbody th, table tbody td {
  padding: 0; }

table thead, table tbody, table tfoot {
  background: none; }

table tbody tr:nth-child(even) {
  background: none; }

.calendar {
  position: relative;
  color: #C8C8C8; }
  .calendar .cal-none {
    display: none; }
    @media only screen and (min-width: 640px) {
      .calendar .cal-none {
        display: none; } }
    @media only screen and (min-width: 1024px) {
      .calendar .cal-none {
        display: block; } }
  .calendar .row .row {
    max-width: none;
    margin: 0; }
  @media screen and (min-width: 40em) {
    .calendar .row .row {
      margin: 0; } }
  .calendar table {
    width: 100%;
    margin-bottom: 40px; }
  .calendar .cal-table:last-child table {
    margin-bottom: 0; }
  .calendar .avcal-pickable, .calendar th {
    color: #021725; }
  .calendar th, .calendar td {
    text-align: center;
    vertical-align: middle;
    width: 12.5%;
    border: 2px solid #F5F6F7;
    font-size: 14px; }
    .calendar th .week, .calendar th .day, .calendar th .am, .calendar th .pm, .calendar td .week, .calendar td .day, .calendar td .am, .calendar td .pm {
      position: relative;
      display: inline-block;
      width: 100%;
      float: left;
      background-color: rgba(200, 200, 200, 0.5);
      border-radius: 4px;
      font-size: 20px;
      font-weight: 500; }
      @media only screen and (min-width: 1024px) {
        .calendar th .week, .calendar th .day, .calendar th .am, .calendar th .pm, .calendar td .week, .calendar td .day, .calendar td .am, .calendar td .pm {
          font-size: 24px; } }
      .calendar th .week.avcal-available, .calendar th .day.avcal-available, .calendar th .am.avcal-available, .calendar th .pm.avcal-available, .calendar td .week.avcal-available, .calendar td .day.avcal-available, .calendar td .am.avcal-available, .calendar td .pm.avcal-available {
        color: #F5F6F7;
        background-color: rgba(35, 142, 245, 0.8); }
      .calendar th .week span, .calendar th .day span, .calendar th .am span, .calendar th .pm span, .calendar td .week span, .calendar td .day span, .calendar td .am span, .calendar td .pm span {
        position: absolute;
        left: 50%;
        top: 50%;
        bottom: auto;
        right: auto;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%); }
    .calendar th .week, .calendar td .week {
      height: 100%;
      overflow: auto; }
      .calendar th .week span, .calendar td .week span {
        position: absolute;
        left: 50%;
        top: 50%;
        bottom: auto;
        right: auto;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%); }
    .calendar th .am, .calendar th .pm, .calendar td .am, .calendar td .pm {
      width: 50%;
      border: 1px solid #FFF;
      border-bottom: none;
      font-size: 8px; }
      @media only screen and (min-width: 640px) {
        .calendar th .am, .calendar th .pm, .calendar td .am, .calendar td .pm {
          font-size: 10px; } }
      @media only screen and (min-width: 1024px) {
        .calendar th .am, .calendar th .pm, .calendar td .am, .calendar td .pm {
          font-size: 12px; } }
    .calendar th .am, .calendar td .am {
      border-left: none; }
    .calendar th .pm, .calendar td .pm {
      border-right: none;
      border-left: none; }
  .calendar th {
    padding: 20px 0;
    font-weight: 500; }
    .calendar th:first-child {
      color: rgba(200, 200, 200, 0.8); }
    @media only screen and (min-width: 640px) {
      .calendar th {
        font-size: 16px; } }
    @media only screen and (min-width: 1024px) {
      .calendar th {
        font-size: 18px; } }

.useful-links .btn-inline {
  width: 180px; }

.dd2div-text, .dd2div-text p, p > .dd2div-text {
  font-weight: 500;
  color: #021725;
  font-size: 16px;
  font-size: 1rem;
  padding-top: 2px; }
  @media only screen and (min-width: 640px) {
    .dd2div-text, .dd2div-text p, p > .dd2div-text {
      font-size: 16px;
      font-size: 1rem; } }
  @media only screen and (min-width: 1024px) {
    .dd2div-text, .dd2div-text p, p > .dd2div-text {
      font-size: 18px;
      font-size: 1.125rem; } }

.dd2div-text-skills {
  display: inline-block;
  margin-left: 35px; }

.dd2div-remove-left {
  position: relative; }

.input-group {
  font-size: 16px;
  font-size: 1rem; }
  @media only screen and (min-width: 640px) {
    .input-group {
      font-size: 16px;
      font-size: 1rem; } }
  @media only screen and (min-width: 1024px) {
    .input-group {
      font-size: 18px;
      font-size: 1.125rem; } }

/* -------------------------------- 

Bookings

-------------------------------- */
.bookings p {
  color: #021725; }
.bookings .booking-result {
  position: relative;
  padding: 20px 0;
  border-bottom: 1px solid rgba(2, 23, 37, 0.2); }
  .bookings .booking-result::after {
    clear: both;
    content: "";
    display: table; }
  .bookings .booking-result:first-child {
    padding-top: 0; }
  .bookings .booking-result:last-child {
    padding-bottom: 0;
    border: none; }
  @media only screen and (max-width: 639px) {
    .bookings .booking-result .columns {
      margin-bottom: 20px; }
      .bookings .booking-result .columns:nth-last-child(-n+2) {
        margin-bottom: 0; } }
  @media only screen and (min-width: 640px) {
    .bookings .booking-result .date {
      text-align: right; } }

.h2extra {
  padding-bottom: 20px; }

/* -------------------------------- 

Accordion 

-------------------------------- */
.accordion-menu {
  width: 100%; }
  .accordion-menu .btn-inline {
    margin-top: 0; }
    .accordion-menu .btn-inline:first-child {
      margin-right: 0; }
  @media only screen and (max-width: 639px) {
    .accordion-menu .btn-book {
      float: right;
      margin: 0; }
      .accordion-menu .btn-book-extra {
        margin-top: 10px;
        clear: both; } }
  .accordion-menu .select {
    margin: 0; }
  .accordion-menu h2 {
    margin-top: 2px; }
    .accordion-menu h2.booking-list {
      margin-top: 6px; }
      @media only screen and (max-width: 639px) {
        .accordion-menu h2.booking-list {
          margin-bottom: 15px;
          padding-left: 9px; } }
      .accordion-menu h2.booking-list-single {
        margin-top: 0; }
  @media only screen and (max-width: 639px) {
    .accordion-menu .single-cand {
      margin-top: 12px;
      max-width: 80%; } }
  .accordion-menu p {
    color: #021725; }
    .accordion-menu p.rate {
      margin-top: 8px; }
      .accordion-menu p.rate-none {
        margin-top: 3px; }
  .accordion-menu ul {
    /* by default hide all sub menus */
    display: none; }
  .accordion-menu li {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .accordion-menu input.accordion-check[type="checkbox"] {
    /* hide native checkbox */
    position: absolute;
    opacity: 0; }
  .accordion-menu label.accordion-label, .accordion-menu .sub {
    position: relative;
    display: block;
    padding: 15px 0px 15px 30px;
    border-bottom: 1px solid rgba(2, 23, 37, 0.2);
    color: #021725; }
  @media only screen and (max-width: 639px), only screen and (min-width: 640px) {
    .accordion-menu .sub {
      padding-left: 0; } }
  .accordion-menu label.check {
    padding: 0;
    border: none;
    text-align: right;
    padding-right: 30px; }
  .accordion-menu label.accordion-label::before, .accordion-menu label.accordion-label::after, .accordion-menu .sub::after {
    /* icons */
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
  .accordion-menu label.accordion-label {
    cursor: pointer; }
  .accordion-menu label.accordion-label::before {
    background-image: url("img/portal/icons/arrow-blue.svg");
    background-repeat: no-repeat;
    background-size: cover; }
  .accordion-menu label.accordion-label::before {
    /* arrow icon */
    left: 0px;
    background-position: 0 0;
    -webkit-transform: translateY(-50%) rotate(-90deg);
    -moz-transform: translateY(-50%) rotate(-90deg);
    -ms-transform: translateY(-50%) rotate(-90deg);
    -o-transform: translateY(-50%) rotate(-90deg);
    transform: translateY(-50%) rotate(-90deg); }
  .accordion-menu label.accordion-label::after {
    /* folder icons */ }
  .accordion-menu .sub::after {
    /* image icon */ }
  .accordion-menu input.accordion-check[type="checkbox"]:checked + label.accordion-label::before {
    /* rotate arrow */
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
  .accordion-menu input.accordion-check[type="checkbox"]:checked + label.accordion-label::after {
    /* show open folder icon if item is checked */ }
  .accordion-menu input.accordion-check[type="checkbox"]:checked + label.accordion-label + ul,
  .accordion-menu input.accordion-check[type="checkbox"]:checked + label.accordion-label:nth-of-type(n) + ul {
    /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
    /* show children when item is checked */
    display: block; }
  .accordion-menu ul label,
  .accordion-menu ul .sub {
    margin-left: 30px; }
    @media only screen and (max-width: 639px) {
      .accordion-menu ul label,
      .accordion-menu ul .sub {
        margin-left: 10px; } }
  .accordion-menu ul ul label,
  .accordion-menu ul ul .sub {
    margin-left: 60px;
    padding-left: 0; }
    @media only screen and (max-width: 639px) {
      .accordion-menu ul ul label,
      .accordion-menu ul ul .sub {
        margin-left: 10px; } }
  .accordion-menu ul ul ul label,
  .accordion-menu ul ul ul .sub {
    margin-left: 90px; }
  .accordion-menu.animated label::before {
    /* this class is used if you're using jquery to animate the accordion */
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s; }
  .accordion-menu [type='checkbox'] + label, .accordion-menu [type='radio'] + label {
    margin: 0; }
  @media only screen and (max-width: 639px) {
    .accordion-menu .sub .columns {
      margin-bottom: 20px; } }
  @media only screen and (max-width: 639px) {
    .accordion-menu .sub .columns.end {
      margin-bottom: 0; } }

.sc-trigger {
  position: relative;
  display: inline-block;
  margin-left: 17px;
  width: 150px;
  height: 25px; }
  .sc-trigger .sc-quest {
    background: #021725;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    text-align: center;
    color: white;
    font-weight: 500;
    font-size: 15px; }
  .sc-trigger .sc-priority, .sc-trigger .sc-em {
    color: #021725;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0; }
  .sc-trigger .sc-priority {
    overflow: hidden; }
  .sc-trigger::before, .sc-trigger::after {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: all .3s; }
  .sc-trigger::before {
    content: 'Please choose the priority of your candidates. If they are your preferred candidate then rate them as High.';
    background: #021725;
    color: white;
    width: 280px;
    bottom: 60px;
    padding: 15px 15px 20px 15px;
    border-radius: 4px;
    left: 0; }
  .sc-trigger::after {
    content: '';
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #021725;
    left: 63px;
    bottom: 40px; }
  .sc-trigger:hover::before, .sc-trigger:hover::after {
    opacity: 1;
    visibility: visible; }
  .sc-trigger:hover::before {
    bottom: 50px; }
  .sc-trigger:hover::after {
    bottom: 30px; }

/* -------------------------------- 

jQuery UI Custom Styles 

-------------------------------- */
#ui-datepicker-div {
  font-size: 100%;
  font-family: "aktiv-grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #021725; }

.ui-datepicker table td, .ui-datepicker th span, .ui-datepicker-title, .ui-widget-header {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400; }
  .ui-datepicker table td a, .ui-datepicker th span a, .ui-datepicker-title a, .ui-widget-header a {
    text-align: center; }

.ui-datepicker-title {
  font-size: 22px;
  font-size: 1.375rem;
  font-weight: 500;
  padding: 0px 0 10px; }

.ui-datepicker {
  padding: 10px; }

.ui-datepicker table {
  margin: 0 0 0; }

.ui-widget-header {
  border: none;
  background: none; }

.ui-datepicker th {
  font-weight: 400;
  color: #828385; }

.ui-widget-content {
  background: white; }

.ui-widget.ui-widget-content {
  border: none; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  background: #F5F6F7; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  border: none;
  color: #021725; }

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
  background: #238EF5;
  color: #F5F6F7; }

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  font-weight: 500; }

.ui-datepicker td {
  padding: 0; }

.ui-datepicker {
  width: 290px;
  max-width: 90%; }
  .ui-datepicker table thead, .ui-datepicker table tbody, .ui-datepicker table tfoot {
    border: none; }

.ui-datepicker td span, .ui-datepicker td a {
  padding: 9px 7px; }

.ui-corner-all {
  border-radius: 0; }

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  margin-top: 0; }

/*# sourceMappingURL=style.css.map */