@font-face {
  font-family: Plex Sans Bold;
  src: url(../fonts/IBM-Plex-Sans/IBMPlexSans-Bold.otf);
}

@font-face {
  font-family: Plex Sans Regular;
  src: url(../fonts/IBM-Plex-Sans/IBMPlexSans-Regular.otf);
}

@font-face {
  font-family: Plex Sans Light;
  src: url(../fonts/IBM-Plex-Sans/IBMPlexSans-Light.otf);
}

@font-face {
  font-family: Plex Mono Bold;
  src: url(../fonts/IBM-Plex-Mono/IBMPlexMono-Bold.otf);
}

@font-face {
  font-family: Plex Mono Regular;
  src: url(../fonts/IBM-Plex-Mono/IBMPlexMono-Regular.otf);
}

@font-face {
  font-family: Plex Mono Light;
  src: url(../fonts/IBM-Plex-Mono/IBMPlexMono-Light.otf);
}

@font-face {
  font-family: Roboto Light;
  src: url(../fonts/Roboto/Roboto-Light.ttf);
}

@font-face {
  font-family: Roboto Regular;
  src: url(../fonts/Roboto/Roboto-Regular.ttf);
}
@font-face {
  font-family: "futura-pt",sans-serif;
  font-style: normal;
  font-weight: 600 !important;
}

body {
  padding-top: 0px;
  background-color: #262626;
  color: #d5d3d3;
  font-family: Plex Sans Regular;
}

.navbar {
  background-color: black !important;
  padding: 0;
}

.navbar-dark .navbar-toggler {
  border: 0px solid black;
}

#first-nav-link {
  padding-left: 16px;
}

.navbar-brand {
  border-bottom: 4px solid #ff7500;
  padding: 0px;
  line-height: 20px;
  font-family: futura-pt;
  font-weight: 600;
}

.brand-container {
  list-style: none;
  padding: 8px 0;
  margin-left: 8px;
}

.nav-item {
  padding: 8px 0;
  border-bottom: 3px solid black;
}

.nav-item:hover {
  color: white;
}

.nav-item:hover>.nav-link {
  color: rgba(255, 255, 255, 1) !important;
}

.nav-link:active {
  color: rgba(255, 255, 255, 1) !important;
}

.nav-link:focus {
  color: rgba(255, 255, 255, 1) !important;
}

.api-button {
  margin-right: 12px;
  margin-top: 7px;
  margin-bottom: 8px !important;
  border-color: #f57e20;
  background-color: black;
  color: #f57e20;

}
.api-button:hover {
    background-color: #f57e20 !important;
    border-color: #f57e20;
}
.api-button:focus, .api-button:active:focus, .api-button.active:focus { outline: none; ! important; outline-style: none; }

.btn-outline-primary {
   border-color: #f57e20;
   color: #f57e20;
 }
 .btn-outline-primary:hover {
     background-color: #f57e20 !important;
     border-color: #f57e20;
     color: white;
 }

#email-form {
  margin-top: 16px !important;
  margin-bottom: 8px !important;
  background-color: black;
  border: 1px solid #007bff;
}


#first-section-container {
  background-image: url('../img/mosaic-product-mockup.jpg');
  height: calc(100vh - 36px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 100%;
}

.intro-container h1 {
  padding-top: 100px;
}

.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
  width: 100%;
}

h1 {
  font-family: futura-pt;
  color: white;
  text-align: center;
  font-size: 2.2em;
  margin-bottom: 32px;
  font-weight: 600;
}

/* article and press titles */
h2 {
  font-family: Roboto Regular;
  font-size: 16px;
  color: #acaaaa;
}

/* Team Names */
h3 {
  display: inline-block;
  margin-bottom: 0;
  padding-top: 12px;
  font-family: futura-pt;
  color: white;
  font-size: 18px;
  font-weight: 600;
}

/*Team Role */
h4 {
  font-family: futura-pt;
  color: #acaaaa;
  font-size: 18px;
}

.team-member-card__avatar-wrapper {
  position: relative;
  max-width: 160px;
}
.slick-prev:before {
color: #FF7500 !important;
font-size: 30px !important;
position: absolute;
margin-top: -100px;
margin-left: -20px;

}
.slick-next:before {
color: #FF7500 !important;
font-size: 30px !important;
position: absolute;
margin-top: -100px;


}
.team-member-card__avatar {
  max-width: 160px;
  height: 180px;
  position: relative;
  overflow: hidden;
}

.team-member-card__avatar img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.team-member-card__avatar.fit img {
  width: auto;
  height: 100%;
}

/*Cryptoasset Modules. General small title */
h5 {}

p {
  font-family: Roboto light;
  font-size: 14px;
  color: #acaaaa;
}

.btn-outline-success {
  color: #ff7500;
  border-color: #ff7500;
}

.btn-outline-success:hover {
  background-color: #ff7500;
  border-color: #ff7500;
}

.list-number {
  font-family: Plex Mono Regular;
  font-style: normal;
  background-color: white;
  color: #262626;
  border-radius: 22px;
  width: 36px;
  height: 36px;
  display: inline-block;
  text-align: center;
  padding-top: 6px;
  margin: 0 calc(50% - 24px) 12px calc(50% - 24px);
}

