@charset "utf-8";
/* CSS Document */

:root {
  --color-black: hsla(0, 0%, 0%, 1);
  --color-black-1: hsla(0, 0%, 5%, 1);
  --color-black-2: hsla(0, 0%, 20%, 1);
  --color-black-3: hsla(0, 0%, 30%, 1);
  --color-black-4: hsla(0, 0%, 40%, 1);
  --color-black-5: hsla(0, 0%, 50%, 1);
  --color-black-7: hsla(0, 0%, 70%, 1);
  --color-black-9: hsla(0, 0%, 90%, 1);
  --color-black-10: hsla(0, 0%, 97%, 1);
  
  --color-black-001: hsla(0, 0%, 0%, 0.5);
  
  
  --color-white: hsla(360, 100%, 100%, 1);
  
 --color-biru-muda: rgba(214, 246, 246, 1);
 --color-biru1: rgba(4, 109, 189, 1);
 --color-biru2: rgba(117, 191, 248, 1);
 --color-biru3: rgba(5, 134, 131, 1);
 --color-biru4: rgba(3, 135, 179, 1);
 --color-biru-tua: rgba(18, 76, 126, 1);
  
  --color-biru-00: hsla(190, 100%, 50%, 1);
  --color-biru-05: hsla(200, 100%, 48%, 1);
  --color-biru-06: hsla(200, 100%, 45%, 1);
  
  
  --color-biru-op00: hsla(190, 100%, 50%, 0.1);
  
  
  --color-hijau: hsla(154, 93%, 17%, 1);
  --color-hijau-00: hsla(156, 93%, 27%, 1);
  --color-hijau-01: hsla(148, 67%, 39%, 1);
  --color-hijau-02: hsla(90, 90%, 40%, 1);
  --color-hijau-03: hsla(102, 52%, 43%, 1);
  --color-hijau-04: hsla(102, 82%, 84%, 1);
  --color-hijau-05: hsla(102, 44%, 84%, 1);

  
  --color-hijau-op02: hsla(90, 90%, 40%, 0.8);
  --color-hijau-op03: hsla(102, 52%, 43%, 0.7);
  --color-hijau-op04: hsla(102, 52%, 43%, 0.5);
  --color-hijau-op05: hsla(102, 52%, 43%, 0.3);
  --color-hijau-op06: hsla(102, 52%, 43%, 0.04);
  
  
  --color-yellow-00: rgba(255, 170, 0, 1);
  --color-yellow-01: rgba(255, 170, 0, 0.3);
  
  

  
  --color-red-00: hsla(0, 100%, 10%, 1);
  --color-red-01: hsla(0, 100%, 20%, 1);
  --color-red-02: hsla(0, 100%, 30%, 1);
  --color-red-03: hsla(0, 100%, 40%, 1);
  --color-red-04: hsla(0, 100%, 50%, 1);
  --color-red-05: hsla(0, 100%, 60%, 1);
  --color-red-06: hsla(0, 100%, 70%, 1);
  --color-red-07: hsla(0, 100%, 80%, 1);

  --opacity-03: 0.3; 
  --opacity-07: 0.7;
  
  --shadow-small-00: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 0 rgba(0, 0, 0, 0.04);
  --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  --shadow-smallB: 0 4px 5px rgba(0,0,0,0.2);
  
}


@font-face {
  font-family: 'Roboto-Light';
  font-style: normal;
  font-weight: 100;
  src: url('../../fonts/Roboto-Light.eot');
  src: local('Roboto-Light'), local('Roboto-Light'),
  url('../../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/Roboto-Light.woff') format('woff'),
  url('../../fonts/Roboto-Light.woff'2) format('woff2'),
  url('../../fonts/Roboto-Light.ttf') format('truetype'),
  url('../../fonts/Roboto-Light.otf') format('opentype'),
  url('../../fonts/Roboto-Light.svg#Roboto') format('svg');
}

