
@charset "utf-8";
/* CSS Document */

:root {
  --color-black: hsl(0, 0%, 10%);
  --color-white: hsl(0, 0%, 100%);
  --color-darken: hsl(0, 0%, 20%);
  --color-pink-100: hsl(336, 95%, 94%);
  --color-pink-200: hsl(338, 91%, 87%);
  --color-pink-300: hsl(339, 90%, 81%);
  --color-pink-400: hsl(339, 88%, 74%);
  --color-pink-500: hsl(339, 82%, 67%);
  --color-pink-600: hsl(339, 76%, 59%);
  --color-pink-700: rgba(223, 38, 43, 1);
  --color-pink-800: hsl(339, 68%, 45%);
  --color-pink-900: hsl(339, 69%, 38%);
  --color-biru-tua: rgba(18, 76, 126, 1);
  --color-merah-tua: rgba(223, 38, 43, 1);
  --color-kuning-tua: rgba(238, 120, 32, 1);
  
  
  --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);
}


@font-face {
  font-family: 'avgardn';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/avgardn.eot);
  src: local('avgardn'), local('avgardn'),
  url(../fonts/avgardn.eot) format('embedded-opentype'),
  url(../fonts/avgardn.woff) format('woff'),
  url(../fonts/avgardn.ttf) format('truetype'),
  url(../fonts/avgardn.otf) format('opentype');
  
}
	
	
	
@font-face {
  font-family: 'tt0140m_';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/tt0140m_.eot);
  src: local('tt0140m_'), local('tt0140m_'),
  url(../fonts/tt0140m_.eot) format('embedded-opentype'),
  url(../fonts/tt0140m_.woff) format('woff'),
  url(../fonts/tt0140m_.ttf) format('truetype'),
  url(../fonts/tt0140m_.otf) format('opentype');
}


@font-face {
  font-family: 'pixstar';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/pixstar.eot);
  src: local('pixstar'), local('pixstar'),
  url(../fonts/pixstar.eot) format("embedded-opentype"),
  url(../fonts/pixstar.woff) format('woff'),
  url(../fonts/pixstar.ttf) format('truetype'),
  url(../fonts/pixstar.otf) format('opentype');
}

@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-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;
  ont-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');
}

button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
}

.img-res {
    max-width: 50%; 
    height: auto;
   display: inline;
   margin: 0 auto;
  

}

img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

h1{
border:0px dashed #FF0000;
line-height:25px;
}

h2{
border:0px dashed #FF0000;
line-height:25px;
}

h3{
border:0px dashed #FF0000;
line-height:25px;
}

h4{
border:0px dashed #FF0000;
line-height:25px;
}

h5{
border:0px dashed #FF0000;
line-height:25px;
}

.bg1{
     background-color:#016087;
	}



/*-------------------------------------------------------------------------*/

    .cl1{
	color: #666666;
	}
	
	.cl2{
	color: #ffffff;
	}
	
	.cl3{
	color:rgba(196,53,55,1.00);
	}
	
	.cl4{
	color: #0099CC;
	}
	
	.cl5{
	color: #e72d2d;
	}
	
	.cl6{
	color: #0387b3;
	}
	
/*-------------------------------------------------------------------------*/
	.ffl{
	font-family: 'Montserrat-Light';
	}
	
	 .ffs{
	font-family: 'Montserrat-SemiBold';
	}
		
	.ffb{
	font-family: 'Montserrat-Bold';
	}
	
/*-------------------------------------------------------------------------*/


/*-------------------------------------------------------------------------*/
 .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; 
	}

/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/

.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;*/
}
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; 
  }
}

*/