/*
* @author  : Fika Ridaul maulayya
* @package : CSS Custom 
* License  : Free
*/

/* font */
@font-face {
    font-family: "Roboto";
    src: url("../font/roboto/Roboto-Thin.woff2") format("woff2"), url("../font/roboto/Roboto-Thin.woff") format("woff"), url("../font/roboto/Roboto-Thin.html") format("truetype");
    font-weight: 200;
  }
  
  @font-face {
    font-family: "Roboto";
    src: url("../font/roboto/Roboto-Light.woff2") format("woff2"), url("../font/roboto/Roboto-Light.woff") format("woff"), url("../font/roboto/Roboto-Light.html") format("truetype");
    font-weight: 300;
  }
  
  @font-face {
    font-family: "Roboto";
    src: url("../font/roboto/Roboto-Regular.woff2") format("woff2"), url("../font/roboto/Roboto-Regular.woff") format("woff"), url("../font/roboto/Roboto-Regular.html") format("truetype");
    font-weight: 400;
  }
  
  @font-face {
    font-family: "Roboto";
    src: url("../font/roboto/Roboto-Medium.woff2") format("woff2"), url("../font/roboto/Roboto-Medium.woff") format("woff"), url("../font/roboto/Roboto-Medium.html") format("truetype");
    font-weight: 500;
  }
  
  @font-face {
    font-family: "Roboto";
    src: url("../font/roboto/Roboto-Bold.woff2") format("woff2"), url("../font/roboto/Roboto-Bold.woff") format("woff"), url("../font/roboto/Roboto-Bold.html") format("truetype");
    font-weight: 700;
  }
  
  @font-face {
      font-family: "Comforta";
      src: url("../font/comforta/Comfortaa-Light.ttf") format("ttf"), url("../font/comforta/Comfortaa-Light.ttf") format("ttf"), url("../font/comforta/Comfortaa-Light.ttf") format("truetype");
      font-weight: 700;
  }
  
  @font-face {
      font-family: "Comforta";
      src: url("../font/comforta/Comfortaa-Regular.ttf") format("ttf"), url("../font/comforta/Comfortaa-Regular.ttf") format("ttf"), url("../font/comforta/Comfortaa-Regular.ttf") format("truetype");
      font-weight: 700;
  }
  
  @font-face {
      font-family: "Comforta";
      src: url("../font/comforta/Comfortaa-Bold.ttf") format("ttf"), url("../font/comforta/Comfortaa-Bold.ttf") format("ttf"), url("../font/comforta/Comfortaa-Bold.ttf") format("truetype");
      font-weight: 700;
  }
/* end font */  

/* card style */
.card {
    -webkit-box-shadow: rgba(159, 167, 194, 0.6) 0px 1px 1px 0px;
    -moz-box-shadow: rgba(159, 167, 194, 0.6) 0px 1px 1px 0px;
    box-shadow: rgba(159, 167, 194, 0.6) 0px 1px 1px 0px;
}

.card {
  margin-top: 10px;
  box-sizing: border-box;
  border-radius: 2px;
  background-clip: padding-box;
  margin-bottom:20px;
    border-radius: 3px;
}
.card span.card-title {
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    text-transform: uppercase;
}

.card .card-image {
  position: relative;
  overflow: hidden;
}
.card .card-image img {
  border-radius: 2px 2px 0 0;
  background-clip: padding-box;
  position: relative;
  z-index: -1;
}
.card .card-image span.card-title {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 16px;
}
.card .card-content {
  padding: 16px;
  border-radius: 0 0 2px 2px;
  background-clip: padding-box;
  box-sizing: border-box;
  background: #ffffff;
    border-radius: 5px;
}
.card .card-content p {
  /*margin: 0;*/
    margin-bottom: 25px;
    line-height: 36px;
  color: inherit;
}
.card .card-content span.card-title {
  line-height: 48px;
}
.card .card-action {
  border-top: 1px solid rgba(160, 160, 160, 0.2);
  padding: 16px;
  background: #ffffff;
}
.card .card-action a {
  color: #ffab40;
  margin-right: 16px;
  transition: color 0.3s ease;
  text-transform: uppercase;
}
.card .card-action a:hover {
  color: #ffd8a6;
  text-decoration: none;
}

.card-autor {
    border-radius: 5px;
}

.card-img-left {
  border-bottom-left-radius: calc(.25rem - 1px);
  border-top-left-radius: calc(.25rem - 1px);
  float: left;
  padding-right: 1em;
  margin-bottom: -1.25em;
}

.card-hover:hover {
  -moz-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  -moz-box-shadow: 0 8px 6px -6px #323232;
  -webkit-box-shadow: 0 8px 6px -6px #323232;
  box-shadow: 0 8px 6px -6px #323232;
}

