* {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
}

body {
  padding: 1rem 0 0 0;
}
body .nav-top {
  right: 20px;
  bottom: 20px;
  background-color: rgba(255, 255, 255, 0.486);
  padding: 0.5rem;
  border-radius: 5px;
}
body .navbar {
  display: flex;
  justify-content: space-between;
  height: 120px;
  padding: 0 5%;
  background-color: white;
}
body .navbar .checkbox-btn-sidebar:checked ~ .responsive-navbar {
  top: 0 !important;
  transition: 0.5s;
}
body .navbar .btn-sidebar {
  cursor: pointer;
  z-index: 100;
}
body .navbar .responsive-navbar {
  top: -50rem !important;
  background-color: white;
  transition: 0.5s;
}
body .navbar .navbar-start {
  display: flex;
  align-items: center;
}
body .navbar .navbar-start img {
  width: 45px;
  margin-right: 1rem;
}
body .navbar .navbar-start h6 {
  max-width: 180px;
  margin-bottom: 0;
  font-size: 20px;
  color: #3A7DBF;
}
body .navbar .navbar-center {
  display: flex;
  align-items: center;
}
body .navbar .navbar-center .nav-item {
  margin: 1rem 2rem;
  text-decoration: none;
  color: #333333;
  transition: 0.5s;
}
body .navbar .navbar-center .nav-item:hover {
  color: #3A7DBF;
  transition: 0.5s;
}
body .navbar .navbar-end {
  display: flex;
  align-items: center;
}
body .navbar .navbar-end .auth-item {
  margin: 1rem 0 1rem 2rem;
  text-decoration: none;
  color: #333333;
  transition: 0.5s;
}
body .navbar .navbar-end .frame {
  background-color: #3A7DBF;
  border: 1px solid #3A7DBF;
  border-radius: 10px;
  color: white;
  padding: 0.5rem 1rem;
  transition: 0.5s;
}
body .navbar .navbar-end .auth-item:hover {
  color: #3A7DBF;
  transition: 0.5s;
  transition: 0.5s;
}
body .navbar .navbar-end .frame:hover {
  background: none;
  border: 1px solid #3A7DBF;
  color: #3A7DBF;
  transition: 0.5s;
}
body .hero {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 10rem;
  padding: 0 5%;
}
body .hero .hero-start {
  max-width: 50%;
  min-width: 300px;
}
body .hero .hero-start h1 {
  font-size: 72px;
}
body .hero .hero-start p {
  margin-top: 2rem;
  margin-bottom: 3rem;
  font-size: 20px;
}
body .hero .hero-start a {
  background-color: #3A7DBF;
  color: white;
  text-decoration: none;
  border-radius: 10px;
  padding: 0.7rem 1.2rem;
  border: none;
  transition: 0.5s;
  box-shadow: 0 0 70px 1px lightblue;
}
body .hero .hero-start a:hover {
  color: white;
  background-color: #333333;
  transition: 0.5s;
}
body .hero .hero-end {
  width: 50%;
  min-width: 400px;
}
body .hero .hero-end img {
  width: 768px;
}
body .hero-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #E8F9FD;
  width: 100%;
  padding: 3rem 5% 0 5%;
}
body .hero-footer .border {
  height: 3px;
  width: 150px;
  background-color: #333333;
  margin-top: 1rem;
}
body .hero-footer .featured-logo {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
body .hero-footer .featured-logo img {
  width: 200px;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  margin: 2rem 0;
  transition: 0.5s;
}
body .hero-footer .featured-logo img:hover {
  filter: grayscale(100%);
  transition: 0.5s;
}
body .about {
  display: flex;
  align-items: center;
  padding: 10rem 5%;
}
body .about .about-start img {
  max-width: 960px;
}
body .about .about-end h1 {
  font-size: 60px;
  margin-bottom: 2rem;
}
body .about .about-end p {
  text-align: justify;
}
body .program {
  display: flex;
  align-items: center;
  background-color: #E8F9FD;
  padding: 10rem 5%;
}
body .program .program-start {
  padding-right: 5rem;
  width: 50%;
}
body .program .program-start h1 {
  font-size: 60px;
  margin-bottom: 2rem;
}
body .program .program-start p {
  font-size: 20px;
}
body .program .program-end {
  display: flex;
  flex-direction: column;
  padding-right: 2rem;
}
body .program .program-end .carousel {
  width: 100%;
  max-width: 960px;
  border-radius: 30px;
  margin-bottom: 2rem;
  position: relative;
  transition: 0.5s;
  box-shadow: 0 0 70px 0.5px lightblue;
}
body .program .program-end .carousel .carousel-inner {
  border-radius: 30px;
}
body .program .program-end .carousel .carousel-inner img {
  width: 100%;
  border-radius: 30px;
}
body .program .program-end .carousel .carousel-inner .carousel-caption {
  color: white;
}
body .program .program-end .carousel .join-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  align-self: center;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  background: none;
  border: 1px solid #3A7DBF;
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  background: none;
  color: #3A7DBF;
  transition: 0.5s;
  opacity: 0;
  box-shadow: 0 0 70px 1px lightblue;
}
body .program .program-end .carousel .join-button:hover {
  background-color: #333333 !important;
}
body .program .program-end .carousel:hover {
  transition: 0.5s;
}
body .program .program-end .carousel:hover .join-button {
  background-color: #3A7DBF;
  border: none;
  color: white;
  transition: 0.5s;
  opacity: 100;
}
body .artikel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rem 5%;
}
body .artikel .artikel-start {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 4rem;
}
body .artikel .artikel-start h1 {
  font-size: 60px;
}
body .artikel .artikel-start p {
  font-size: 20px;
}
body .artikel .artikel-center {
  display: flex;
  align-items: flex-start;
  margin: 0 auto;
  overflow-x: auto;
  width: 100%;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  padding: 3rem 0;
}
body .artikel .artikel-center .card-artikel {
  min-width: 300px;
  max-width: 300px;
  flex: 10px 5 23%;
  margin: 0 1rem;
  box-shadow: 0 0px 5px 1px rgba(211, 211, 211, 0.651);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: 0.5s;
}
body .artikel .artikel-center .card-artikel img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  border-radius: 10px 10px 0 0;
}
body .artikel .artikel-center .card-artikel .content-artikel {
  padding: 1rem;
}
body .artikel .artikel-center .card-artikel .content-artikel span {
  background-color: #55BBA9;
  border-radius: 5px;
  padding: 0.5rem;
  color: white;
  margin-bottom: 1rem;
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-size: small;
}
body .artikel .artikel-center .card-artikel .content-artikel h6 {
  font-weight: bold;
}
body .artikel .artikel-center .card-artikel:hover {
  margin-top: -1rem;
  transition: 0.5s;
}
body .artikel .artikel-center .card-artikel:hover img {
  filter: grayscale(100%);
  transition: 0.5s;
}
body .artikel .artikel-end a {
  text-decoration: none;
}
body .contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rem 5%;
  background-color: #E8F9FD;
}
body .contact .contact-start {
  text-align: center;
  margin-bottom: 4rem;
}
body .contact .contact-start h1 {
  font-size: 60px;
}
body .contact .contact-start p {
  font-size: 20px;
}
body .contact .contact-end {
  width: 100%;
  max-width: 768px;
}
body .contact .contact-end form {
  width: 100%;
  display: flex;
  flex-direction: column;
}
body .contact .contact-end form .input {
  margin-bottom: 2rem !important;
}
body .contact .contact-end form .input label {
  margin-bottom: 1rem;
  font-size: 18px;
}
body .contact .contact-end form .input input, body .contact .contact-end form .input textarea {
  padding: 0.5rem 1rem;
  border-radius: 10px;
  background: none;
}
body .contact .contact-end form button {
  display: flex;
  align-items: center;
  align-self: flex-end;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  background: none;
  background-color: #3A7DBF;
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  border: none;
  color: white;
  transition: 0.5s;
  box-shadow: 0 0 70px 1px lightblue;
}
body .contact .contact-end form button:hover {
  background-color: #333333 !important;
  transition: 0.5s;
}
body .footer {
  display: flex;
  flex-direction: column;
}
body .footer .footer-start {
  padding: 5rem 5%;
  background-color: #333333;
  display: flex;
  color: white;
}
body .footer .footer-start .footer-item {
  display: flex;
  align-items: center;
}
body .footer .footer-start .footer-item img {
  width: 50px;
  margin-right: 1rem;
  padding: 0.5rem;
  box-sizing: border-box;
  background-color: white;
  border-radius: 10px;
}
body .footer .footer-start .footer-item .text h6 {
  font-weight: bold;
  margin-bottom: 0;
}
body .footer .footer-start .footer-item .text a {
  text-decoration: none;
  color: lightgray;
}
body .footer .footer-end {
  background-color: #181818;
  padding: 5rem 5%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  color: white;
}
body .footer .footer-end .footer-item {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  margin: 2rem 0;
}
body .footer .footer-end .footer-item h6 {
  font-weight: bold;
}
body .footer .footer-end .footer-item a {
  text-decoration: none;
  color: lightgray;
  margin-bottom: 0.5rem;
}
body .footer .footer-end .footer-item .start {
  margin-bottom: 3rem;
}
body .footer .footer-end .footer-item .end a {
  margin-right: 1rem;
  font-size: 20px;
  color: lightgray;
}
body .footer .footer-copyright {
  background-color: #181818;
  padding: 2rem 5%;
  color: white;
}
body .auth {
  display: flex;
  height: 100vh;
}
body .auth .auth-start {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 5rem;
}
body .auth .auth-start img {
  width: 100%;
  max-width: 768px;
}
body .auth .auth-end {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
}
body .auth .auth-end .start {
  display: flex;
  align-items: center;
}
body .auth .auth-end .start img {
  width: 50px;
}
body .auth .auth-end .start h6 {
  font-size: 20px !important;
  margin-bottom: 0;
}
body .auth .auth-end .center {
  margin: 2rem 0;
}
body .auth .auth-end .center h1 {
  font-size: 54px;
}
body .auth .auth-end .center p {
  font-size: 20px;
}
body .auth .auth-end .end {
  width: 100%;
}
body .auth .auth-end .end form .form-input {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 0 10px 0 rgba(211, 211, 211, 0.678);
  border-radius: 10px;
  border-radius: 5px;
}
body .auth .auth-end .end form .form-input .input {
  position: relative;
  display: flex;
  width: 100%;
}
body .auth .auth-end .end form .form-input .input .label-icon {
  margin-right: 1rem;
  font-size: 28px;
  position: absolute;
  left: 1.5rem;
  top: 1.2rem;
  color: gray;
}
body .auth .auth-end .end form .form-input .input .item-input {
  width: 100%;
  position: relative;
}
body .auth .auth-end .end form .form-input .input .item-input .label-text {
  font-size: 15px;
  top: 1.8rem;
  left: 4.5rem;
  color: gray;
  position: absolute;
  transition: 0.2s;
}
body .auth .auth-end .end form .form-input .input .item-input input {
  width: 100%;
  padding: 2.5rem 4rem 1rem 4.5rem;
  background: none;
  border: none;
  border-bottom: 0.5px solid rgba(211, 211, 211, 0.514) !important;
}
body .auth .auth-end .end form .form-input .input .item-input input:focus {
  outline: none;
  border-bottom: 2px solid #3A7DBF !important;
}
body .auth .auth-end .end form .form-input .input .item-input input:focus ~ .label-text {
  color: #3A7DBF !important;
  top: 1rem;
  font-size: 14px;
  transition: 0.2s;
}
body .auth .auth-end .end form .form-input .input .item-input input:not(:-moz-placeholder-shown) ~ .label-text {
  color: #3A7DBF !important;
  top: 1rem;
  font-size: 14px;
  -moz-transition: 0.2s;
  transition: 0.2s;
}
body .auth .auth-end .end form .form-input .input .item-input input:not(:-ms-input-placeholder) ~ .label-text {
  color: #3A7DBF !important;
  top: 1rem;
  font-size: 14px;
  -ms-transition: 0.2s;
  transition: 0.2s;
}
body .auth .auth-end .end form .form-input .input .item-input input:not(:placeholder-shown) ~ .label-text {
  color: #3A7DBF !important;
  top: 1rem;
  font-size: 14px;
  transition: 0.2s;
}
body .auth .auth-end .end form .form-input .input .item-input .validator {
  right: 3.5rem;
  top: 1.7rem;
  background: rgba(255, 255, 255, 0.733);
  padding: 0 1rem;
  padding: 1rem;
  border-bottom: 0.5px solid rgba(211, 211, 211, 0.514) !important;
}
body .auth .auth-end .end form .form-input .input .item-input .showpassword {
  position: absolute;
  cursor: pointer;
  font-size: 20px;
  right: 1.5rem;
  top: 1.5rem;
  padding: 0 1rem;
}
body .auth .auth-end .end form .button {
  display: flex;
  margin: 2rem 0;
}
body .auth .auth-end .end form .button .btn-submit {
  background-color: #3A7DBF;
  border-radius: 5px;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  transition: 0.5s;
  margin-right: 1rem;
  border: 1px solid #3A7DBF;
  text-decoration: none;
}
body .auth .auth-end .end form .button .btn-submit:hover {
  border: 1px solid #3A7DBF !important;
  background: none;
  color: #3A7DBF;
  transition: 0.5s;
}
body .auth .auth-end .end form .button .btn-login {
  background-color: white;
  box-shadow: 0 10px 40px 5px rgba(211, 211, 211, 0.678);
  border-radius: 5px;
  color: gray;
  padding: 0.5rem 1rem;
  border: none;
  transition: 0.5s;
  text-decoration: none;
}
body .auth .auth-end .end form .button .btn-login:hover {
  border: 1px solid #3A7DBF;
  transition: 0.5s;
}
body .artikel-page {
  display: flex;
  flex-direction: column;
  padding: 2rem 5%;
  width: 100%;
}
body .artikel-page .start {
  display: flex;
  flex-direction: column;
  width: 100%;
}
body .artikel-page .start .start-start {
  display: flex;
  margin-bottom: 2rem;
}
body .artikel-page .start .start-start .search {
  width: 100%;
  margin-right: 1rem;
  position: relative;
}
body .artikel-page .start .start-start .search input {
  width: 100%;
  border-radius: 10px;
  border: none;
  border: 1px solid lightgray;
  padding: 0.7rem 1rem;
  outline: none;
}
body .artikel-page .start .start-start .search input:focus {
  border-bottom: 2px solid #3A7DBF;
}
body .artikel-page .start .start-start .search input:not(:-moz-placeholder-shown) ~ .search-result-show {
  display: flex;
  width: 100%;
}
body .artikel-page .start .start-start .search input:not(:-ms-input-placeholder) ~ .search-result-show {
  display: flex;
  width: 100%;
}
body .artikel-page .start .start-start .search input:not(:placeholder-shown) ~ .search-result-show {
  display: flex;
  width: 100%;
}
body .artikel-page .start .start-start .search .search-result {
  position: absolute;
  top: 3.5rem;
  background-color: white;
  display: none;
  flex-direction: column;
  padding: 1rem;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 1px 1px lightgray;
  z-index: 100;
  max-height: 400px;
  overflow-y: auto;
}
body .artikel-page .start .start-start .search .search-result h6 {
  font-size: 15px;
  margin-bottom: 1.5rem;
  color: #3A7DBF;
}
body .artikel-page .start .start-start .search .search-result a {
  font-size: 15px;
  text-decoration: none;
  padding: 1rem 0;
  color: #333333;
  border-bottom: 1px solid lightgray;
}
body .artikel-page .start .start-start .search .search-result a:hover {
  background-color: rgba(226, 226, 226, 0.432);
}
body .artikel-page .start .start-start button {
  width: 100%;
  max-width: 100px;
  padding: 0.5rem;
  border: 1px solid #3A7DBF;
  background: none;
  color: #3A7DBF;
  border-radius: 10px;
  transition: 0.5s;
}
body .artikel-page .start .start-start button:hover {
  background-color: #3A7DBF;
  color: white;
  transition: 0.5s;
}
body .artikel-page .start .start-end {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}
body .artikel-page .start .start-end h2 {
  margin-bottom: 2rem;
}
body .artikel-page .start .start-end .topic-item {
  display: flex;
}
body .artikel-page .start .start-end .topic-item a {
  text-decoration: none;
  padding: 0.5rem;
  border: 1px solid lightgray;
  border-radius: 10px;
  color: #3A7DBF;
  font-size: 14px;
  margin-right: 1rem;
}
body .artikel-page .center {
  display: flex;
  flex-direction: column;
  margin-bottom: 4rem;
}
body .artikel-page .center h2 {
  width: 100%;
  margin-bottom: 2rem;
}
body .artikel-page .center .center-wrapping {
  display: flex;
  min-height: 500px;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}