.list-number:hover {
  background-color: #ff7500;
  cursor: pointer;
}

h5.module-title {
  text-align: center;
}

.solution-link {
  text-align: center;
  display: inline-block;
  width: 100%;
  color: #ff7500;
}

.solution-link:hover {
  color: #ff7500;
}

#team-button {
  margin-top: 100px;
}

.team-container {
  padding: 120px 10vw 70px 10vw;
  /* temporary */
}
.button-container {
  margin: 0;
  padding: 0;
  width: 4.8vw;
  border: 1px solid green;
  display: block;
  height: 200px;
}

#webapp-screenshot {
  width: 80%;
}

.grey-25-bg {
  background-color: #3c3b3a;
}

.api-container {
  /* margin-top: 30vh; */
  padding: 120px 10vw 70px 10vw;
  border-top: 0px solid #acaaaa;
  overflow: inherit;
}

.api-container p {
  text-align: center;
  font-size: 16px;
  color: white;
  line-height: 1.25;
}

#module-subtitle {
  width: 40vw;
  font-size: 14px;
  margin: 24px auto 32px auto;
  text-align: center;
  color: #acaaaa;
}

.research-module {
  border: 1px solid #474645;
  border-radius: 22px;
  display: inline-block;
  margin: 10px 8px;
  float: left;
  height: 120px;
  background-color: #262524;
  color: #ff7500;
}

.research-module-icon {
  color: #262626;
  width: 36px;
  height: auto;
  display: block;
  text-align: center;
  padding-top: 18px;
  margin: 8px auto;
}

.product-container {
  padding: 120px 10vw 70px 10vw;
  border-top: 1px solid #acaaaa;
  background-color: #212121;
}

.product-container p {
  width: 60vw;
  margin: 24px auto 32px auto;
}

.form-container {
  margin: 0 auto;
  width: 700px;
}

#beta-signup-container {
  padding: 12px 10vw;
  width: 100vw;
  height: 64px;
  border: 0px solid yellow;
  background-color: #474645;
  /* grey 30 */
}

.firstname-input {
  width: 115px !important;
}

.lastname-input {
  width: 115px !important;
}

.email-input {
  width: 280px !important;
}

#beta-signup-container input {
  margin-right: 12px;
}

.research-container {
  padding: 120px 10vw 70px 10vw;
  background-color: #1c1b1a;
}

.research-container p {
  color: #787676;
  max-width: 75%;
}

.research-container h2 {
  padding-top: 12px;
  max-width: 75%;
}

.research-image {
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  width: 192px !important;
  height: 144px !important;
}

.press-container {
  background-color: #31302f;
  margin: 0 auto;
  padding: 120px 10vw 120px 10vw;
}

.press-container h2 {
  width: 220px;
  padding-bottom: 12px;
}

.press-container a {
  width: 140px;
  color: #6b6a69;
  font-size: 14px;
  padding-bottom: 8px;
}

.press-container p.date {
  color: #6b6a69;
  width: 120px;
  display: inline-block;
  margin: 0 0 0 8px;
  padding-bottom: 8px;
}

.press-container p {
  color: #787676;
  width: 220px;
}

.press-story-container {
  width: 80vw;
  margin: 0 auto;
}

.footer-container {
  padding: 24px 10vw 24px 10vw;
}
.footer-container p {
  font-size: 14px;
}
.footer-container ul {
  padding-top: 28px;
  list-style: none;
}
.footer-container li a {
  text-decoration: underline;
  font-size: 14px;
  font-family: Roboto;
  color: #acaaaa;
}
.footer-container li a:hover {
  color: #f57e20;
  cursor: pointer;
}
.mosaic-brand-title {
  font-family: futura-pt;
  border-bottom: 3px solid #f57e20;
  color: white;
  display: inline-block;
  font-weight: 800;
  font-size: 18px;
}


/*//////* Bootstrap Media Query Breakpoints /////////
///////////////////////////////////////////////////*/
@media (max-width: 575px) {
  .api-container {
    height: 1780px;
  }

  .research-module {
    max-width: calc(40vw - 16px);
    /* 2  per row */
    min-width: 120px;
  }
}

@media (min-width: 576px) {
  .api-container {
    height: 1680px;
  }

  .research-module {
    max-width: calc(40vw - 16px);
    /* 2  per row */
    min-width: 120px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .api-container {
    height: 1180px;
  }

  .research-module {
    max-width: calc(25vw - 16px);
    /* 3  per row */
    min-width: 120px;
  }
}

@media (max-width: 768px) {
  .nav-link {
    margin-left: 12px;
  }

  #first-nav-link {
    padding-left: 0;
  }

  .api-button {
    margin-left: 12px;
  }
  #email-form {
    margin-left: 0px;
  }

}

@media (max-width: 800px) {
  #first-section-container {
    height: auto;
    width: 100vw;
  }

  .intro-container h1 {
    padding-top: 20px !important;
    padding-bottom: 300px !important;
  }
  .team-container p {
    margin-bottom: 24px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .api-container {
    height: 980px;
  }

  .research-module {
    max-width: calc(20vw - 16px);
    /* 6  per row */
    min-width: 120px;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .api-container {
    height: 780px;
  }

  .research-module {
    max-width: calc(16.6% - 16px);
    min-width: 100px;
  }
}