.media {
  background-color: #fff;
}

.media-list {
  padding-left: 0;
  list-style: none;
}

/* card style */

/* breadcrum homepage */
.breadcrumb-homepage {
  background-color: #2780e3;
  font-weight: bold;
  color: #fff;
  padding: 8px 15px;
  margin-bottom: 21px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 0;
}
/* end breadcrum homepage */

/* header social */
.ul .header-social {
    margin-top: 40px;
    list-style: none;
    display: inline;
    margin-left: 0 !important;
    padding: 0;
}
/* end header social */

/* divider */
.divider-sekolah {
    width: 40px;
    height: 2px;
    background-color: #fff;
    margin-bottom: 10px;
    margin-top: 10px;
}
/* end divider */

/* header logo */
.header-logo{
    margin-top: 18px;padding-right: 30px;float: left;
}

.carousel-inner img {
    margin: auto;
}

.card-header img {
    width: 150px;
    min-height: 100px;
    max-height: 100px;
}

.carousel-item{
    height: 400px;
}

/* media screen */
  @media screen and (max-width: 480px){
    
        .header-logo {
            /*display: none;*/
            margin-top: 40px;
            text-align: center;
            float: initial;
        }
    
        .header-text {
            /*margin-top: 10px;*/
            text-align: center;
        }

      .breakingNews>.bn-title>h2 {
          display: inline-block;
          margin: 0;
          padding: 0 20px;
          line-height: 40px;
          font-size: 20px;
          color: #FFF;
          height: 40px;
          box-sizing: border-box;
      }
      .footer {
          text-align: center;
      }

      .divider-sekolah {
          width: 100%;
          height: 2px;
          background-color: #fff;
          margin-bottom: 10px;
          margin-top: 10px;
          text-align: center;
      }

      .social-icon{
          margin-bottom: 20px;
      }

      .search-navbar{
          text-align: center;
      }

      .card-header img {
          width: 100%;
          min-height: 220px;
          max-height: 220px;
      }

      .carousel-item{
          height: auto;
      }

      .carousel-control-prev {
          display: none;
      }

      .carousel-control-next{
          display: none;
      }

    }
/* end media screen */

/* footer */
.footer {
    width: 100%;
    padding: 20px 0 55px;
    margin-top: 30px;
    bottom: 0;
    list-style: none;
    color: #fff;
    font-weight: 300;
    font-family: Roboto;
}

.footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 30px;
}

.copyright {
    font-size: 14px;
    margin-bottom: 0;
    color: #fff;
    text-align: center;
    width: 100%;
    padding: 20px 0 10px 0;
}
/* end footer */

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

