/*
Author: Ahmad Khurma
Project Name:  Masarak
URI: 
Version: 1.0.0
*/



.block:before,.block:after{content:"";display:table;}
.block:after{clear:both;}
.block{*zoom:1;}
.col {float: left;}
.colLeft {float: left !important;}

.group, .lastGroup, .lastcol, .col {
    background-clip: padding-box !important;
    float: left;
   /* overflow: hidden;*/
}
.lastcol, .col {
    padding-left: 15px;
    padding-right: 15px;
}
.block-gutter5 .lastcol, .block-gutter5 .col{
	 padding-left: 5px;
     padding-right: 5px;
}
.block-gutter0 .lastcol, .block-gutter0 .col{
	 padding-left: 0px;
     padding-right: 0px;
}
.lastcol, .lastGroup {
    float: none;
    width: auto;
}

.group-block{margin-left:-15px; margin-right:-15px}

.size1of1 {float: none;}
.size1of2 {width: 50%;}
.sizeside300 {width: 30.2222%;}
.size1of3 {width: 33.3333%;}
.size2of3 {width: 66.6667%;}
.size1of4 {width: 25%;}
.size2of4 {width: 50%;}
.size3of4 {width: 75%;}
.size1of5 {width: 20%;}
.size2of5 {width: 40%;}
.size3of5 {width: 60%;}
.size4of5 {width: 80%;}
.size1of6 {width:16.66666%;}
.size2of6 {width: 33.3333%;}
.size5of6 {width:83.33333%;}
.size1of8 {width: 12.5%;}
.size3of8 {width: 37.5%;}
.size5of8 {width: 62.5%;}
.size7of8 {width: 87.5%;}
.size1of10 {width:10%;}
.size2of10 {width:20%;}
.size3of10 {width:30%;}
.size4of10 {width:40%;}
.size5of10 {width:50%;}
.size6of10 {width:60%;}
.size7of10 {width:70%;}
.size8of10 {width:80%;}
.size9of10 {width:90%;}
.size1of12 {width: 8.333%;}
.size95of12 {width: 41.666%;}
.size7of12 {width: 58.333%;}
.size11of12 {width: 91.666%;}
.sizecpc{width:100%;}
.lastcol {float:none;display:block;display:table-cell;width:9999em;*width:auto;*zoom:1;}


.gutter15 {padding-left: 15px;padding-right: 15px;}
.hwrapper, .bwrapper, .fwrapper, .cwrapper {margin: 0 auto;width:1140px;padding:0 15px}
.liquid-wrapper{ margin-right: auto;margin-left: auto;padding-left: 15px;padding-right: 15px;}
.liquid {min-width:1170px;}
.rtl {direction: rtl;}
.ltr {direction: ltr;}
.right-sidebar{width:220px}

.grid-filler, p.gutter-filler {
    background: #52bad5 none repeat scroll 0 0;
    color: #fff;
    font-weight: bold;
    margin-top: 1.2em;
    max-width: inherit;
    padding: 24px 0;
}
.bg-r0 {
    background-color: #f8d0c8;
}
.bg-r1 {
    background-color: #f5b7ab;
}
.bg-r2 {
    background-color: #ee836e;
}
.bg-r3 {
    background-color: #e85c41;
}
.bg-r4 {
    background-color: #db3a1b;
}
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
/* End Layout Structure

Example Markup
OneCol
<div class="block">
<div class="col size1of1"></div><!--end size1of1-->
</div><!--end block-->

TwoCols
<div class="block">
<div class="col size1of2"></div><!--end size1of2-->
<div class="col size1of2 lastcol"></div><!--end size1of2 lastcol-->
</div><!--end block-->

ThreeCols
<div class="block">
<div class="col size1of3"></div><!--end size1of3-->
<div class="col size1of3"></div><!--end size1of3-->
<div class="col size1of3 lastcol"></div><!--end size1of3 lastcol-->
</div><!--end block-->

<div class="block">
<div class="col size1of3"></div><!--end size1of3-->
<div class="col size2of3 lastcol"></div><!--end size2of3 lastcol-->
</div><!--end block-->

FourCols
<div class="block">
<div class="col size1of4"></div><!--end size1of4-->
<div class="col size1of4"></div><!--end size1of4-->
<div class="col size1of4"></div><!--end size1of4-->
<div class="col size1of4 lastcol"></div><!--end size1of4 lastcol-->
</div><!--end block-->


<div class="block">
<div class="col size1of4"></div><!--end size1of4-->
<div class="col size3of4 lastcol"></div><!--end size3of4 lastcol-->
</div>



groups Example
<div class="block">
  <div class="size1of2 group bg-r1 alignc">
    <p class="nomargin">Group</p>
    
    <div class="block">
      <div class="size1of1 lastcol">
        <p class="grid-filler mar-t0">1/2</p>
        <p class="grid-filler">1/2</p>
      </div>
      
      <div class="size1of1 lastGroup bg-r2">
        <div class="size1of2 col">
          <p class="grid-filler">Nested column</p>
        </div>
        <div class="size1of2 lastcol">
          <p class="grid-filler">Nested column</p>
        </div>
      </div>
    </div>
  </div>
  <div class="size1of2 lastGroup bg-r1 alignc">
    <p class="nomargin">Group</p>
    <div class="size1of2 col">
      <p class="grid-filler mar-t0">1/2</p>
    </div>
    <div class="size1of2 lastGroup bg-r2">
      <div class="size1of2 col">
        <p class="grid-filler">Nested column</p>
      </div>
      <div class="size1of2 lastcol">
        <p class="grid-filler">Nested column</p>
      </div>
    </div>
  </div>
</div>




<!--end block-->
   ========================================================================== */