@import url('https://fonts.googleapis.com/css?family=Cairo:400,700,900&subset=arabic');
/* POWERED www.Chakirdev.com */

*{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    text-decoration: none;
    font-family: 'Cairo', sans-serif;
    text-rendering: optimizeLegibility;
}
html, body{
  height: 100%;
background-position:center; 
background-position: center center;
background-repeat:  no-repeat;
background-attachment: fixed;
background-size:  cover;
background-color: #F8F8F8;    
}
body{
font-family: 'Cairo', sans-serif;
text-rendering: optimizeLegibility;
direction:rtl;
}
ul{list-style: none;}
input{border-radius:0px;}
a{text-decoration: none;}
a:hover{text-decoration: none;}
h1,h2,h3,h4,h5,h6{font-family: 'Cairo', sans-serif;}
.lft{float:left;}
.rgt{float:right;}
.clr{clear:both;}
.bg{background: linear-gradient(rgba(0,0,0,0) 10%, rgba(0,0,0,1)),  center center / cover no-repeat;}
#HomePage{width:1100px;margin:auto;}

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

.card {
  background: #FFFFFF;
  width: 300px;
  height: 370px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0,0,0,.5);
  text-align: center;
  -webkit-transition: .2s ease-in-out;
}
.card:hover {
  margin-top: -15px;
  box-shadow: 0 10px 20px rgba(0,0,0,.3);
}
.card-banner {
  background: url('../images/homes.png');
  width: inherit;
  height: 100px;
  padding-top: 35px;
  background-color: #fafafa;
  background-position: top;
  background-size: cover;
}
.card-profile {
  background: url('../images/chakir.png');
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: auto auto;
  background-size: cover;
  background-color: #f1f1f1;
  border: 3px solid #fff;
  margin-top: 30px;
  box-shadow: 0 2px 2px rgba(0,0,0,.5);
}

/* INDEX */
.section{padding-top: 0px;}    
.section-home{width:300px;margin:30px;float:right;}    
.btn-home{width:300px;margin-bottom: 20px;padding:36px;}
.social a{margin: 10px;}