@font-face {
  font-family: 'Roboto-Regular';
  font-style: normal;
  font-weight: 100;
  src:  url('../../fonts/Roboto-Regular.eot');
  src: local('Roboto-Regular'), local('Roboto-Regular'),
  url('../../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/Roboto-Regular.woff2') format('woff2'),
  url('../../fonts/Roboto-Regular.woff') format('woff'),
  url('../../fonts/Roboto-Regular.ttf') format('truetype'),
  url('../../fonts/Roboto-Regular.otf') format('opentype'),
  url('../../fonts/Roboto-Regular.svg#Roboto') format('svg');
}

@font-face {
  font-family: 'Roboto-Medium';
  font-style: normal;
  font-weight: 300;
  src:  url('../../fonts/Roboto-Medium.eot');
  src: local('Roboto-Medium'), local('Roboto-Medium'),
  url('../../fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/Roboto-Medium.woff2') format('woff2'),
  url('../../fonts/Roboto-Medium.woff') format('woff'),
  url('../../fonts/Roboto-Medium.ttf') format('truetype'),
  url('../../fonts/Roboto-Medium.svg#Roboto') format('svg');
}

@font-face {
  font-family: 'Roboto-Bold';
  font-weight: bold;
  font-style: normal;
  src:  url('../../fonts/Roboto-Bold.eot');
  src: local('Roboto-Bold'), local('Roboto-Bold'),
  url('../../fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
  url('../../fonts/Roboto-Bold.woff2') format('woff2'),
  url('../../fonts/Roboto-Bold.woff') format('woff'),
  url('../../fonts/Roboto-Bold.ttf') format('truetype'),
  url('../../fonts/Roboto-Bold.svg#Roboto') format('svg');
}




@font-face {
  font-family: 'Montserrat-Light';
  font-style: normal;
  font-weight: 100;
  src: url(../../fonts/Montserrat-Light.eot);
  src: local('Montserrat-Light'), local('Montserrat-Light'),
  url(../../fonts/Montserrat-Light.eot) format("embedded-opentype"),
  url(../../fonts/Montserrat-Light.woff) format('woff'),
  url(../../fonts/Montserrat-Light.ttf) format('truetype'),
  url(../../fonts/Montserrat-Light.otf) format('opentype');
}


@font-face {
  font-family: 'Montserrat-Regular';
  font-style: normal;
  font-weight: 100;
  src: url(../../fonts/Montserrat-regular.eot);
  src: local('Montserrat-Regular'), local('Montserrat-Regular'),
  url(../../fonts/Montserrat-regular.eot) format("embedded-opentype"),
  url(../../fonts/Montserrat-Regular.woff) format('woff'),
  url(../../fonts/Montserrat-Regular.ttf) format('truetype'),
  url(../../fonts/Montserrat-regular.otf) format('opentype');
}


@font-face {
  font-family: 'Montserrat-SemiBold';
  font-style: normal;
  font-weight: 600;
  src: url(../../fonts/Montserrat-SemiBold.eot);
  src: local('Montserrat-SemiBold'), local('Montserrat-SemiBold'),
  url(../../fonts/Montserrat-SemiBold.eot) format("embedded-opentype"),
  url(../../fonts/Montserrat-SemiBold.woff) format('woff'),
  url(../../fonts/Montserrat-SemiBold.ttf) format('truetype'),
  url(../../fonts/Montserrat-SemiBold.otf) format('opentype');
}


@font-face {
  font-family: 'Montserrat-Bold';
  font-style: normal;
  font-weight:bold;
  src: url(../../fonts/Montserrat-Bold.eot);
  src: local('Montserrat-Bold'), local('Montserrat-Bold'),
  url(../../fonts/Montserrat-Bold.eot) format("embedded-opentype"),
  url(../../fonts/Montserrat-Bold.woff) format('woff'),
  url(../../fonts/Montserrat-Bold.ttf) format('truetype'),
  url(../../fonts/Montserrat-Bold.otf) format('opentype');
}

/*===========================================LINE===================================*/

#lineder {
  height: auto;
  min-height:8px;
  width: 100%  ;
  position: absolute;
  overflow: hidden;
  z-index:9999;
  border:0px dashed #E6E6E6;
  background-color: var(--color-yellow-01);
   }
