.space{
    height:50px;
}
@font-face {
  font-family: neo;
  src: url(neosans-medium-webfont.ttf);
}
.section_about h1{

  font-size: 3.5em!important;
  font-weight: 400;
  font-family: Inter;
}
.section_about ul,
.section_about ol{
  padding: 20px 10px;
}
.section_about ol,
.section_about li{
  list-style-type: decimal!important ;
}

.section_about ul li,
.section_about ol li{
  font-weight: 400;
  font-size: 1.6em;
  line-height: 25px;;
  padding-bottom: 20px;;
}

.section_about{
  margin: auto;;
  max-width: 60%;;
}
.clearfix{
  border-bottom: 1px solid rgb(236, 236, 236);
}
.face span{
  
  border-bottom: 2px solid #247EB9 ;
}
.face p {font-weight: 300!important}

.section_about li a,
.blog-content a{
  color: black!important;
  text-transform: capitalize;
  border-bottom: 2px solid #247EB9 ;
}
.section_about li a:hover,
.blog-content a:hover{
  color: black!important;
  border-bottom: 2px solid #000000 ;
}
.softbox{
  border-radius: 10px;
  font-size: 2em;
padding: 20px;
background: #f0f0f0;
box-shadow:  20px 20px 39px #d9d9d9, 
             -20px -20px 39px #ffffff;

}
.flex-container{
  display: flex;
  flex-shrink: initial;
  flex-wrap: wrap; 
  flex-direction: row;   
  justify-content: stretch;
  
}
.category_main{
  width: 200px!important;

}

.box{
  flex-grow: 1;
align-items: stretch;
padding: 20px;;
  margin: 10px;;
  height: 100px;
  background-color: white;
  display: flex;
  border-radius: 10px;
  align-items: center;
  align-content: center;
  justify-content: space-around;
  box-shadow:  20px 20px 60px #cccccc, 
             -20px -20px 60px #ffffff;
}
.box .cat_name,
.box .cat_posts{
  font-size: 1.5em;
}
.box .cat_posts{
  margin-left: 20px; ;
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;;
  border-radius: 50%;
  background-color: grey;
  

}
.box .cat_name a{
  color: black;
}
.box a{
  color:white;
  display: block;
  border-radius: 50%;
  width: 100%;
}
#player{
  width: 100%;
}
@media only screen and (max-width: 1200px) {

  .clearfix{
    display: none;
  }
  .main-heading{
    width: 100%!important;
  }
  .thumbnail{
  width: 50%!important;
  margin : auto;
}


}
@media only screen and (max-width: 800px) {
  .section_about{
    max-width: 80%;;
  }
  .blog-content{
    padding: 20px;;

  }
  .thumbnail{
  width: 100%!important;
  margin : auto;
}
 
  .about h1,
  .about p{
    text-align: center!important;
  }

.card__content .cat_link{
  background-color: rgb(197, 197, 197);
}
 


}

.post-card .cat_link{
  text-decoration: none!important;
  color: black;
  border-radius: 2px;;
  background-color: rgb(197, 197, 197);
  padding: .7em;
  display: inline-block;
  margin-bottom: 5px;;
}


.blog_head h1{
  
  text-align: center;
  font-size: 2.5rem;
  font-family: Inter;
  font-weight: 700;
  

}
.blog_head h5{
  font-size: 1.2em;
  padding: 10px;
  text-align: center;
}

.blog-content{
 margin: auto;
  max-width: 700px;
  position: relative;
}
.blog-content img{

  width: 100%!important;
  height: 100%;
} 
.blog-content p,
.blog-content ul,
.blog-content ol,
.main-heading p,
.blog-content blockquote {
  font-family: Inter;
  color: #111;
  font-size: 1.7em;
  line-height: 1.8em;
  margin-bottom: 1.5em; 
}