.btn-puple{background: #DA4453;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #89216B, #DA4453);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #89216B, #DA4453); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color:white;}
.btn-puple:hover{background: #DA4453;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #89216B, #DA4453);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #89216B, #DA4453); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color:white;}

.btn-red{background: #355C7D;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #C06C84, #6C5B7B, #355C7D);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #C06C84, #6C5B7B, #355C7D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color:white;}
.btn-red:hover{background: #355C7D;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #C06C84, #6C5B7B, #355C7D);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #C06C84, #6C5B7B, #355C7D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color:white;}

.btn-blue{background: #0f0c29;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color:white;}
.btn-blue:hover{background: #0f0c29;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color:white;}

.btn-black{background: #314755;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #26a0da, #314755);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #26a0da, #314755); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

color: white;}
.btn-black:hover{background: #314755;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #26a0da, #314755);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #26a0da, #314755); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: white;}

/* Item */
.uk-dark button{font-size: 19px;}    
.title-item{font-size:28px;font-weight:bold;margin-right:0px;color:#19153B;}
.item-left{width:300px;margin-left:20px;float: left;}
.item-right{width:700px;float: right;}
.uk-article{padding-right:40px;}
.uk-article .uk-text-lead{line-height:20px;padding:20px;}

.uk-slideshow-item img{width: 100%;max-height: 360px;}

.desc-one{width:49%;margin-left:10px;float:right;}
.desc-two{width:49%;margin-left:10px;float:right;}

.uk-position-relative{width: 100%;height:340px;}     
.uk-position-relative img{width: 100%;height:340px;}     

.img-item{margin-top:20px;}
.img-item img{width:170px;margin-left: -10px;}
.switchers button,a{width: 250px;margin-left: 10px;}
   

.back-item{background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);}
.back-item .uk-article-title{font-size:20px;font-weight:bold;margin-right:10px;color:#19153B;}    
.back-item .uk-card{width:250px;min-height:200px;margin:10px;float: right;}  
.back-item .uk-card img{width:250px;height:120px;}  
.back-item .uk-card-body{padding:15px;}    
.back-item .uk-card-body .uk-card-title{font-size:17px;font-weight: bold;} 
.uk-dark .uk-label{width: auto;margin-top: 5px;}    
/* items */
.items .uk-card{width:340px;height:260px;margin:12px;margin-bottom:30px;float: right;}  
.items .uk-card img{width:340px;height:180px;}    
.items .uk-card-body{padding:15px;}    
.items .uk-card-body .uk-card-title{font-size:17px;font-weight: bold;} 

/* portfolio */
.portfolio .uk-card{width:340px;height:450px;margin:10px;margin-bottom: 30px; float: right;}    
.portfolio .uk-card a img{width:340px;max-height:370px;}    
.portfolio .uk-card-body{}    
.portfolio .uk-card-body .uk-card-title{font-size:17px;font-weight: bold;} 
.modal-portfolio{height:auto;width:100%;padding-top:20px;padding-right:20px;} 

.display-desc{display: block;}

.contact-right{float: right;width:650px;}    
.contact-left{float: left;width:350px;margin-top: 40px;}   

.product {
  position: relative;
  z-index: 90;
}
.ribbon-wrapper {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  left: -3px;
  z-index: 90;
}
.ribbon {
    font: bold 15px sans-serif;
    color: #333;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -moz-transform:    rotate(-45deg);
    -ms-transform:     rotate(-45deg);
    -o-transform:      rotate(-45deg);
    position: relative;
    padding: 7px 0;
    top: 15px;
    left: 0px;
    width: 110px;
    background-color: #F12D49;
    color: #fff;
  }

.back-blackfriday{
background: #232526;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #414345, #232526);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
height:auto;padding:20px;}
.bf-title{font-weight:bold;font-size:30px;color:white;}
.bf-title:hover{color:white;}
.countdate{color:#F12D49;font-size:15px;}

/* Preview */
.preview{width: 300px;margin:10px;}    
.preview img{width: 300px;height:400px;}    
.preview p{font-size:20px;font-weight: bold;}   

@media screen and (min-width: 200px) and (max-width: 499px){
#HomePage{width:100%;margin:auto;}    
img{width: 100%;height: auto;}  
.display-desc{display: none;} 
     
.section-home{width:100%;margin:0px;float:right;}    
.btn-home{width:100%;margin-bottom: 20px;padding:36px;} 
    
.modal-portfolio{height:auto;width:100%;padding-top:20px;padding-right:0px;} 
.portfolio .uk-card{width:100%;margin:0px;margin-bottom:30px;float: right;}    
.portfolio .uk-card img{width:100%;height:auto;} 
    
/* Preview */
.preview{width: 70%;margin:5px;}    
.preview img{width: 100%;height:auto;}    
.preview p{font-size:20px;font-weight: bold;}       

/* Items */
.items .uk-card{width:93%;margin:10px;margin-bottom:30px;float: right;}    
.items .uk-card img{width:100%;height:auto;}    
  
/* Item */
.title-item{font-size:21px;line-height:29px;font-weight:bold;margin-right:0px;text-align: center; color:#19153B;}
.item-left{width:100%;margin-left:0px;float: none;clear: both;}
.item-right{width:100%;float: none;clear: both;}
.uk-article{padding-right:0px;}  
    
.uk-position-relative{width: 100%;height:auto;}     
.uk-position-relative img{width: 100%;height:auto;}   
  
.uk-slideshow-item img{width: 100%;height: auto;}    
.switchers{margin:10px;width: 97%;}
.switchers button,a{width: 100%;}
.img-item{margin:10px;}
.img-item img{width:100px;}    
    
.desc-one{width:98%;margin:10px; float:none;clear: both;}
.desc-two{width:98%;margin:10px;float:none;clear: both;}    
    
/*.img-lightbox .ligh-card{width:10%;height:auto;margin-right: 5px; margin-left: -20px;}    
.img-lightbox .ligh-card img{width:100%;height:50px;} */
    
.back-item .uk-card{width:96%;margin:10px;float: right;} 
.back-item .uk-card img{width:100%;height:200px;}        
.back-item .uk-card-body{padding:15px;}    
.back-item .uk-card-body .uk-card-title{font-size:17px;font-weight: bold;}  
    
/* portfolio */
.portfolio .uk-card{width:100%;height:auto;margin:10px;margin-bottom: 10px; float: right;}    
.portfolio .uk-card a img{width:100%;max-height:auto;}    
 
.g-recaptcha{transform:scale(0.80);-webkit-transform:scale(0.80);transform-origin:0 0;-webkit-transform-origin:0 0;margin-right: -50px;}   
.contact-right{float: right;clear: both; width:100%;}    
.contact-left{float: right;clear: both; width:100%;margin-top: 40px;}  
    
.bf-title{font-weight:bold;font-size:20px;color:white;}    
}
@media screen and (min-width: 500px) and (max-width: 799px){
#HomePage{width:100%;margin:auto;}    
img{width: 100%;height: auto;}  
.display-desc{display: none;} 
     
.section-home{width:50%;margin:0px;float:right;}    
.btn-home{width:100%;margin-bottom: 20px;padding:36px;} 
    
.modal-portfolio{height:auto;width:100%;padding-top:20px;padding-right:0px;} 
.portfolio .uk-card{width:43%;margin-bottom:30px;margin-right:30px;float: right;}    
.portfolio .uk-card img{width:100%;height:auto;} 
    

/* Items */
.items .uk-card{width:42%;height: auto; margin:10px;margin-bottom:30px;float: right;}    
.items .uk-card img{width:100%;height:auto;}    
  
/* Item */
 
.title-item{font-size:22px;font-weight:bold;margin-right:-20px;color:#19153B;}
.item-left{width:100%;margin-left:0px;float: none;clear: both;}
.item-right{width:100%;float: none;clear: both;}
.uk-article{padding-right:0px;}  
   
.uk-slideshow-item img{width: 100%;height: auto;}    
.switchers{margin:10px;width: 97%;}
.switchers button,a{width: 100%;}
.img-item{margin:10px;}
.img-item img{width:100px;margin-right: -30px;}        
    
.desc-one{width:98%;margin:10px; float:none;clear: both;}
.desc-two{width:98%;margin:10px;float:none;clear: both;}        

.uk-position-relative{width: 100%;height:auto;}     
.uk-position-relative img{width: 100%;height:auto;}       

        
/* portfolio */
.portfolio .uk-card{width:200px;height:auto;margin:10px;margin-bottom: 10px; float: right;}    
.portfolio .uk-card a img{width:200px;height:auto;}    
    
.back-item .uk-card{width:45%;margin:10px;float: right;}  
.back-item .uk-card img{width:100%;height:200px;}       
.back-item .uk-card-body{padding:15px;}    
.back-item .uk-card-body .uk-card-title{font-size:17px;font-weight: bold;}  
    
.g-recaptcha{transform:scale(0.80);-webkit-transform:scale(0.80);transform-origin:0 0;-webkit-transform-origin:0 0;margin-right: -60px;}   
.contact-right{float: right;clear: both; width:100%;}    
.contact-left{float: right;clear: both; width:100%;margin-top: 40px;}      
}
@media screen and (min-width: 800px) and (max-width: 999px){
#HomePage{width:100%;margin:auto;}    
img{width: 100%;height: auto;}  
.display-desc{display: none;} 
     
.section-home{width:50%;margin:0px;float:right;}    
.btn-home{width:100%;margin-bottom: 20px;padding:36px;} 
    
.modal-portfolio{height:auto;width:100%;padding-top:20px;padding-right:0px;} 
.portfolio .uk-card{width:43%;margin-bottom:30px;margin-right:30px;float: right;}    
.portfolio .uk-card img{width:100%;height:auto;} 
    

/* Items */
.items .uk-card{width:42%;margin:20px;margin-bottom:30px;float: right;}    
.items .uk-card img{width:100%;height:150px;}    
  
/* Item */
 
.title-item{font-size:22px;font-weight:bold;margin-right:-20px;color:#19153B;}
.item-left{width:30%;margin-left:10px;float: left;}
.item-right{width:65%;float: right;}
.uk-article{padding-right:0px;}  
 
.uk-slideshow-item img{width: 100%;height: auto;}    
.switchers{margin:10px;width: 97%;}
.switchers button,a{width: 250px;}
.img-item{margin:10px;}
.img-item img{width:130px;margin-right: 0px;}        
    
.desc-one{width:47%;margin:10px; float:right;}
.desc-two{width:47%;margin:10px;float:right;}      
    /*
.img-lightbox .ligh-card{width:10%;height:auto;margin-right: 5px; margin-left: -20px;}    
.img-lightbox .ligh-card img{width:100%;height:50px;}      
    */
.back-item .uk-card{width:45%;margin:10px;float: right;}   
.back-item .uk-card img{width:100%;height:200px;}       
.back-item .uk-card-body{padding:15px;}    
.back-item .uk-card-body .uk-card-title{font-size:17px;font-weight: bold;}     
}