/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 6, ../sass/screen.scss */
.home {
  overflow: hidden;
}
/* line 9, ../sass/screen.scss */
.home #main > * {
  width: auto;
  padding: 0;
}
/* line 14, ../sass/screen.scss */
.home #page {
  position: relative;
}
/* line 16, ../sass/screen.scss */
.home #page:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
}
/* line 27, ../sass/screen.scss */
.home.loaded {
  overflow: visible;
}
/* line 30, ../sass/screen.scss */
.home.loaded #page:before {
  display: none;
}

/* line 37, ../sass/screen.scss */
.intro__screen {
  background-image: url("../assets/images/JKR_Hub_Portal_Design_mobile.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  min-height: 100vh;
  z-index: 99999;
  overflow: auto;
  height: 100%;
  display: flex;
}
@media screen and (min-width: 768px) {
  /* line 37, ../sass/screen.scss */
  .intro__screen {
    background-image: url("../assets/images/JKR_Hub_Portal_Design.jpg");
    background-size: 2000px auto;
  }
}
@media screen and (min-width: 1800px) {
  /* line 37, ../sass/screen.scss */
  .intro__screen {
    background-size: 2600px auto;
  }
}
/* line 61, ../sass/screen.scss */
.intro__screen .card__btn {
  font-size: 21px;
  background-color: white;
  color: #4d4d4d;
  cursor: pointer;
  padding: 12px 60px;
  margin-top: 20px;
  border-radius: 10px;
  display: inline-block;
  text-decoration: none !important;
  transition: all .3s ease-out;
}
/* line 72, ../sass/screen.scss */
.intro__screen .card__btn:hover {
  color: white;
  background-color: #238783;
}

/* line 79, ../sass/screen.scss */
.jkr-intro-logo {
  width: 240px;
  margin: 0 auto;
  text-align: center;
}
@media screen and (min-width: 768px) {
  /* line 79, ../sass/screen.scss */
  .jkr-intro-logo {
    width: 290px;
    margin: 0 auto 30px;
  }
}

/* line 89, ../sass/screen.scss */
.library-wrapper .category-container article a {
  display: inline-block;
}

/* line 93, ../sass/screen.scss */
.intro__screen .card__btn {
  padding: 5px 50px;
}
@media screen and (min-width: 768px) {
  /* line 93, ../sass/screen.scss */
  .intro__screen .card__btn {
    padding: 12px 60px;
  }
}

@media screen and (max-width: 767px) {
  /* line 101, ../sass/screen.scss */
  .jkrstories-intro-logo {
    width: 260px;
    margin: 0 auto;
  }

  /* line 106, ../sass/screen.scss */
  .intro__screen .container {
    height: 100%;
  }
  /* line 108, ../sass/screen.scss */
  .intro__screen .container .row {
    height: 100%;
    align-items: center;
  }
}
@media screen and (max-width: 47.9em) {
  /* line 117, ../sass/screen.scss */
  .home main .main-homepage-content {
    margin-top: 5em;
  }
}
/* line 122, ../sass/screen.scss */
.mobile-menu-wrapper {
  top: 40px !important;
}