#lineder:before{
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: 200px;
  height: 8px;
  background-color: var(--color-red-03);
  animation: linneder 2s linear infinite;
}

@keyframes linneder {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}


/*=================================================BAR========================================*/


#text_show{
font-family: 'Montserrat-SemiBold';
text-align:center;
font-size:14px;
color:#0000CC;
}


#loadReg{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
background:rgba(0,0,0,0.80);
z-index:999999999;
display:none;
}



#loader {
  height: auto;
  min-height:150px;
  width: 100%  ;
  position: relative;
  overflow: hidden;
  z-index:9999;
  border:0px dashed #E6E6E6;
   }
#loader:before{
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: 200px;
  height: 4px;
  background-color: #FFCC00;
  animation: loadder 2s linear infinite;
}

@keyframes loadder {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}


#loader .signal {
  position: absolute;
  top: 50%;
  left: 40%;
}
#loader .signal-bar {
  display: inline-block;
  width: 6px;
  height: 35px;
  margin-right:2px;
  border-radius: 4px;
  animation: fulsate 1s ease-in-out infinite;
}
#loader .signal-bar:nth-child(1) {
  background-color: #3498db;
  animation-delay: 0;
}
#loader .signal-bar:nth-child(2) {
  background-color: #c0392b;
  animation-delay: 0.09s;
}
#loader .signal-bar:nth-child(3) {
  background-color: #f1c40f;
  animation-delay: .18s;
}
#loader .signal-bar:nth-child(4) {
  background-color: #27ae60;
  animation-delay: .27s;
}
#loader .signal-bar:nth-child(5) {
  background-color: #088edc;;
  animation-delay: .36s;
}
#loader .signal-bar:nth-child(6) {
  background-color: #800080;
  animation-delay: .45s;
}
#loader .signal-bar:nth-child(7) {
  background-color: #660000;
  animation-delay: .54s;
}
#loader .signal-bar:nth-child(8) {
  background-color: #FFCC00;
  animation-delay: .63s;
}
#loader .signal-bar:nth-child(9) {
  background-color: #FF0000;
  animation-delay: .72s;
}
#loader .signal-bar:nth-child(10) {
  background-color: #0000FF;
  animation-delay: .81s;
}

@keyframes fulsate {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1, 2.2);
  }
  40% {
    transform: scale(1);
  }
}

/*---------------------------------------------*/
.loader-cont {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    position: absolute;
}

.bouncing-dots {
    display: flex;
    justify-content: space-between;
    width: 250px; /* Adjusted width to fit 10 dots */
}

.dot {
    width: 15px;
    height: 15px;
    background-color: #FF5C35;
    border-radius: 50%;
    animation: bounce 1.5s infinite;
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.1s; }
.dot:nth-child(3) { animation-delay: 0.2s; }
.dot:nth-child(4) { animation-delay: 0.3s; }
.dot:nth-child(5) { animation-delay: 0.4s; }
.dot:nth-child(6) { animation-delay: 0.5s; }
.dot:nth-child(7) { animation-delay: 0.6s; }
.dot:nth-child(8) { animation-delay: 0.7s; }
.dot:nth-child(9) { animation-delay: 0.8s; }
.dot:nth-child(10) { animation-delay: 0.9s; }

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
}

/*---------------------------------------------*/



a{
  color: var(--color-biru3);
}
a:hover {
  color: var(--color-hijau-01);
  
  
}


p:not(:last-child) {
margin-bottom: 30px;
}

p + p {
margin-top: 30px;
}


button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
}

.img-res {
    max-width: 80%; 
    height: auto;
   display: inline;
   margin: 0 auto;
  

}

.img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

.img-nusa {
 width: 100%;
 height:auto;
  object-fit: cover;
  display: block; 
  justify-content: center;
  align-items: center;
  filter: sepia(0%);
}

