/* Fonts */

@font-face {
  font-family: "Sepulchre";
  src: url("../fonts/Sepulchre-Light.eot"); /* IE9 Compat Modes */
  src: url("../fonts/Sepulchre-Light.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("../fonts/Sepulchre-Light.woff2") format("woff2"), /* Super Modern Browsers */
       url("../fonts/Sepulchre-Light.woff") format("woff"), /* Pretty Modern Browsers */
       url("../fonts/Sepulchre-Light.ttf")  format('truetype'), /* Safari, Android, iOS */
       url("../fonts/Sepulchre-Light.svg#svgFontName") format('svg'); /* Legacy iOS */
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: "Sepulchre";
  src: url("../fonts/Sepulchre-Regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/Sepulchre-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("../fonts/Sepulchre-Regular.woff2") format("woff2"), /* Super Modern Browsers */
       url("../fonts/Sepulchre-Regular.woff") format("woff"), /* Pretty Modern Browsers */
       url("../fonts/Sepulchre-Regular.ttf")  format('truetype'), /* Safari, Android, iOS */
       url("../fonts/Sepulchre-Regular.svg#svgFontName") format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Sepulchre";
  src: url("../fonts/Sepulchre-Bold.eot"); /* IE9 Compat Modes */
  src: url("../fonts/Sepulchre-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("../fonts/Sepulchre-Bold.woff2") format("woff2"), /* Super Modern Browsers */
       url("../fonts/Sepulchre-Bold.woff") format("woff"), /* Pretty Modern Browsers */
       url("../fonts/Sepulchre-Bold.ttf")  format('truetype'), /* Safari, Android, iOS */
       url("../fonts/Sepulchre-Bold.svg#svgFontName") format('svg'); /* Legacy iOS */
  font-weight: bold;
  font-style: normal;
}

strong {
  font-family: "Sepulchre";
  font-weight: bold;
  font-style: normal;
}

/* Font styles */

h1 {
  font-family: "Sepulchre";
  font-weight: lighter;
  font-size: 38px;
  line-height: 1.5em;
  color: #ffffff;
}

h2 {
  font-family: "Sepulchre";
  font-weight: lighter;
  font-size: 24px;
  line-height: 1.5em;
  color: #ffffff;
}

p, li {
  font-family: "Sepulchre";
  font-weight: lighter;
  font-size: 18px;
  line-height: 1.5em;
  color: #63636C;
}

a {
  transition: all .2s ease-in-out;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
}

a:hover {
  border-bottom: 1px solid #63636C;
  color: #63636C;
}

p.slide-number {
  margin-bottom: 12px;
}

ul {
  list-style-position: inside;
  padding-left: 0;
  margin-left: 0;
  text-indent: 0;
}

/* Styles */

body {
  margin: 0;
  padding: 0;
  background-color: #17171D;
}

#fullpage {
  max-width: 1200px;
  margin: 0 auto;
}

.content {
  width: 75%;
}

.intro-overlay {
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #17171D;
}

.am-logo {
  display: none;
  width: 50%;
}

.am-logo img {
  width: 100%;
  height: 100%;
}

.section-slide {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.slide-statement {
  display: flex;
  flex-direction: column;
}

.slide-icon {
  width: 280px;
  margin: 0 auto;
  padding-bottom: 20px;
}

.slide-copy {
  width: 100%;
}

.slide-icon img {
  width: 100%;
  height: 100%;
}

.scrolling-content {
  overflow-x: hidden;
}

.services-group {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;

  cursor: grab;
}

.services-group:active {
  cursor: grabbing;
}

.slick-list {
  width: 100%;
}

#scroll-control {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

.slick-dots {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  order: 1;
  width: 50%;
  height: 4px;

  list-style: none;
  text-align: center;
}

.slick-dots li {
  transition: height .1s ease-in-out;
  width: 50%;
  height: 2px;
  margin-left: 2px;
  background-color: #63636C;
}

.slick-dots li:hover {
  height: 4px;
}

.slick-dots li .pagination-dash {
  width: 100%;
  height: inherit;
  padding: 0px;
  cursor: pointer;
}

.slick-dots li.slick-active {
  background-color: white;
}

.slick-prev, .slick-next {
  transition: opacity, background-color .25s ease-in-out;
  opacity: 0;

  position: relative;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.slick-prev:hover, .slick-next:hover {
  cursor: pointer;
  background-color: grey;
}

.slick-prev {
  order: 0;
}

.slick-next {
  order: 2;
}

.show {
  opacity: 1;
}

.service-item {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  flex: 0 0 50%;
  outline: none;
}

.service-logo {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  padding-bottom: 20px;
}

.service-logo img {
  width: 100%;
  height: 100%;
}

.service-description {
  flex: 1 1 60%;
  padding: 0px 20px;
}

.service-list {
  flex: 1 1 40%;
  padding: 20px 20px;
  list-style-position: inside;
  list-style-type: square;
}

.service-list li {
  color: white;
}

.carousel-controller {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 80px;
  top: 50%;
  transform: translate(0, -50%);
}

.arrow-box {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  width: 80px;
  height: 80px;
  background-color: white;
}

.carousel-arrow-left {
  left: 0px;
}

.carousel-arrow-right {
  right: 0px;
}

/* Clients */

.logo-boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
  padding-top: 20px;
}

.logo-item {
  flex: 0 1 24.8%;
  margin: -1px 1px;
}

.logo-item img {
  width: 100%;
  height: 100%;
}

/* Jobs */

.careers-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.career-item {
  flex-basis: 33.33%;
  margin-top: 40px;
  text-align: center;
}

.career-logo {
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

.center-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

/* Navigation */

.am-logo-small {
  margin: 0 auto;
  padding: 0;
  padding: 20px;
}

.am-logo-small img {
  width: 100%;
  height: 100%;
}

nav {
  position: fixed;
  left: 0;
  top: 50%;
  height: 100%;
  width: 10%;
  transform: translate(0, -50%);
}

#menu {
  position: fixed;
  margin: 0 auto;
  width: 100%;
  top: 50%;
  transform: translate(0, -50%);
  display: none;
}

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

nav ul li {
  width: 8px;
  height: 8px;
  margin: 10px auto;
  background-color: white;
  border-radius: 4px;
  opacity: 0.5;
}

nav ul li.active {
  opacity: 1 !important;
}

nav ul li:hover {
  opacity: 1 !important;
}

/* Debug */

.debug {
  position: absolute;
  bottom: 0;
  right: 0;
  color: white;
  background-color: red;
}

.debug div {
  display: none;
}

/* ----------- MEDIA QUERIES ----------- */

/* LARGE DESKTOP WIDTH */

@media only screen
  and (min-width: 1201px) {

  .service-description h2 {
    font-size: 18px;
  }

  .service-description p {
    font-size: 14px;
  }

  .service-list li {
    font-size: 14px;
  }

  #scroll-control { display: none; }

  .logo-item {
    flex: 0 1 33%;
    margin: -1px 1px;
  }

  .logo-item {
    flex: 0 1 16.3%;
    margin: -1px 1px;
  }

  .debug div.debug-width-large-desktop {
    display: block;
  }

}

/* LARGE DESKTOP HEIGHT */

@media only screen
  and (min-height: 1201px) {

  .debug div.debug-height-large-desktop {
    display: block;
  }

}

/* DESKTOP WIDTH */

@media only screen
  and (min-width: 801px)
  and (max-width: 1200px) {

  .slide-icon {
      display: block;
  }

  .slide-statement {
      flex-direction: column;
  }

  .logo-item {
    flex: 0 1 33%;
    margin: -1px 1px;
  }

  .debug div.debug-width-desktop {
    display: block;
  }

}

/* DESKTOP HEIGHT */

@media only screen
  and (min-height: 769px)
  and (max-height: 1200px) {

  .debug div.debug-height-desktop {
    display: block;
  }

}

/* TABLET WIDTH */

@media only screen
  and (min-width: 481px)
  and (max-width: 800px) {

  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 18px;
  }

  h3 {
    font-size: 14px;
  }

  p, li {
    font-size: 14px;
  }

  nav ul li {
    width: 4px;
    height: 4px;
  }

  .am-logo {
    width: 80%;
  }

  .slide-icon {
      display: block;
      width: 40%;
  }

  .slide-statement {
      flex-direction: column;
  }

  .logo-item {
    flex: 0 1 32.7%;
    margin: -1px 1px;
  }

  .debug div.debug-width-tablet {
    display: block;
  }

}

/* TABLET HEIGHT */

@media only screen
  and (min-height: 481px)
  and (max-height: 768px) {

  .logo-item {
    flex: 0 1 32%;
    margin: -1px 1px;
  }

  .debug div.debug-height-tablet {
    display: block;
  }

}

/* MOBILE WIDTH */

@media only screen
  and (min-width: 0px)
  and (max-width: 480px) {

  h1 {
    font-size: 18px;
  }

  h2 {
    font-size: 16px;
  }

  h3 {
    font-size: 14px;
  }

  p, li {
    font-size: 14px;
  }

  nav ul li {
    width: 4px;
    height: 4px;
  }

  .am-logo {
    width: 80%;
  }

  .slide-icon {
      display: block;
      width: 60%;
  }

  .slide-statement {
      flex-direction: column;
  }

  .service-logo {
    width: 68px;
    height: 68px;
  }

  .service-description {
    padding: 0;
  }

  .service-list {
    padding: 0;
  }

  .logo-item {
    flex: 0 1 49%;
    margin: -1px 1px;
  }

  .debug div.debug-width-mobile {
    display: block;
  }

}

/* MOBILE HEIGHT */

@media only screen
  and (min-height: 0px)
  and (max-height: 480px) {

  h1 {
    font-size: 22px;
    line-height: 32px;
  }

  h2 {
    font-size: 18px;
    line-height: 26px;
  }

  h3 {
    font-size: 14px;
    line-height: 22px;
  }

  p, li {
    font-size: 14px;
    line-height: 22px;
  }

  .service-description h2 {
    font-size: 18px;
  }

  .service-description p {
    font-size: 12px;
  }

  .service-list li {
    font-size: 12px;
  }

  .slide-icon {
      display: none;
  }

  .service-logo {
    display: none;
  }

  .slide-statement {
      flex-direction: row;
  }

  .logo-item {
    flex: 0 1 32%;
    margin: -1px 1px;
  }

  .debug div.debug-height-mobile {
    display: block;
  }

}

/* DEVICE SPECIFIC */

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {

    .service-logo {
      display: block;
    }
}