/* text 404 start */
h1 {
    font-size: 10rem !important;
}

.animate-character
{
   text-transform: uppercase;
    background-image: linear-gradient(
    -225deg,
    /* #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100% */
    rgb(255, 15, 91) 0%,
    #fff 29%,
    rgb(255, 15, 91) 67%,
    #fff 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 3s linear infinite;
  display:inline-block;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

/* text 404 end */

img {
    width: 80%;
}

.btn-primary {
    background-color: rgb(255, 15, 91) !important;
    border-color: rgb(255, 15, 91) !important;
}

@mixin breakpoint($point) {
    @if $point==mobile {
        @media (max-width: 480px) and (min-width: 320px) {
            @content ;
        }
    }
}

/* // keyrames */
@keyframes floating {
    from { transform: translateY(0px); }
    65%  { transform: translateY(15px); }
    to   { transform: translateY(-0px); }
}

body {
    height: auto !important;
    width: auto !important;
    /* background-color: aquamarine !important; */
}

.briefcase{
    /* position: absolute; */
    /* top: 18vmin;
    left: 10vmin;
    height: 30vmin; */
    animation: floating 5s infinite ease-in-out;
  
    @include breakpoint(mobile){
      top: 100vmin;
    }
}

.px-50 {
    padding-left: 50px !important;
    padding-right: 150px !important;
}

.mx-100 {
    margin-top: 100px !important;
    margin-bottom: 100px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

/* animasi emet terbang */

#background-wrap {
    bottom: 0;
	left: 0;
	padding-top: 50px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: -1;
}

/* KEYFRAMES */

@-webkit-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

@-moz-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

@keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

/* ANIMATIONS */

.x1 {
	-webkit-animation: animateCloud 15s linear infinite;
	-moz-animation: animateCloud 15s linear infinite;
	animation: animateCloud 15s linear infinite;
	
	-webkit-transform: scale(0.65);
	-moz-transform: scale(0.65);
	transform: scale(0.65);
}

.x2 {
	-webkit-animation: animateCloud 6s linear infinite;
	-moz-animation: animateCloud 6s linear infinite;
	animation: animateCloud 6s linear infinite;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

.x3 {
	-webkit-animation: animateCloud 9s linear infinite;
	-moz-animation: animateCloud 9s linear infinite;
	animation: animateCloud 9s linear infinite;
	
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
}
/* OBJECTS */

.cloud {
    background-image: url('../images/emet.png');
    background-size: 100%;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );


	height: 300px;
	position: relative;
	width: 300px;
}