.header-blue {
    background-color  : #9DC3E6;
    padding-bottom    : 0px;
    margin-bottom     : 0px;
    font-family       : 'Source Sans Pro', sans-serif;
    color             : #000;
}

@media (min-width:768px) {
    .header-blue {
        padding-bottom: 10px;
    }
}

.header-bluesky {
    background-color  : #9DC3E6;
    padding-bottom    : 0px;
    margin-bottom     : 0px;
    font-family       : 'Source Sans Pro', sans-serif;
    color             : #000;
    display           : block;
    text-align        : center;
}

@media (min-width:768px) {
    .header-bluesky {
        padding-bottom: 10px;
    }
}

.header-blue .navbar {
  background 	 : #9DC3E6;
  padding-top 	 : 4rem;
  padding-bottom : 4rem;
  color 		 : #9DC3E6;

}

.header-blue .navbar-dark {
  color 		 : #9DC3E6;
}

@media (min-width:768px) {
  .header-blue .navbar {
    padding-top     : 2.2rem;
    padding-bottom  : 2.2rem;
  }
}

.navbar-brand{
    vertical-align  : top;
    text-align      : center;
	position        : absolute;
    margin-top      : -120px;
}

@media (max-width:768px) {
    .navbar-brand{
       text-align       : left;
	   position         : absolute;
       padding-left     : 0px;
       padding-right    : 40px;
       margin-top       : -80px;
    }
}

.img-fluid{
	width      : 60%; 
	height     : auto;
}

@media (max-width:768px) {
  .img-fluid{
       width          : 60%; 
	   height         : auto;
	   text-align     : left;
	   padding-bottom : 0px;
	   padding-left   : 0px;
    }
}

.img-jancoek{
	width      : 90%; 
	height     : 90%;
}

@media (max-width:768px) {
  .img-jancoek{
       width          : auto; 
	   height         : 50%;
	   text-align     : left;
	   padding-bottom : 0px;
	   padding-left   : 0px;
    }
}

.icon-fluid{
	width      : 20%; 
	height     : auto;
}

@media (max-width:768px) {
  .icon-fluid{
       width          : 60%; 
	   height         : auto;
	   text-align     : center;
	   padding-bottom : 0px;
	   padding-left   : 0px;
    }
}

.img-responsive{
    width          : 100%; 
	height         : auto;
	margin-left    : 40px;
	padding-bottom : 0px;
	padding-left   : 0px;
}


@media (max-width:768px) {
  .img-responsive{
       max-width      : 150%; 
	   height         : auto;
	   text-align     : center;
	   padding-bottom : 0px;
	   padding-left   : 0px;
    }
}

.home-content{
    text-align   : center;
    padding      : 0px;
    margin-left  : 130px;
    margin-top   : 5px;
    margin-right : 10px;
}

.padding-zero{
    padding : 0px;
    margin  : 0px;
}

@media (max-width:768px) {
    .home-content{
        text-align   : center;
        padding      : 20px;
        margin-left  : auto;
        margin-top   : 10px;
        margin-right : auto;
    }
}

.img-responsive2{
    width          : auto; 
	height         : auto;
	margin         : 0px;
    padding        : 10px;
}

@media (min-width:768px) {
  .img-responsive2{
       width          : auto; 
	   height         : auto;
	   margin-left    : 10px;
       padding        : 10px;
    }
}

.img-profile{
	max-width      : 125%;
	height         : auto;
	margin-left    : 0px;
	padding-bottom : 0px;
	padding-left   : 0px;
}

#home-area{
	margin-top     : 0px;
    background     : linear-gradient(180deg, #9DC3E6, #fff);
    padding-top    : 0px;
    padding-bottom : 0px;
}

#home-area2{
	display        : block;
    margin-top     : 0px;
    margin-left    : auto;
    margin-right   : auto;
    background     : #9DC3E6;
    padding-top    : 0px;
    padding-bottom : 0px;
    padding-left   : -20px;
    padding-right  : auto;
}

.container{
    display        : block;
    margin-top     : 0px;
    margin-left    : auto;
    margin-right   : auto;
    margin-bottom  : 0px;
    
}

.bordered{
    border-bottom  : solid 1px #fff;
    
}

.home-feature{
    margin-right    : 60px;
    margin-left     : 0px;
    padding         : -10px;
}

#blog-area{
	margin-top     : 0px;
    background     : #fff;
    padding-top    : 20px;
    padding-bottom : 0px;
}

.tebel{
	font-size      : 22px;
	font-weight    : bold;
}

.tebel2{
	font-size      : 28px;
	font-weight    : bold;
}

.tebal{
	font-size      : 28px;
    color          : #2E75B6;
    font-weight    : bolder;
}

.bangsat{
    font-size      : 22px;
}