.blog-content h2{
  font-family: Inter;
  color: #111;
  font-size: 3em;
  font-weight: 500;
  margin-bottom: 20px;;
}

.blog-content figure{
  margin-top: 20px;
  margin-bottom: 20px;

  width: 100%;
} 
.blog-content blockquote{
  display: block;
  border-radius: 2px;
  border: 2px solid #2685c5;
  padding:10px;
  font-weight: 700;
  font-style: italic!important;
  text-align: center;
}
.blog-content cite{
  font-size: 1.8em;
  font-weight: 500;
  font-style: normal!important;
}
.blog-content blockquote::before{
  content: '';
  position: absolute;
  top: 0px;;
  
}
/* Progress CSS */

.line {
  background: #038eff;
  height: 5px;
  border-radius: 3px;
  width: 0%;
  position: fixed;
  top: 0;
  z-index: 45545454;
}
.blog_head h3{
  margin: auto;
  text-align: center;
}

.blog_head h3 a{
  background-color: grey;;
  color: white;
  font-size: 1.5em;
  font-weight: 500;
  text-decoration: none;
  padding: 15px;
  display: inline-block;
  border-radius: 2px;
  margin-bottom: 20px!important;

}
.blog_head h3 a:hover{

  background-color: #247EB9;
}
.main-heading *{
  text-align: center;
}
.main-heading{
  width:35%;
}
.main-heading h1{
  font-weight: 600;
font-size: 3em;
margin-bottom: 15px;;
  
}
.main-heading h2{
  margin: auto;
  font-size: 2.3em;
  font-weight: 400;
  line-height: 35px;;
  
}
.main-heading p {
  
  margin: auto;
  font-family: Inter;
  color: #111;
  font-size: 2em;
 
  font-weight: 300;
  line-height: 1.5em;;
  margin-top: 10px; 
}


.index-header{

  text-align: center;
  width: 100%;;
  font-size: 1.3em;
  margin-bottom: .5em;
  font-weight: 600;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.07em;

}
.divi{
  max-width: 30%;
  background-color: rgb(4, 121, 189);
  height: 2px;;
  margin: auto;
  margin-bottom: 1.0em;
}

.blog-content h3{
    
    font-size: 2rem!important;
        }

.blog-content h2{
    
    font-size: 2.5rem!important;
        }

.blog-content h1{
            
            font-size: 3rem!important;
}
        
.blog-content h1, 
.blog-content h2,
.blog-content h3{

    padding: 0px 0px 20px 0px!important;
    margin: 0px!important;
}    


.blog-content ol{
    list-style: decimal;
    margin:0px;
    font-size: 1.7em;
    line-height: 1.8em;
    padding: 10px 0px 10px 50px;
    
}
.blog-content ol li ol{
  list-style-type: lower-alpha!important;
  padding: 0px 0px 20px 0px;
}
.blog-content ol ol ol {
  list-style-type: lower-roman!important;
  padding: 0px 0px 20px 0px;
}


.blog-content ol > li {
  margin: 0;
  padding: 0 0 0 .8em;
  text-indent: 0em;
}




.blog-content ul{
  list-style:disc;
  font-size: 1.7em ;
  padding: 10px 0px 10px 3em;
  counter-reset: item;
}



.blog-content li ul{
  list-style:circle!important;
  padding: 0px 0px 10px 2em;
  font-size: 1.7rem!important;
  margin-bottom: 0px!important;
  
}
.blog-content li ol{
  list-style:georgian ;
  padding: 0px 0px 10px 2em;
  font-size: 1.7rem!important;
  
}
.blog-content ul ul ul,
.blog-content ol ul{
  list-style:square!important;
}


ul li::marker ,
ol li::marker {
  font-weight: 700;
}

.red{
  color: red;
}
.green{
  color: green;
}
.blue{
  color: blue;
}

.blog-content strong{
    font-weight:700!important;
}



.thumbnail{
  width: 50%;
  margin : auto;
}