.text-purple {
	color: #A4D8D8 !important;
}
.text-white {
  color: #fff !important;
}
.bg_dark {
    background: #111;
}
.bg-black {
    background: #232429
}
.bg-darker {
    background: #222
}
.bg-purple {
    background: #A4D8D8
}
.bg-lightpurple {
    background: rgba(110, 87, 224, .03);
}
.hoverbg-transparent:hover {
  background: transparent !important;
}
.hoverbg-purple:hover {
  background: #6E57E0;
  color: #fff !important; 
}
.hoverc-white:hover {
  color: #fff !important;
}
.bg-oren {
    background: #A4D8D8
}
.text-p {
	color: #858585
}
.text-judul {
	color: #fff
}

.box_shadow {
    box-shadow: -15px -15px 15px rgba(255, 255, 255, .5), 15px 15px 15px rgba(0, 0, 0, .05);
}
.rounded-15 {
	border-radius: 15px
}
/* ===== BANNER ===== */
.overlay {
    position: absolute;
    background: rgba(0, 0, 0, .7);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.bg-intro {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
}

    /* scroll down */
.mouse {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    width: 2rem;
    height: 4rem;
    border: 3px solid #fff;
    border-radius: 2rem;
    transform: translateX(-50%);
    display: flex;
}
.mouse span {
    width: 4px;
    height: .9rem;
    background-color: #fff;
    border-radius: 2px;
    display: block;
    margin: auto;
    animation: ball-down 1s linear infinite; 
}
@keyframes ball-down {
    0%{
    opacity: 0;
    transform: translateY(-1rem);
    }
    100%{
    opacity: 1;
    transform: translateY(1rem);
    }
}

/* ===== SERVICES ===== */
.logo-size {
	font-size: 70px;
	line-height: 0px;
}

/* ===== PORTFOLIO ===== */

/* animeted left */
.card-about {
    position: relative;
}
.overlayT {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	background-color: #fff;
	border-radius: 3px;
	overflow: hidden;
	width: 100%;
	height:0;
	transition: .5s ease;
}
.card-about:hover .overlayT {
	bottom: 0;
	height: 100%;
}
    /* PORTFOLIO */
.pusat {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}
.card-img {
    position: relative;
}
.overlayL {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .2s ease;
  background: rgba(255, 255, 255, .8);
}

.card-img:hover .overlayL {
  opacity: 1;
}
    /* CONTACT */
.Message { 
    border: none;
    outline: none; 
    width: 100%;
    background: rgba(164, 216, 216, .1);
    border-radius: 4px;
}
.hoverbg-light:hover {
  background: rgba(0,0,0,.7) !important;
  color: #fff !important;
}
/* #abe2c3 */