.img-nusa:hover{
  filter: sepia(80%);
}


.img-exp {
 width: 100%;
 height:auto;
  object-fit: cover;
  display: block; 
  justify-content: center;
  align-items: center;
}



.more_link {
  display: inherit;
  color: var(--color-hijau);
}
.more_link:hover {
  color: var(--color-hijau-03);
  text-decoration: none;
}

/*----------------------------BG---------------------------------------------*/

.bg1{
background-color:var(--color-biru1);
	}

.bg2{
background-color: var(--color-white);
	}


/*-----------------------------COLOR--------------------------------------------*/

    .cl1{
	color: var(--color-black-1);
	}
	
	.cl2{
	color: var(--color-red-04);
	}
	
	.cl3{
	color:var(--color-biru1);
	}
	
	.cl4{
	color: var(--color-biru2);
	}
	
	.cl5{
	color: var(--color-white);
	}
	
	.cl6{
	color: var(--color-black-5);
	}
	
	.cl7{
	color: var(--color-biru3);
	}
	
	.cl8{
	color: var(--color-biru4);
	}
	
	.cl9{
	color: var(--color-red-06);
	}
	
	.cl11{
	color: var(--color-hijau);
	}

    .cl12{
	color: var(--color-black-5);
	}
	
   .cl13{
	color: var(--color-hijau-op04);
	}
	
	.cl14{
	color: var(--color-yellow-00);
	}
	
	.cl15{
	color: var(--color-red-05);
	}
	
	.cl16{
	color: var(--color-biru-05);
	}
	
	.cl17{
	color: var(--color-red-07);
	}
	
	.cl18{
	color: var(--color-biru-06);
	}
	
/*-------------------------------------------------------------------------*/
	
	.ts01{
	text-shadow: 0 0 3px rgba(0,0,0,.5);
	}
	
	.ts02{
	text-shadow: 0 0 3px var(--color-biru-tua);  
	}
/*-------------------------------------------------------------------------*/
	.rbl{
	font-family: 'Roboto-Light';
	}
	
	 .rbr{
	font-family: 'Roboto-Regular';
	}
	
	 .rbs{
	font-family: 'Roboto-Medium';
	}
		
	.rbb{
	font-family: 'Roboto-Bold';
	}
	
	
	
	.ffl{
	font-family: 'Montserrat-Light';
	}
	
	.ffr{
	font-family: 'Montserrat-regular';
	}
	
	 .ffs{
	font-family: 'Montserrat-SemiBold';
	}
		
	.ffb{
	font-family: 'Montserrat-Bold';
	}
	
/*-------------------------------------------------------------------------*/
.cursor{
cursor:pointer;
}

.crs{
cursor:pointer;
}

.tolipp{
cursor:pointer;
position: relative;
display: inline-block;
}
.tolipp .tolip-teks {
    visibility: hidden;
    width: 120px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    }
.tolipp:hover .tolipp-teks {
visibility: visible;
}

/*-------------------------------------------------------------------------*/
.rad00a{
    -moz-border-radius: 0.5em 0.5em 0 0;
	-webkit-border-radius: 0.5em 0.5em 0 0;
	-webkit-appearance: 0.5em 0.5em 0 0;
	border-radius: 0.5em 0.5em 0 0;
}

.rad00x{
    -moz-border-radius: 0.5em 0 0.5em 0;
	-webkit-border-radius: 0.5em 0 0.5em 0;
	-webkit-appearance: 0.5em 0 0.5em 0;
	border-radius: 0.5em 0 0.5em 0;
}


.rad10{
    -moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	-webkit-appearance: 1em;
	border-radius: 1em; 
}

.rad10t{
  -moz-border-radius: 1em 1em 0em 0em; 
	-webkit-border-radius: 1em 1em 0em 0em; 
	-webkit-appearance: 1em 1em 0em 0em; 
	border-radius: 1em 1em 0em 0em; 
}

