/* CSS Document */

body{


}

img { max-width:100%;  }

.wrapper {
  
  padding-top:70px;
  
}

/******************************************
 * nav
 * ***************************************/
.top-line{

    min-height:40px;
    background:#D20000;
    float:left;

    z-index:9998;
    line-height:30px;
    vertical-align:middle;
} 

.top-line .menu li{
    margin-right:5px;
}
.top-line .menu li a {
    padding:0 2px 7px 2px;
  
}
.top-line .menu li, .top-line .menu li a { font-size:90%; color:#fff; text-transform:uppercase; font-weight:bold; }
.top-line .menu li a:hover, .top-line .menu li.current a, .top-line .menu li.active a{ color:#000; text-decoration:underline; }
.top-line .menu ul.menu li:last-child{ margin:0px;}
.top-line .menu ul{ margin:0; padding:0; }

.top-line .menu li.dropdown ul {
  background:#D20000;
}
.top-line .menu li.dropdown ul li {
  padding-left:10px;
}

.navbar-toggler, .navbar-toggler-icon {
  color:#fff;
}

.navbar-brand{
    
    color:#fff;
    
}

.show {
  display:block;
}

.index-content img{
    min-width:100%;
}

/************************
 * leading-items styles
 * **********************/ 
.my-leading-items img{
    max-height: 330px;
    min-height: 330px;
    max-width:100%;
    min-width:100%;
    
}

.my-leading-items {
    position: relative;
    overflow:hidden;
    max-width:100%;
}

.leading-item-details {
  position: absolute;
  bottom: 0;
  color:#fff;
    z-index:3;
    padding:5px 0;
    width:90%;
    margin-left:10px;
}

.leading-item-title {
   font-size:110%;
   font-weight:bold; 
 
}

p.leading-item-title a, p.leading-item-title a:visited {
  color: #fff;
  text-decoration:none;

} 

.my-leading-items::after {
  display: block;
  position: relative;
  margin-top: -250px;
  height: 250px;
  width: 100%;
  content: '';
  background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.leading-item-cat {
    font-size:80%
}

.leading-created-date {
    font-size:60%;
}

@media (max-width: 767px) {

    .index-content .col {
        min-width:100%;
    }
    
    .logo {
      display:none;
    }
    
    h1.article-title {
      font-size: 95% !important;
  } 
    
    
}



/************************************
 * content
 * *********************************/
.content {


  
}


/**********************************
 * side bar
 * *******************************/
.side-bar{

  padding:0;

}

.banneritem img {
  margin-bottom:15px;
  min-width:100%;
  max-width:100%;
}



/*************************************
 * my-intro-item
 * **********************************/
.my-intro-item {
     overflow: hidden;

}

  .my-intro-item .my-intro-item-title {
        font-size: 100%;
        padding:10px;
      
    }
    
    .my-intro-item .my-intro-item-title a, .my-intro-item .my-intro-item-title a:visited {
        color:#000;
        font-weight:bold;
        text-decoration:none;
        line-height:1;

    }
    
    
    .my-intro-item .my-intro-item-text {
        font-size: 80%;
        padding:0 10px 10px 10px ;
        margin-bottom:10px;
    }
    
    .my-intro-item .my-intro-item-text a, .my-intro-item .my-intro-item-text a:visited {
        
        color:#666666;
        text-decoration:none;
    }
    
    .my-intro-item .my-intro-item-text a:hover {
        text-decoration:underline;
    }
    
    .my-intro-item .my-intro-item-date { 
        font-size: 80%;
        color:#666666;
        padding:10px 0px;
        margin:0 20px 15px 20px;
        box-sizing: border-box;
        border-top:1px solid #ddd;
        border-bottom:1px solid #ddd;
    }
    
    .my-intro-item img {
        min-width:100%;
        max-width:100%;
        min-height:200px;
        max-height:200px;
    }
    
    .my-intro-item .my-intro-item-cat {
        font-size: 70%;
        padding:5px;
        margin-left:10px;
        
        color:#fff;
        background:#D20000;
        text-transform:uppercase;
    }

/****************************************************
 * min-width: 768px;
 * *************************************************/
@media (min-width: 768px) {

    .navbar-brand {
        display:none;
    }

    .index-content .my-leading-items {
        margin-right: 5px;
    }
    
    .index-content .my-leading-items:last-child {
        margin-right: 0;
    }
    
    .content {
        
    }
    
    .my-intro-item {
      padding-right:0;
      background: #fff;
      margin-bottom:15px;
    }
    
    .my-intro-item:first-child {
        padding-left:0;
    }
    
    .my-intro-item:nth-child(3n+1) {
        padding-left:0;
     
    }
    
    .my-intro-item img {
        min-width:100%;
        max-width:100%;
        min-height:170px;
        max-height:170px;
    }
    
    

    .my-intro-item .my-intro-item-cat {


    }
    


  .my-intro-item .my-intro-item-title {

    

    }
    
    
  
  
  

}

  /**********************
   * .heading
   * *******************/
  h2.heading{
      text-transform:uppercase;
      color:#000;
      border-bottom:4px #D20000 solid;
      padding-bottom:1px;
      margin-bottom:10px;
      margin-left:-15px;
      z-index:990;
      font-size:18px;
      max-width:258px;
  } 
  
  .heading span{
      background:#D20000;
      color:#fff;
      padding:6px 10px;
  } 
  
  
  /***********************************
   * article css
   * *********************************/
  h1.article-title {
      font-weight: bold;
  } 
  
  .article-first-img img {
      min-width:100%;
      max-width:100%;
      min-height:400px;
      max-height:450px;
  }
  
  .article-text p iframe, .article-text p video {
      min-width:100%;
      max-width:100%;
  }
  
  .article-text {
      font-size: 18px;
      line-height: 1.7em;
      padding-bottom:15px;
      margin-bottom:15px;
      border-bottom:1px solid #ccc;
  }
  
  /*********************************
   * footer
   * *********************************/
  .footer {
      
      border-top:2px solid #ddd;
      padding-top:15px;
      background:#fefefe;
  } 
  
  .footer p {
      margin-bottom:10px;
      padding-bottom:0;
      font-size: 80%;
  }
  
  .footer nav li a, .footer nav li a:visited {
      padding:0 7px 7px 7px;
      font-size:80%;
      color:#212529; 
      border-bottom:1px solid #ccc; 
      text-decoration: none;     
  }
  
  .footer nav li a:hover {

      border-bottom:none;      
  }
  
  .footer nav li.active a {
      border-bottom:2px solid #000;
  }
  
  
  .footer nav {
      margin-bottom:15px;
  }
       
       
 /*******************************
  * ad-page
  * *****************************/
    .ad-page{
      width:100%;
      height:100%;
      min-height:2000px;
      min-width:100%;

      background:#fafafa url("../images/modal-bg.jpg") repeat; 
      padding:0; 
      margin:0;
      position:absolute;
      top:0;
      left:0;
      
      z-index:999999;
      text-align:center;
    }

   
    .ad-page img{ max-width:100%; }
    .ad-page a, .ad-page a:visited{
      color:#888;
      font-family:'Roboto Slab';
    }
    
    
    .ad-page .wrapper{ 
           
      margin:auto;
      position:relative;
      
      max-width:650px;

    }
    
    .ad-page .ad{
      text-align:center;  
      max-width:800px;
      position:relative;
    }
    
    .ad-page .continue{
      text-align:center;
      margin-top:10px;
      width:100%;
      padding:5px 0;
      float:left;
    }
    .ad-page .continue a{
      font-size:28px;
      text-decoration:none;
      font-weight:bolder;
      color:#888;
      font-family:'Roboto Slab';
    }
    
    .ad-page .continue a:hover{
      text-decoration:underline;
    }
    
    .ad-page .logo{
      width:100%;
      text-align:center;
      margin:0px auto 30px auto;
      
    }
    
    .ad-page .logo img{
      width:420px;
      height:135px;
    }