html,
body {
  max-width: 100vw;
  max-height: 100vh;
  min-width: 1366px;
  margin: 0px;
  overflow: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

body {
  background-color: #aab7b8;
  font-family: "Lato", sans-serif;
  color: white;
  z-index: -1;
}

/* left side */
#left-image-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: url(https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1D180509DF.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
  -webkit-animation-duration: 10s;
  -webkit-animation-name: pulse;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  /* Hey browser, use your GPU */
  -webkit-transform: translate3d(0, 0, 0);
}

/*bottom container*/
#slide-container {
  position: absolute;
  top: 92vh;
  left: 20%;
  width: 80%;
  height: 8vh;
  background: #c0392b;
  z-index: 2;
  overflow: hidden;
}
#tanggal-jam {
  position: absolute;
  top: 92vh;
  width: 20%;
  height: 8vh;
  padding: 8px;
  background: rgba(57, 109, 177, 1);
  z-index: 3;
  overflow: hidden;
}
/* text scroller */

#first-content {
  top: 0.4vh;
  position: absolute;
  z-index: 50;
  position: absolute;
  width: 100%;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  -webkit-transform: translateX(100%);
  -webkit-animation: scroll-left 60s linear infinite;
}

/* Global Classes */
.header-text {
  font-family: "Helvetica", sans-serif;
  font-size: 2.8vw;
  color: #ffffff;
  width: 100vw;
}
#judul_1 {
  font-family: "Helvetica", sans-serif;
  font-size: 2.8vw;
  color: #ffffff;
  width: 100vw;
  font-weight: 900;
}
#judul_2 {
  font-family: "Helvetica", sans-serif;
  font-size: 1.5vw;
  color: #ffffff;
  width: 100vw;
}
#logo {
  width: 8vw;
  height: auto;
  float: right;
}
.card-sholat {
  height: 12vh !important;
  margin-bottom: 0px !important;
}
.card {
  /*margin-bottom:0px!important;
	min-height:30px!important;*/
}
.card .body {
  /*padding : 12px!important;*/
}
.body-item {
  height: 35vh !important;
}
.body-item-slide {
  padding: auto 2px !important;
}
.nama-event {
  font-size: 1.5vw !important;
}
.slide-item-parent {
  margin-top: 2vh !important;
}
.item-ads {
  width: 700vw !important;
}
.embed-responsive-4by3 {
  padding-bottom: 60%;
}
.title {
  font-size: 6.8vw;
  font-weight: 600;
}
/*container*/

.transparan {
  background-color: rgba(0, 0, 0, 0.5);
}
.transparan-abu {
  background-color: rgba(208, 211, 212, 0.5);
  color: black;
}
.card {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
.bg-red {
  background-color: rgba(244, 67, 54, 0.5) !important;
}
.bg-blue-grey {
  background-color: rgba(96, 125, 139, 0.5) !important;
}
.bg-cyan {
  background-color: rgba(0, 188, 212, 0.5) !important;
}
.bg-green {
  background-color: rgba(76, 175, 80, 0.5) !important;
}
.bg-orange {
  background-color: rgba(255, 152, 0, 0.5) !important;
}
.bg-pink {
  background-color: rgba(233, 30, 99, 0.5) !important;
}

.card-no {
  background-color: rgba(0, 0, 0) !important;
}
.bg-red-no {
  background-color: rgba(244, 67, 54) !important;
}
.bg-blue-grey-no {
  background-color: rgba(96, 125, 139) !important;
}
.bg-cyan-no {
  background-color: rgba(0, 188, 212) !important;
}
.bg-green-no {
  background-color: rgba(76, 175, 80) !important;
}
.bg-orange-no {
  background-color: rgba(255, 152, 0) !important;
}
.bg-pink-no {
  background-color: rgba(233, 30, 99) !important;
}
#main-content {
  height: 100%;
  margin-bottom: 10px;
}

#media {
  height: 100%;
  padding-bottom: 12vh;
}

#hari {
  font-weight: normal;
  font-size: 1.5vw !important;
  color: #fdfefe;
  line-height: 2vh !important;
}
#tanggal {
  font-weight: normal;
  font-size: 1.5vw !important;
  color: #fdfefe;
  line-height: 2vh !important;
}
#waktu {
  font-weight: normal;
  font-size: 2.5vw !important;
  color: #fdfefe;
  line-height: 3vh !important;
}
.embed-responsive-4by3 {
  padding-bottom: 60% !important;
}
#tengah {
  padding-top: 2vh;
}
.right-card {
  margin-top: 5px;
  margin-bottom: 5px !important;
}
.header-agenda {
  font-family: "Helvetica", sans-serif;
  font-size: 1.8vw;
}
.header-agenda-mengajar {
  font-family: "Helvetica", sans-serif;
  font-size: 1.5vw;
  padding-left: 5px;
  padding-right: 5px;
}
.up-card {
  padding: 0px !important;
}
.tales {
  width: 100%;
}
.carousel-inner {
  width: 100%;
}
#nama-guru {
  height: 120px;
}
#jabatan {
  width: 134px;
  height: 25px;
  padding: 1px;
}
#guru-info {
  padding: 10px 4px 4px 4px;
}
#element {
  margin-top: 0.5vw;
  padding-left: 10px;
}
.jelang {
  font-size: 1.8vw;
}
.nm-solat {
  font-size: 1.8vw;
  line-height: 1.2;
}
.waktu-solat {
  font-size: 1.8vw;
  line-height: 0.6;
}
.header-image {
  width: 66vw !important;
  height: auto !important;
}