.rad10b{
  -moz-border-radius: 0em 0em 1em 1em;
	-webkit-border-radius: 0em 0em 1em 1em;
	-webkit-appearance: 0em 0em 1em 1em;
	border-radius: 0em 0em 1em 1em; 
}

.rad10l{
  -moz-border-radius: 1em 0em 0em 1em;
	-webkit-border-radius: 1em 0em 0em 1em;
	-webkit-appearance: 1em 0em 0em 1em;
	border-radius: 1em 0em 0em 1em; 
}

.rad10r{
  -moz-border-radius: 0em 1em 1em 0em;
	-webkit-border-radius:0em 1em 1em 0em;
	-webkit-appearance: 0em 1em 1em 0em;
	border-radius: 0em 1em 1em 0em;
}

/*-------------------------------------------------------------------------*/
.rad00{
    -moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-webkit-appearance: 0.5em;
	border-radius: 0.5em;
}


.rad01{
    -moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	-webkit-appearance: 1em;
	border-radius: 1em; 
}


.rad02{
    -moz-border-radius: 2em;
	-webkit-border-radius: 2em;
	-webkit-appearance: 2em;
	border-radius: 2em; 
}

.rad03{
    -moz-border-radius: 0em 0em 3em 3em;
	-webkit-border-radius: 0em 0em 3em 3em;
	-webkit-appearance: 0em 0em 3em 3em;
	border-radius: 0em 0em 3em 3em; 
}
.rad04{
    -moz-border-radius: 3em 0em 0em 0em;
	-webkit-border-radius: 3em 0em 0em 0em;
	-webkit-appearance: 3em 0em 0em 0em;
	border-radius: 3em 0em 0em 0em;
}

.rad05{
  -moz-border-radius: 1em 1em 0em 0em; 
	-webkit-border-radius: 1em 1em 0em 0em; 
	-webkit-appearance: 1em 1em 0em 0em; 
	border-radius: 1em 1em 0em 0em; 
}

.rad06{
    -moz-border-radius: 2em 0em 2em 2em ; 
	-webkit-border-radius: 2em 0em 2em 2em ; 
	-webkit-appearance: 2em 0em 2em 2em ; 
	border-radius: 2em 0em 2em 2em ; 
}

.rad07{
    -moz-border-radius: 0em 2.5em 1em 1em;
	-webkit-border-radius: 0em 2.5em 1em 1em;
	-webkit-appearance: 0em 2.5em 1em 1em;
	border-radius: 0em 2.5em 1em 1em;
}

.rad08{
  -moz-border-radius: 1em 1em 0em 0em; 
	-webkit-border-radius: 1em 1em 0em 0em; 
	-webkit-appearance: 1em 1em 0em 0em; 
	border-radius: 1em 0em 0em 1em; 
}

.rad09{
    -moz-border-radius: 2em 0em 0em 2em;
	-webkit-border-radius: 2em 0em 0em 2em;
	-webkit-appearance: 2em 0em 0em 2em;
	border-radius: 2em 0em 0em 2em;
}

.rad11{
     -moz-border-radius:1em 1em 0em 2em; 
	-webkit-border-radius: 1em 1em 0em 2em; 
	-webkit-appearance: 1em 1em 0em 2em; 
	border-radius: 1em 1em 0em 2em; 
}

/*-------------------------------------------------------------------------*/
 .td1.focus, 
 .td1:active:focus, 
 .td1:active:hover, 
 .td1:focus, 
 .td1:hover {
  outline: 0;
  text-decoration:none;
}
/*-------------------------------------------------------------------------*/

   
/*-------------------------------------------------------------------------*/

.fss{

    text-align:left;
	margin-left:50px;
	border:0px dashed #ff0000;

	
}
.fss ul  {
    margin: 0px 0 0px 0; 
	border:0px dashed #ff0000;


}
.fss li  {
	list-style-image:url(../img/bulletC.png);
	padding:0px 0px 0px 5px;
	border:0px dashed #ff0000;
	text-align:justify;

	}