body .artikel-page .center .center-wrapping .center-start {
  width: 100%;
  margin-right: 2rem;
  max-height: -webkit-max-content;
  max-height: -moz-max-content;
  max-height: max-content;
}
body .artikel-page .center .center-wrapping .center-start .article-item-lg {
  position: relative;
  display: block;
  border-radius: 10px;
}
body .artikel-page .center .center-wrapping .center-start .article-item-lg img {
  width: 100%;
  max-height: 500px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 10%;
     object-position: 50% 10%;
  border-radius: 10px;
  transition: 0.3s;
}
body .artikel-page .center .center-wrapping .center-start .article-item-lg .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.281), black);
  top: 0;
  border-radius: 10px;
}
body .artikel-page .center .center-wrapping .center-start .article-item-lg h1 {
  position: absolute;
  bottom: 0;
  left: 0;
  color: white;
  width: 100%;
  padding: 1rem 2rem;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
}
body .artikel-page .center .center-wrapping .center-start .article-item-lg:hover img {
  filter: grayscale(100%);
  transition: 0.3s;
}
body .artikel-page .center .center-wrapping .center-end {
  width: 100%;
  max-width: 600px;
  max-height: 500px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}
body .artikel-page .center .center-wrapping .center-end .article-item-sm {
  display: flex;
  flex-direction: row;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid lightgray;
  text-decoration: none;
  color: inherit;
}
body .artikel-page .center .center-wrapping .center-end .article-item-sm img {
  width: 150px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  transition: 0.3s;
}
body .artikel-page .center .center-wrapping .center-end .article-item-sm .content-item {
  padding: 0 1rem;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  justify-content: center;
  transition: 0.3s;
}
body .artikel-page .center .center-wrapping .center-end .article-item-sm .content-item h4 {
  margin-bottom: 1rem;
  font-size: 20px;
}
body .artikel-page .center .center-wrapping .center-end .article-item-sm:hover img {
  filter: grayscale(100%);
  transition: 0.3s;
}
body .artikel-page .center .center-wrapping .center-end .article-item-sm:hover .content-item {
  color: #3A7DBF;
  transition: 0.3s;
}
body .artikel-page .end-start {
  display: flex;
  align-items: center;
}
body .artikel-page .end-end {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  width: 100%;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  padding: 2rem 0;
}
body .artikel-page .end-end .card-artikel {
  min-width: 300px;
  max-width: 300px;
  flex: 10px 5 23%;
  margin-right: 1rem;
  box-shadow: 0 0px 5px 1px rgba(211, 211, 211, 0.651);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: 0.5s;
}
body .artikel-page .end-end .card-artikel img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  border-radius: 10px 10px 0 0;
}
body .artikel-page .end-end .card-artikel .content-artikel {
  padding: 1rem;
}
body .artikel-page .end-end .card-artikel .content-artikel span {
  background-color: #55BBA9;
  border-radius: 5px;
  padding: 0.5rem;
  color: white;
  margin-bottom: 1rem;
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-size: small;
}
body .artikel-page .end-end .card-artikel .content-artikel h6 {
  font-weight: bold;
}
body .artikel-page .end-end .card-artikel:hover {
  margin-top: -1rem;
  transition: 0.5s;
}
body .artikel-page .end-end .card-artikel:hover img {
  filter: grayscale(100%);
  transition: 0.5s;
}
body .artikel-detail {
  display: flex;
  flex-direction: column;
  padding: 2rem 5%;
  width: 100%;
}
body .artikel-detail .start {
  display: flex;
  flex-direction: column;
  width: 100%;
}
body .artikel-detail .start .start-start {
  display: flex;
  margin-bottom: 1rem;
}
body .artikel-detail .start .start-start .search {
  width: 100%;
  margin-right: 1rem;
  position: relative;
}
body .artikel-detail .start .start-start .search input {
  width: 100%;
  border-radius: 10px;
  border: none;
  border: 1px solid lightgray;
  padding: 0.7rem 1rem;
  outline: none;
}
body .artikel-detail .start .start-start .search input:focus {
  border-bottom: 2px solid #3A7DBF;
}
body .artikel-detail .start .start-start .search input:not(:-moz-placeholder-shown) ~ .search-result-show {
  display: flex;
  width: 100%;
}
body .artikel-detail .start .start-start .search input:not(:-ms-input-placeholder) ~ .search-result-show {
  display: flex;
  width: 100%;
}
body .artikel-detail .start .start-start .search input:not(:placeholder-shown) ~ .search-result-show {
  display: flex;
  width: 100%;
}
body .artikel-detail .start .start-start .search .search-result {
  position: absolute;
  top: 3.5rem;
  background-color: white;
  display: none;
  flex-direction: column;
  padding: 1rem;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 1px 1px lightgray;
  z-index: 100;
  max-height: 400px;
  overflow-y: auto;
}
body .artikel-detail .start .start-start .search .search-result h6 {
  font-size: 15px;
  margin-bottom: 1.5rem;
  color: #3A7DBF;
}
body .artikel-detail .start .start-start .search .search-result a {
  font-size: 15px;
  text-decoration: none;
  padding: 1rem 0;
  color: #333333;
  border-bottom: 1px solid lightgray;
}
body .artikel-detail .start .start-start .search .search-result a:hover {
  background-color: rgba(226, 226, 226, 0.432);
}
body .artikel-detail .start .start-start button {
  width: 100%;
  max-width: 100px;
  padding: 0.5rem;
  border: 1px solid #3A7DBF;
  background: none;
  color: #3A7DBF;
  border-radius: 10px;
  transition: 0.5s;
}
body .artikel-detail .start .start-start button:hover {
  background-color: #3A7DBF;
  color: white;
  transition: 0.5s;
}
body .artikel-detail .end {
  display: flex;
  width: 100%;
  padding: 2rem 0;
}
body .artikel-detail .end .artikel-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 300px;
}
body .artikel-detail .end .artikel-content .title {
  margin-bottom: 2rem;
}
body .artikel-detail .end .artikel-content .attribute {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
body .artikel-detail .end .artikel-content .attribute .date-upload {
  padding: 0.5rem 1rem;
  background-color: rgba(211, 211, 211, 0.473);
  border-radius: 5px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-bottom: 1rem;
}
body .artikel-detail .end .artikel-content .attribute .review a {
  color: #3A7DBF;
  text-decoration: none;
}
body .artikel-detail .end .artikel-content .sub-title {
  font-weight: 700;
  margin-bottom: 1rem;
}
body .artikel-detail .end .artikel-content .thumbnail {
  width: 100%;
  margin-bottom: 1rem;
}
body .artikel-detail .end .artikel-content .thumbnail img {
  border-radius: 10px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
body .artikel-detail .end .artikel-content .like-share {
  display: flex;
  margin-bottom: 1rem;
}
body .artikel-detail .end .artikel-content .like-share .like {
  display: flex;
  align-items: center;
  font-size: 20px;
  margin-right: 1.5rem;
  cursor: pointer;
}
body .artikel-detail .end .artikel-content .like-share .like p {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0.1rem;
}
body .artikel-detail .end .artikel-content .like-share .like:hover {
  color: darkred;
}
body .artikel-detail .end .artikel-content .like-share .view {
  display: flex;
  align-items: center;
  font-size: 22px;
  margin-right: 1.5rem;
  cursor: pointer;
}
body .artikel-detail .end .artikel-content .like-share .view p {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0.1rem;
}
body .artikel-detail .end .artikel-content .like-share .view:hover {
  color: gray;
}
body .artikel-detail .end .artikel-content .like-share .share {
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: 50px;
  justify-content: center;
  align-items: center;
}
body .artikel-detail .end .artikel-content .like-share .share .button {
  margin-right: 1rem;
  cursor: pointer;
  font-size: 18px;
  transition: 0.3s;
}
body .artikel-detail .end .artikel-content .like-share .share .button:hover {
  color: #3A7DBF;
  transition: 0.3s;
}
body .artikel-detail .end .artikel-content .like-share .share .btn-share {
  display: none;
}
body .artikel-detail .end .artikel-content .like-share .share .btn-share:checked ~ .share-item {
  display: flex;
}
body .artikel-detail .end .artikel-content .like-share .share .share-item {
  display: none;
}
body .artikel-detail .end .artikel-content .like-share .share .share-item h6 {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  font-weight: 600;
}
body .artikel-detail .end .artikel-content .like-share .share .share-item a {
  text-decoration: none;
  color: #333333;
  font-size: 24px;
  margin: 0 0.5rem;
  transition: 0.3s;
}
body .artikel-detail .end .artikel-content .like-share .share .share-item a:hover {
  color: #3A7DBF;
  transition: 0.3s;
}
body .artikel-detail .end .artikel-content .paragraph {
  margin-bottom: 2rem;
}
body .artikel-detail .end .artikel-content .reference h6 {
  font-weight: 700;
}
body .artikel-detail .end .sidebar {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  min-width: 300px;
}
body .artikel-detail .end .sidebar .subscription {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 2rem;
}
body .artikel-detail .end .sidebar .subscription h4 {
  margin-bottom: 1.5rem;
}
body .artikel-detail .end .sidebar .subscription form {
  width: 100%;
  display: flex;
}
body .artikel-detail .end .sidebar .subscription form input {
  width: 100%;
  border: 1px solid lightgray;
  padding: 0.5rem 1rem;
  margin-right: 1rem;
  border-radius: 10px;
}
body .artikel-detail .end .sidebar .subscription form button {
  background: none;
  background-color: #3A7DBF;
  border: 1px solid #3A7DBF;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 10px;
}
body .artikel-detail .end .sidebar .category {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}
body .artikel-detail .end .sidebar .category h4 {
  margin-bottom: 1.5rem;
}
body .artikel-detail .end .sidebar .category a {
  text-decoration: none;
  background-color: rgba(211, 211, 211, 0.473);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  color: inherit;
  padding: 0.5rem 1rem;
  margin-left: 20px;
  position: relative;
  font-size: 15px;
  box-shadow: 2px 2px 5px lightgray;
}
body .artikel-detail .end .sidebar .category .category-part-1 {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-right: 20px solid rgba(211, 211, 211, 0.473);
  border-bottom: 20px solid transparent;
  left: -20px;
  top: 0;
}
body .artikel-detail .end .sidebar .category .category-part-2 {
  width: 10px;
  height: 10px;
  border-radius: 50rem;
  position: absolute;
  background-color: white;
  left: -5px;
  top: 15px;
}
body .artikel-detail .end .sidebar .related-article h4 {
  margin-bottom: 1.5rem;
}
body .artikel-detail .end .sidebar .related-article .article-item-sm {
  display: flex;
  flex-direction: row;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid lightgray;
  text-decoration: none;
  color: inherit;
}
body .artikel-detail .end .sidebar .related-article .article-item-sm img {
  width: 150px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  transition: 0.3s;
}
body .artikel-detail .end .sidebar .related-article .article-item-sm .content-item {
  padding: 0 1rem;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  justify-content: center;
  transition: 0.3s;
}
body .artikel-detail .end .sidebar .related-article .article-item-sm .content-item h4 {
  margin-bottom: 1rem;
  font-size: 20px;
}/*# sourceMappingURL=guest-stylesheet.css.map */