@media (max-width:768px) {
    .tebel{
	   font-size      : 18px;
	   font-weight    : bold;
    }
    .tebel2{
	   font-size      : 24px;
	   font-weight    : bold;
    }
}

.header-blue .navbar .navbar-collapse {
  border-bottom     : 1px solid rgba(0,0,0,0.9);
  margin-top        : 1rem;
  color             : #9DC3E6;
  border-color      : #9DC3E6;
  padding-bottom    : 5px;
}

@media (min-width:768px) {
  .header-blue .navbar .navbar-collapse {
    border-color    : #9DC3E6;
    margin-top      : 0.7rem;
    margin-left    : -30px;
    color           : #2E75B6;
  }
}

.navbar-toggler {
  border-color  : #9DC3E6;
  background    : #2E75B6;
  position      : absolute;
  z-index       : 100;
  margin-top    : 10px;
  margin-left   : 80%;
}

.navbar-toggler:hover {
  border-color  : #fff;
  background    : crimson;
}


.navbar-collapse ul{
	color      : #000;
}

.navbar-collapse li{
	color      : #000;
}

.navbar-collapse a{
	color: #000;
}

.navbar-nav {
	color      : #2E75B6;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
    margin-top: 40px;
}

.nav-item {
    color: #2E75B6;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}

.nav-link{
	color: #2E75B6;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
    font-size: 20px;
    font-weight: bolder;
}

@media (min-width: 768px) {
  .header-blue .navbar-nav .nav-link {
    padding-left: .7rem;
    padding-right: .7rem;
	color: #2E75B6;
  }
}

@media (min-width: 992px) {
  .header-blue .navbar-nav .nav-link {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
       color: #2E75B6;
  }
}

.header-blue .navbar-nav .nav-link{
    color 			: #2E75B6;
}

.header-blue .navbar-nav .nav-link:hover {
    padding-left 	: 1.2rem;
    padding-right 	: 1.2rem;
    color 			: #fff;
}

.header-blue .action-button, .header-blue .action-button:not(.disabled):active {
  border        : 1px solid #9DC3E6;;
  border-radius : 40px;
  color         : #000;
  box-shadow    : none;
  text-shadow   : none;
  padding       : .3rem .8rem;
  background    : #9DC3E6;
  transition    : background-color 0.25s;
  outline       : none;
  margin-bottom : 20px;
  font-size 	: 16px;
}

.header-blue .action-button:hover {
  color         : #9DC3E6;
  background    : #fff;
}

.dropdown{
    margin-top: 3px;    
}

.btn-primary{
    border-color: #fff;
    background: crimson;
    color: #fff;
}

.btn-primary:hover{
    border-color: #fff;
    background: fff;
    color: #9DC3E6;
}

.btn-primary:checked{
    border-color: #fff;
    background: #000;
    color: #fff;
}

.tarekmang{
    padding-top: -30pxpx;

}

.centered{
	text-align      : center;
    padding-top     : 0px;

}

@media (max-width: 992px) {
  .centered{
	   text-align   : center;
       padding-top  : 10px;
       padding-left : 15px;
    }
}

.rounded-circle{
    width   : 40%;
    height  : auto;
    float: right;
}

@media (max-width: 768px) {
    .rounded-circle{
        width: 50%;
        height: auto;
        float: none;
    }
}

.grafo{
    min-width: 250px;
	height: 50px;
	white-space: normal;
}

.titleSentence{
    display         : block;
    margin-top      : 20px;
    margin-bottom   : 20px;
    margin-left     : 0px;
}

.titleSentence2{
    display         : block;
    margin-top      : 20px;
    margin-bottom   : 20px;
    margin-left     : -90px;
}

@media (max-width: 768px) {
    .titleSentence2{
        display         : block;
        margin-top      : 20px;
        margin-bottom   : 20px;
        margin-left     : 0px;
    }
}

.kuningtransparanRadius{
    background: transparent;
    padding: 10px;
    padding-top: 90px;
	border-radius: 10px;
}

.borderputih{
    padding: 10px;
	border : 5px solid rgba(255,255,255,1);
	border-radius: 20px;
	border-color: #fff;
	margin-top: 5px;
	margin-bottom: 5px;
}

.kuningtransparan{
    background: #FFFBBE;
    padding: 10px;
}

.hurufKeren{
    font-style: italic;
}

.warnabiru{
    color: darkcyan;
}

.besarDanMerah{
    color: crimson;
    font-size: 26px;
    font-style: italic;
    font-weight: bold;
}

.kecilDanBiru{
    display: block;
    color: dodgerblue;
    font-size: 11px;
    font-style: italic;
}

.document{
    display: block;
    width   : 20%; 
    height  : auto ;
}

@media (max-width: 768px) {
    .document{
    display: block;
    width   : 30%; 
    height  : auto ;
}
    
.redBack{
    background-color: #9DC3E6;
}