.fss ul ul  { 
    text-align:left;
	margin-left:80px;
	padding:0px 0px 0px 10px;
	border:0px dashed #ff0000; 
	}

.fss ul ul li  {
	text-align:left;
	margin-left:50px;
	padding:0px 0px 0px 5px;
	border:0px dashed #ff0000;
	list-style-image:url(../img/icon_tag.png);
}

/*-------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------*/

.ms{

    text-align:left;
	margin-left:0px;
	border:0px dashed #ff0000;

	
}
.ms ul  {
    margin: 0px 0 0px 0; 
	border:0px dashed #ff0000;


}
.ms li  {
	list-style-image:none;
	padding:10px;
	border-bottom:1px solid rgba(199,199,199,0.8);
	text-align:justify;
	cursor:pointer;

	}

.ms li:hover  {
   background:#f0f5fd; 
	}

/*-------------------------------------------------------------------------*/
.bread{
    text-align:left;
	margin-left:0;
	border:0px dashed #ff0000;
	padding:0;

	
}

.bread-item li  {
	padding:0px 5px 0px 0px;
	border:0px dashed #ff0000;
	display: inline-block;

	}
	
.bread-item a  {
	padding:0px 5px 0px 0px;
	border:0px dashed #ff0000;
	display: inline-block;
	color: var(--color-hijau02);

	}

.bread-item a:hover  {
   text-decoration: underline;
   color: var(--color-biru3);
 
	}
	
.bread-item.active {
  color: var(--color-black-5);
  text-decoration:none;
}


/*-------------------------------------------------------------------------*/



.tbl{

    text-align:left;
	margin-left:0px;
	border:0px dashed #ff0000;

	
}
.tbl ul  {
    margin: 0; 
	border:0px dashed #ff0000;


}
.tbl li  {
	list-style-image:url(../img/bulletC.png);
	padding:0px 0px 0px 5px;
	border:0px dashed #ff0000;

	}

.tbl li:hover  {
   background:#f0f5fd; 
	}

/*-------------------------------------------------------------------------*/

ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
ol li {
  counter-increment: my-awesome-counter;
/*list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
list-style-type: kannada;
decimal-leading-zero*/
}
ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: #666666;
  font-weight: normal;
  
}

/*-------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------*/
	
#lingA{
   border: 1px solid rgba(255,204,41,1.00);
   padding: 2px;
    -moz-border-radius: 99em;
	-webkit-border-radius: 99em;
	-webkit-appearance: none;
	border-radius: 99em; 

   behavior: url(PIE.htc);
   position: relative;
   z-index:999;
}



/*-------------------------------------------------------------------------*/

    img.lazy {
     
        display: block;
        
        /* optional way, set loading as background */
        background-image: url('img/loadB.gif') 50% 50% no-repeat rgb(249,249,249);
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }
                  


  


/*
section{
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
  z-index:999;
}
section .air{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background:url(../gambar/wave.png);
  background-size: 1000px 100px
}
section .air.air1{
  animation: wave 30s linear infinite;
  z-index: 1000;
  opacity: 1;
  animation-delay: 0s;
  bottom: 0;
}
section .air.air2{
  animation: wave2 15s linear infinite;
  z-index: 999;
  opacity: 0.5;
  animation-delay: -5s;
  bottom: 10px;
}
section .air.air3{
  animation: wave 30s linear infinite;
  z-index: 998;
  opacity: 0.2;
  animation-delay: -2s;
  bottom: 15px;
}
section .air.air4{
  animation: wave2 5s linear infinite;
  z-index: 997;
  opacity: 0.7;
  animation-delay: -5s;
  bottom: 20px;
}
@keyframes wave{
  0%{
    background-position-x: 0px; 
  }
  100%{
    background-position-x: 1000px; 
  }
}
@keyframes wave2{
  0%{
    background-position-x: 0px; 
  }
  100%{
    background-position-x: -1000px; 
  }
}

*/