.breakingNews{width:100%; height:40px; background:#FFF; position:relative; border:solid 2px rgb(66, 109, 25);; overflow:hidden;}
.breakingNews>.bn-title{width:auto; height:40px; display:inline-block; background:rgb(66, 109, 25); position:relative;}
.breakingNews>.bn-title>h2{display:inline-block; margin:0; padding:0 20px; line-height:40px; font-size:20px; color:#FFF; height:40px; box-sizing:border-box;}
.breakingNews>.bn-title>span{width: 0;position:absolute;right:-10px;top:10px;height: 0;border-style: solid;border-width: 10px 0 10px 10px;border-color: transparent transparent transparent rgb(66, 109, 25);}

.breakingNews>ul{padding:0; margin:0; list-style:none; position:absolute; left:210px; top:0; right:40px; height:40px; font-size:16px;}
.breakingNews>ul>li{position:absolute; height:40px; width:100%; line-height:40px; display:none;}
.breakingNews>ul>li>a{text-decoration:none; color:#333; overflow:hidden; display:block; white-space: nowrap;text-overflow: ellipsis; font-weight:normal;}
.breakingNews>ul>li>a>span{color:rgb(66, 109, 25);}
.breakingNews>ul>li>a:hover{color:rgb(66, 109, 25);}

.breakingNews>.bn-navi{width:40px; height:40px; position:absolute; right:0; top:0; opacity:0;}
.breakingNews>.bn-navi>span{width:20px; height:40px; position:absolute; top:0; cursor:pointer; opacity:0.3; background-image:url(../images/bn-arrows.png); background-repeat:no-repeat;}
.breakingNews>.bn-navi>span:hover{opacity:1;}
.breakingNews>.bn-navi>span:first-child{background-position:left center; left:0;}
.breakingNews>.bn-navi>span:last-child{background-position:right center; right:0;}
.breakingNews:hover .bn-navi{opacity:1;}

.bn-large{height:50px;}
.bn-large>.bn-title{height:50px;}
.bn-large>.bn-title>h2{line-height:50px; font-size:26px;}
.bn-large>.bn-title>span{top:15px;}
.bn-large>ul{height:50px; left:250px; font-size:20px;}
.bn-large>ul>li{height:50px; line-height:50px;}
.bn-large>.bn-navi{height:50px; }
.bn-large>.bn-navi>span{height:50px;}

.bn-small{height:30px;}
.bn-small>.bn-title{height:30px;}
.bn-small>.bn-title>h2{line-height:30px; font-size:18px;}
.bn-small>.bn-title>span{top:5px;}
.bn-small>ul{height:30px; left:200px; font-size:14px;}
.bn-small>ul>li{height:30px; line-height:30px;}
.bn-small>.bn-navi{height:30px; }
.bn-small>.bn-navi>span{height:30px;}

/*color styles -----------------------------*/
.bn-red{border-color:#f44a56;}
.bn-red>.bn-title{background:#f44a56;}
.bn-red>.bn-title>span{border-left-color:#f44a56;}
.bn-red>ul>li>a:hover,.bn-red>ul>li>a>span{color:#f44a56;}

.bn-green{border-color:#27ae60;}
.bn-green>.bn-title{background:#27ae60;}
.bn-green>.bn-title>span{border-left-color:#27ae60;}
.bn-green>ul>li>a:hover,.bn-green>ul>li>a>span{color:#27ae60;}

.bn-purple{border-color:#795aac;}
.bn-purple>.bn-title{background:#795aac;}
.bn-purple>.bn-title>span{border-left-color:#795aac;}
.bn-purple>ul>li>a:hover,.bn-purple>ul>li>a>span{color:#795aac;}

.bn-turquoise{border-color:#1fb5ad;}
.bn-turquoise>.bn-title{background:#1fb5ad;}
.bn-turquoise>.bn-title>span{border-left-color:#1fb5ad;}
.bn-turquoise>ul>li>a:hover,.bn-turquoise>ul>li>a>span{color:#1fb5ad;}

.bn-orange{border-color:#f46e27;}
.bn-orange>.bn-title{background:#f46e27;}
.bn-orange>.bn-title>span{border-left-color:#f46e27;}
.bn-orange>ul>li>a:hover,.bn-orange>ul>li>a>span{color:#f46e27;}

.bn-black{border-color:#333;}
.bn-black>.bn-title{background:#333;}
.bn-black>.bn-title>span{border-left-color:#333;}
.bn-black>ul>li>a:hover,.bn-black>ul>li>a>span{color:#333;}

.bn-yellow{border-color:#d3ac23;}
.bn-yellow>.bn-title{background:#d3ac23;}
.bn-yellow>.bn-title>span{border-left-color:#d3ac23;}
.bn-yellow>ul>li>a:hover,.bn-yellow>ul>li>a>span{color:#d3ac23;}

.bn-light{border-color:#DDD;}
.bn-light>.bn-title{background:#DDD;}
.bn-light>.bn-title>h2{color:#333;}
.bn-light>.bn-title>span{border-left-color:#DDD;}
.bn-light>ul>li>a:hover,.bn-light>ul>li>a>span{color:#DDD;}

.bn-pink{border-color:#d65aac;}
.bn-pink>.bn-title{background:#d65aac;}
.bn-pink>.bn-title>span{border-left-color:#d65aac;}
.bn-pink>ul>li>a:hover,.bn-pink>ul>li>a>span{color:#d65aac;}

.bn-darkred{border-color:#d01e1e;}
.bn-darkred>.bn-title{background:#d01e1e;}
.bn-darkred>.bn-title>span{border-left-color:#d01e1e;}
.bn-darkred>ul>li>a:hover,.bn-darkred>ul>li>a>span{color:#d01e1e;}

.bn-bordernone{border:none;}
.bn-italic>ul>li>a{font-style:italic;}
.bn-bold>ul>li>a{font-weight:bold;}

.breakingNews>.bn-navi,
.breakingNews>ul>li>a,
.breakingNews>.bn-navi>span{transition: .25s linear;-moz-transition: .25s linear;-webkit-transition: .25s linear;}
/* end news ticker */

/* jquery tags */
div.tagsinput { border:1px solid #CCC; background: #FFF; padding:5px; width:300px; height:100px; overflow-y: auto;}
div.tagsinput span.tag { border: 1px solid #a5d24a; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cde69c; color: #638421; margin-right: 5px; margin-bottom:5px;font-family: helvetica;  font-size:13px;}
div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px;  }
div.tagsinput input { width:80px; margin:0px; font-family: helvetica; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #000; outline:0px;  margin-right:5px; margin-bottom:5px; }
div.tagsinput div { display:block; float: left; }
.tags_clear { clear: both; width: 100%; height: 0px; }
.not_valid { background: #FBD8DB !important; color: #90111A !important;}