/*--------------------------------------------------------------
# Loader-Blog
--------------------------------------------------------------*/
*, *:before, *:after {
   box-sizing: border-box;
   outline: none;
}
.loader-blog {
   position: relative;
   display: grid;
   grid-template-columns: 33% 33% 33%;
   grid-gap: 2px;
   width: 100px;
   height: 100px;
}
.loader-blog > div {
   position: relative;
   width: 100%;
   height: 100%;
   background: tomato;
   transform: scale(0);
   transform-origin: center center;
   animation: loader 2s infinite linear;
}
 .loader-blog > div:nth-of-type(1), .loader-blog > div:nth-of-type(5), .loader-blog > div:nth-of-type(9) {
   animation-delay: 0.4s;
}
 .loader-blog > div:nth-of-type(4), .loader-blog > div:nth-of-type(8) {
   animation-delay: 0.2s;
}
 .loader-blog > div:nth-of-type(2), .loader-blog > div:nth-of-type(6) {
   animation-delay: 0.6s;
}
 .loader-blog > div:nth-of-type(3) {
   animation-delay: 0.8s;
}
 @keyframes loader {
   0% {
     transform: scale(0);
  }
   40% {
     transform: scale(1);
  }
   80% {
     transform: scale(1);
  }
   100% {
     transform: scale(0);
  }
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 40px 0;
  overflow: hidden;
}

.bgsection{
  background-color: #E9E9E9;
}

.page-link {
  color: #661E1E;
  background-color:#FFF;
} 
.page-link:hover{
  color: #962323;
  background-color:#E0E0E0;
} 
.page-item.active .page-link {
  color: #fff;
  background-color: #661E1E;
  border-color: #962323;
} 
.cardcustom .card{
  width: 100%;
  background: #D9D9D9;
}
.cardcustom .card:hover{
  background-color:#661E1E;
  cursor: pointer;
  color: #fff;
  
}
.cardcustom .card:active{
  background-color:#661E1E;
  cursor: pointer;
  color: #fff;
  
}
.linkterbaru{
  color: #661E1E;
  display: block;
  margin: 5px; 
  font-size: 17px;
  font-weight: bold;
}
.linkterbaru:hover{
  color: #962323;
  text-decoration: none;
  margin: 5px; 
  font-size: 17px;
  font-weight: bold;
}
.card-img{
  border-radius: 0;
  max-height: 170px;
}
.btntotop {
  position: fixed;
  display: none;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
}

.btnwa {
  position: fixed;
  display: none;
  right: 15px;
  bottom: 105px;

  z-index: 99999;
  font-size: 45px;
  padding:0;
  outline: none;
  color: #A20000;
}
.btnwa:hover {
  color: #C72828;
}
.btnwa:focus,.btnwa:active {
  outline: none;
}
.btnig {
  position: fixed;
  display: none;
  right: 15px;  
  bottom: 55px;
  z-index: 99999;
  font-size: 45px;
  padding:0;
  outline: none;
  color: #A600B5;
}
.btnig:hover {
  color: #D165DB;
}
.btnig:focus,.btnig:active {
  outline: none;
}
a {
  outline : none!important;
  -moz-outline-style: none!important;
}
a:focus, a:active {
    outline: none!important;
    -moz-outline-style: none!important;
}

.footer {
  background: url("./img/about.jpg") center center no-repeat;
  color: #fff;
  font-size: 14px;
  position: relative;
  background-size: cover;
}
.footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1;
}
.footerheader{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px 0;
}
/*.footeremail{
  background-color: #fff;
  border-radius: 20px;
  width: auto;
  margin:0 20px;
  padding: 0;
}
.footeremail input[type="email"]{
  border: 0;
  padding: 10px 10px;
  width: calc(100% - 150px);
  border-radius: 20px;
}
.footeremail input[type="email"]:focus{
  outline: 0;
}
.footeremail input[type="button"]{
  border: 0;
  padding: 10px 10px;
  width: 150px;
  border-radius: 20px;

  background-color: #BA0000;
  color:#fff;
  line-height: 35px;
}
.footeremail input[type="button"]:focus,.footeremail input[type="button"]:hover{
  outline: 0;
  background-color:#BA0000; 
}*/
.footeremail{
  background-color: rgba(0,0,0,0);
  border-radius: 20px;
  width: auto;
  margin:0 20px;
  padding: 0;
  border:2px solid #BA0000;
}
.footeremail input[type="email"]{
  border:0;
  padding: 10px 10px;
  width: calc(100% - 150px);
  border-radius: 20px;
  background-color: rgba(0,0,0,0);
  color: #FFFFFF;

}
.footeremail input[type="email"]::placeholder{

  color: #CDCDCD;
  opacity: 1;
}
.footeremail input[type="email"]:-ms-input-placeholder{

  color: #CDCDCD;

}
.footeremail input[type="email"]::-ms-input-placeholder{

  color: #CDCDCD;

}
.footeremail input[type="email"]:focus{
  outline: 0;
}
.footeremail input[type="button"]{
  border: 1px solid #E10000;
  padding: 10px 10px;
  width: 150px;
  border-radius: 20px 16px 16px 20px;
  -webkit-transition: background-color 0.6s ease-out!important;
  -moz-transition: background-color 0.6s ease-out!important;
  -o-transition: background-color 0.6s ease-out!important;
  transition: background-color 0.6s ease-out!important;

  background-color: #E10000;
  color:#fff;
  line-height: 35px;
}
.footeremail input[type="button"]:focus,.footeremail input[type="button"]:hover{
  outline: 0;
  background-color:#E76868; 
}

.sosial{
  color: #E10000; 
  font-size: 25px;
  margin:5px;  
  /*-webkit-transition: color 0.6s ease-out!important;
  -moz-transition: color 0.6s ease-out!important;
  -o-transition: color 0.6s ease-out!important;
  transition: color 0.6s ease-out!important;*/
}
.sosial:hover{
  color: #FFFFFF!important; 
}

.nav-pills .nav-link, .nav-pills .nav-link {
     
  color: #545b62;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  background-color: #545b62;
  color: #FFFFFF;
}
.footeremail input:-webkit-autofill,
.footeremail input:-webkit-autofill:hover, 
.footeremail input:-webkit-autofill:focus{
  border: none;
  -webkit-text-fill-color: #CCCCCC;
  /*-webkit-box-shadow: 0 0 0px 1000px #000 inset;*/
  transition: background-color 5000s ease-in-out 0s;
}