@import url('https://fonts.googleapis.com/css?family=Cairo:400,900&subset=arabic');
@import url('https://www.fontstatic.com/f=cairo-bold');

/* POWERED www.Chakirdev.com */

*{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    direction:rtl;
    text-decoration: none;
    font-family:'cairo-bold', serif;
    text-rendering: optimizeLegibility;
}

body{
    font-family:'cairo-bold', serif;
    text-rendering: optimizeLegibility;
    direction:rtl;
    background-color: #F7F7F7;
}
ul{list-style: none;}
input{border-radius:0px;}
h1{font-family: 'cairo-bold';}
h2{font-family: 'cairo-bold';}
h3{font-family: 'cairo-bold';}
h4{font-family: 'cairo-bold';}

.lft{float:left;}
.rgt{float:right;}
.clr{clear:both;}
.tahoma{font-family: 'tahoma';}
.droid{font-family: 'Droid Arabic Naskh';}
.cairo{ font-family:'cairo-bold', serif;}
.f25{font-size:25px;}
.f20{font-size:20px;}

#HomePage{width:1100px;margin:auto;}

.clearfix2:before, .clearfix2:after {  content: "\0020"; display: block; height: 0; visibility: hidden;    } 
.clearfix2:after { clear: both; }
.clearfix2 { zoom: 1; }

.rightblog{width:770px;margin-right:10px;}
.leftblog{width:300px;margin-right:10px;}
.center {padding: 50px 0;text-align: center;}   
#share-buttons img {
width: 45px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}   
.display-mobile{display: none;}
.display-desk{display: block;}

/* Header */
header{padding-top: 10px;height: 120px;}

.nav-item .nav-link{color:#004080;font-size: 15px;}    
.nav-item .nav-link:hover{color:#2d76bf;}    
.nav-item .nav-link i{font-size: 25px;color:#004080;}    
.navbar {
  padding-top:0px;
  padding-bottom:0px;
}
.navbar .nav-item {
  padding:.5rem .5rem;
  margin:0 .25rem;
}

/* Header */
.mobileNav{width:100%;padding:10px;background:white;}
.iconPart i{margin:15px 10px 0 0;color: #01579B;font-size:20px;}
    
/* OFF-Canavas */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  background-color: #262525;
  overflow-x: hidden;
  transition: 0.2s;
  padding-top: 60px;
}
.sidenav a {
  padding: 8px 32px 8px 8px;
  text-decoration: none;
  font-size: 17px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.sidenav a:hover {
  color: #f1f1f1;
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  left: 10px;
  font-size: 36px;
  margin-right: 50px;
}
#main {
  transition: margin-left .5s;
  padding: 16px;
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}   

/* Head TOP */
.headtop{background:#71BF44;height:40px;}    
.headwidth{width:1000px;margin:auto;} 
.htag{padding:9px;background:#5da036;height:40px;border-left:2px solid #71BF44;} 

.logo{margin-top:20px;margin-right:30px;}    

/* Index */
.bg-home{
background-image: url(../../images/bghome.jpg);
background-position: top top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-size: cover;  
}
.home-title{font-size:30px;border-right:5px solid #004080;padding-right:10px;margin: 20px 0;}   
.blogpost{margin-bottom: 30px;}
.blogpost .card-title{line-height: 35px;}
.blogpost .card-title a{text-decoration: none;color:#262525;}
.blogpost .card-title a:hover{text-decoration: none;color:#3E5252;}
.card-imgcol{width:35%;float: right;}   
.card-imgcol img{width:250px;min-height:190px;}   
.card-contentcol{width:65%;padding:10px;float: right;}   
.card-contentcol .card-text{font-size:12px;color:#868E96;}   

/* Footer */
.footer-right{float: right;width: 30%;} 
.footer-left{float: right;width: 70%;background:#11315E;padding:20px;} 
.footer-left .list-group{float: right;width: 30%;margin:0 10px;} 
.social{margin-top: 30px;}
.social a img{width: 42px;}
.copy{color: #3E5252;margin-top:20px;font-size: 12px}
.list-group .list-group-item {background: none;color:#E8E8E8;font-size: 14px;}
/* Footer */

@media screen and (min-width: 200px) and (max-width: 499px){
#HomePage{width:98%;margin:auto;}
.display-mobile{display: block;}
.display-desk{display: none;}  
    
.rightblog{width:100%;margin-right:0px;}
.leftblog{width:100%;margin-right:0px;margin-top:20px;}
.leftblog img{width:100%;}
    
.card-imgcol{width:100%;float: none;clear: both;}   
.card-imgcol img{width:100%;min-height:190px;}   
.card-contentcol{width:100%;padding:10px;float: none;clear: both;}        
    
/* Footer */
.footer-right{float: none;clear: both; width: 100%;} 
.footer-left{float: none;clear: both;width: 100%;background:#11315E;padding:20px;} 
.footer-left .list-group{float: none;clear: both;width: 100%;margin:0 10px;}       
   
}
@media screen and (min-width: 500px) and (max-width: 699px){
#HomePage{width:98%;margin:auto;}
.display-mobile{display: block;}
.display-desk{display: none;}  
    
.rightblog{width:100%;margin-right:0px;}
.leftblog{width:100%;margin-right:0;margin-top:20px;}
.leftblog img{width:50%;}
    
.card-imgcol{width:30%;float: right;}   
.card-imgcol img{width:100%;height:250px;}   
.card-contentcol{width:69%;padding:10px;float: right;}        
    
/* Footer */
.footer-right{float: none;clear: both; width: 100%;} 
.footer-left{float: none;clear: both;width: 100%;background:#11315E;padding:20px;} 
.footer-left .list-group{float: none;clear: both;width: 100%;margin:0 10px;}       
      
}
@media screen and (min-width: 700px) and (max-width: 980px){
#HomePage{width:98%;margin:auto;}
.display-mobile{display: block;}
.display-desk{display: none;}  
    
.rightblog{width:65%;margin-right:0px;float: right;}
.leftblog{width:30%;margin-right:10;margin-top:0px;float: right;}
.leftblog img{width:100%;}
    
.card-imgcol{width:30%;float: right;}   
.card-imgcol img{width:100%;height:250px;}   
.card-contentcol{width:69%;padding:10px;float: right;}        
    
/* Footer */
.footer-right{float: right; width: 30%;} 
.footer-left{float: right;width: 70%;background:#11315E;padding:20px;} 
.footer-left .list-group{float: right;width: 45%;margin:0 10px;}       
       
}