/************************autor: HeBa Elkady *******************/
@font-face {
    font-family: "Droid Arabic Kufi";
    src: url("DroidKufi-Regular.eot?#iefix") format("embedded-opentype"), url("DroidKufi-Bold.ttf") ;
    font-weight: 400;
}
@font-face {
    font-family: "Droid Arabic Kufi";
    src: url("DroidKufi-Regular.eot?#iefix") format("embedded-opentype"), url("DroidKufi-Bold.ttf") format("truetype");
    font-weight: 700;
}
img {
    border:none;
    outline:none
}
body {
    margin:0;padding:0
}

h5 {
    margin:0
}
#body {
    background: #004ca2; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #004ca2 0%, #000b2d 99%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#004ca2), color-stop(99%,#000b2d)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #004ca2 0%,#000b2d 99%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #004ca2 0%,#000b2d 99%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #004ca2 0%,#000b2d 99%); /* IE10+ */
background: radial-gradient(ellipse at center,  #004ca2 0%,#000b2d 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004ca2', endColorstr='#000b2d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  font-family: "Droid Arabic Kufi";
 color:#fff;
 direction:rtl;
 padding:20px 10px
}
.inline {
display:inline-block
}
.star {
    background:url(images/star.png) no-repeat;
    width:50px;height:50px;
    display:inline-block
}

.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
    display:none;
	background: url('../images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
#zoom {
    color:#000;
    z-index:9999999999
}


.margin-top {
   margin-top:25px 
}








.text-center {
    text-align:center
}

.logo { 
    -webkit-animation-duration: 8s; 
    animation-duration: 8s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 
} 

@-webkit-keyframes swing { 
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 
    20% { -webkit-transform: rotate(15deg); } 
    40% { -webkit-transform: rotate(-10deg); } 
    60% { -webkit-transform: rotate(15deg); } 
    80% { -webkit-transform: rotate(-10deg); } 
    100% { -webkit-transform: rotate(0deg); } 
} 
@keyframes swing { 
    20% { transform: rotate(15deg); } 
    40% { transform: rotate(-10deg); } 
    60% { transform: rotate(15deg); } 
    80% { transform: rotate(-10deg); } 
    100% { transform: rotate(0deg); } 
} 
.swing { 
    -webkit-transform-origin: top center; 
    transform-origin: top center; 
    -webkit-animation-name: swing; 
    animation-name: swing; 
}


.menu { 
}
.menu h3{  font-family: "Droid Arabic Kufi";
 background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
margin:1px 0;
padding:8px 12px 8px 10px;
font-size:12px;
text-decoration:none;
}
.menu h3 a{  
text-decoration:none;
color:rgba(0, 0, 0, 0.8)
}
    .menu ul {
        list-style-type:none;
        background:#fff;
        margin:0;
        color:#000;
        font-size:13px
    }.menu ul a{
         
        color:#000
    }
.menu .open {
    background:#003273;
    color:#fff
}.menu .open a{
   
    color:#fff
}

.clear {
    clear:both;
    height:0;
    line-height:0
}
.actions {
    
}
.actions li{
    display:inline-block;
    -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding:7px; margin:0 6px;
background-color: rgba(23, 75, 145, 0.7);
 
}
.cube {
 

  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
  transform-style: preserve-3d;
  transform: rotateX(0) rotateY(0) rotateZ(0);

}

 

@-webkit-keyframes bounceOut { 
    0% { 
        opacity: 0; 
        -webkit-transform: scale(.1); 
    } 



    100% { 
         -webkit-transform: scale(1); 
    } 
} 

@keyframes bounceOut { 
    0% { 
        opacity: 0; 
        transform: scale(.1); 
    } 

  

    100% { 
        transform: scale(1); 
    } 
} 

.bounceOut { 
    -webkit-animation-name: bounceOut; 
    animation-name: bounceOut; 
}
.front {

  -webkit-backface-visibility: visible;
 position:relative;
   -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
  
}
.back {
  position: absolute; 
  right:0; 
  -webkit-backface-visibility: visible;
  -webkit-transform:  rotateY(180deg) translateZ(100px);
  backface-visibility: visible;
  transform: rotateY(180deg) translateZ(100px);
  top:0
  ;z-index:8
}
.cube {
  -webkit-animation: upyourscache1430300630109 5s infinite linear;
  animation: upyourscache1430300630109 5s infinite linear;

}
@-webkit-keyframes upyourscache1430300630109 {
  0% { -webkit-transform: rotateY(0) ;}
  100% { -webkit-transform: rotateY(360deg) ;}
}
@keyframes upyourscache1430300630109 {
  0% { transform: rotateY(0) ;}
  100% { transform: rotateY(360deg) ;}
}

 
.responsive {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}


.x { width:367px;
    height:800px;
     margin:auto; 
}
.body {
    position:relative;
   
   margin:auto;
  left:0;right:0
}


#zoom_content
   {
   height: 300px;
    overflow: auto;
}


.liver-tooltip:before  { 
      content:"الكبد"; font-size: 12px;
}
.liver-tooltip{ 
   background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    color: white;
    left: 126px;
    padding: 5px;
    position: absolute;
    top: 132px;
    z-index: 9;
    opacity:0;
    display:flex;
}

  .liver-tooltip:hover {
        opacity:1
    }

 
.liver {
      left: 0;
    position: absolute;
    top: 60px;
    z-index: 9;
     -webkit-clip-path: url(../svg/liver.svg);
clip-path: url(../svg/liver.svg#svgClip);
 -webkit-mask: url(../svg/liver.svg);

}










.spritespin ,.spritespin1{
    z-index:99999999999999999999
}
.spritespin1 .spritespin-canvas{
    cursor:move
}

.pancres-tooltip:before  { 
      content:"بنكرياس"; font-size: 12px;
}
.pancres-tooltip{ 
   background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    color: white;
    left: 160px;
    padding: 5px;
    position: absolute;
    top: 185px;
   z-index: 9;
    opacity:0;
    display:flex;
}
  .pancres-tooltip:hover {
        opacity:1
    }

.pancres {
      left: 0;
      position: absolute;
      top: 30px;    z-index: 6;
     -webkit-clip-path: url(../svg/pancres.svg);
clip-path: url(../svg/pancres.svg#svgClip);
 -webkit-mask: url(../svg/pancres.svg);z-index:11
}
    





.maraa-tooltip:before  { 
      content:"المرارة"; font-size: 12px;
}
.maraa-tooltip{ 
   background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    color: white;
    left: 150px;
    padding: 5px;
    position: absolute;
    top: 200px;
   z-index: 10;
    opacity:0;
    display:flex;
}
  .maraa-tooltip:hover {
        opacity:1
    }

.maraa {
      left: 0;
      position: absolute;
      top: 30px;    z-index: 6; z-index:11
}



.oda-tooltip:before  { 
      content:"الغدة الدراقية"; font-size: 12px;
}
.oda-tooltip{ 
   background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    color: white;
    left: 152px;
    padding: 5px;
    position: absolute;
    top: 40px;
   z-index: 9;
    opacity:0;
    display:flex;
}
  .oda-tooltip:hover {
        opacity:1
    }

.oda {
      left: 0;
      position: absolute;
      top: 30px;    z-index: 6; z-index:11
}






.mfasal-tooltip:before  { 
      content:"المفاصل"; font-size: 12px;
}
.mfasal-tooltip{ 
   background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    color: white;
    left: -5px;
    padding: 5px;
    position: absolute;
    top: 25px;
   z-index: 5;
    opacity:0;
    display:flex;
}
  .mfasal-tooltip:hover {
        opacity:1
    }

.mfasal {
      left: 0;
      position: absolute;-webkit-clip-path: url(../svg/mfasal.svg);
clip-path: url(../svg/mfasal.svg#svgClip);
 -webkit-mask: url(../svg/mfasal.svg); 
      top: 30px;    z-index: 6; z-index:11
}





.brain-tooltip:before  {  font-size: 12px;
      content:"الدماغ";
}
.brain-tooltip{ 
   background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    color: white;
    left: 230px;
    padding: 5px;
    position: absolute;
    top: 3px;
   z-index: 8;
    opacity:0;
    display:flex;
}
  .brain-tooltip:hover {
        opacity:1
    }

.brain {
      left: -80px;
      position: absolute;
      top: 0px; 
}
 


 


.eye-tooltip:before  {  font-size: 12px;
      content:"العين";
}
.eye-tooltip{ 
   background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    color: white;
    left: 158px;
    padding: 5px;
    position: absolute;
    top: -7px;
   z-index: 9;
    opacity:0;
    display:flex;
}
  .eye-tooltip:hover {
        opacity:1
    }

.eye {
      left: 0;
      position: absolute;
      top: 50px; 
}
 



.stomack-tooltip:before  {  font-size: 12px;
      content:"المعدة";
}
.stomack-tooltip{ 
   background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    color: white;
    left: 150px;
    padding: 5px;
    position: absolute;
    top: 200px;
   z-index: 8;
    opacity:0;
    display:flex;
}
  .stomack-tooltip:hover {
        opacity:1
    }

.stomack {
      left: 0;
      position: absolute;
      top: 0px;
      -webkit-clip-path: url(../svg/stomack.svg);
      clip-path: url(../svg/stomack.svg#svgClip);
      -webkit-mask: url(../svg/stomack.svg);
}
 
 

.colon-tooltip:before  {  font-size: 12px;
      content:"القولون";  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8); padding: 5px;
       z-index: 6;
    border-radius: 6px;
}
.colon-tooltip{ 
 
    color: white;
    left: 130px;
   
    position: absolute;
    top: 225px;
   z-index: 5;
    opacity:0;
    display:flex;
}
  .colon-tooltip:hover {
        opacity:1
    }

.colon {
      left: 0;
      position: absolute;
      top: 0px; z-index: -1;
}
 


.am3a-tooltip:before  {  font-size: 12px;
      content:"امعاء";  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);  
       border-radius: 6px;   z-index: 6;   padding: 5px;
}
.am3a-tooltip{ 
 
 
    color: white;
    left: 139px;
 
    position: absolute;
    top: 222px;
   z-index: 8;
    opacity:0;
    display:flex;
}
  .am3a-tooltip:hover {
        opacity:1
    }

.am3a {
      left: 0;
      position: absolute;
      top: 0px;
      -webkit-clip-path: url(../svg/am3a.svg);
      clip-path: url(../svg/am3a.svg#svgClip);
      -webkit-mask: url(../svg/am3a.svg);
      z-index:-1
}
 
 

.urinary-tooltip:before  {  font-size: 12px;
      content:"الكلي";  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);  
       border-radius: 6px;   z-index: 9;   padding: 5px;
}
.urinary-tooltip{ 
 
 
    color: white;
    left: 148px;
 
    position: absolute;
    top: 248px;
   z-index:5;
    opacity:0;
    display:flex;
}
  .urinary-tooltip:hover {
        opacity:1
    }

.urinary {
      left: 0;
      position: absolute;
      top: 0px;
     
      z-index:5
}
 





.lung-tooltip:before  {  font-size: 12px;
      content:"الرئة";  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);  
       border-radius: 6px;   z-index: 6;   padding: 5px;
}
.lung-tooltip{ 
 
 
    color: white;
    left: 129px;
 
    position: absolute;
    top: 125px;
   z-index: 5;
    opacity:0;
    display:flex;
}
  .lung-tooltip:hover {
        opacity:1
    }

.lung {
      left: 0;
      position: absolute;
      top: 0px;
       
      z-index:-1
}
 


.heart-tooltip:before  {  font-size: 12px;
      content:"القلب";  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);  
       border-radius: 6px;   z-index: 6;   padding: 5px;
}
.heart-tooltip{ 
 
 
    color: white;
    left: 165px;
 
    position: absolute;
    top: 139px;
   z-index: 11;
    opacity:0;
    display:flex;
}
  .heart-tooltip:hover {
        opacity:1
    }

.heart {
      left: 0;
      position: absolute;
      top: 0px;
       
      z-index:-1
}



.heart:hover , .heart { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 
} 

@-webkit-keyframes bounceIn { 
    0% { 
        opacity: 1; 
        -webkit-transform: scale(.9); 
    } 

    50% { 
        opacity: 1; 
        -webkit-transform: scale(1.05); 
    } 

  

    100% { 
         -webkit-transform: scale(.9); 
    } 
} 

@keyframes bounceIn { 
    0% { 
        opacity: 1; 
        transform: scale(.9); 
    } 

    50% { 
        opacity: 1; 
        transform: scale(1.05); 
    } 

  

    100% { 
        transform: scale(.9); 
    } 
} 

.bounceIn:hover ,.bounceIn  { 
    -webkit-animation-name: bounceIn; 
    animation-name: bounceIn; 
}

.shararin-tooltip:before  {  font-size: 12px;
      content:"الشرايين";  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);  
       border-radius: 6px;   z-index: 6;   padding: 5px;
}
.shararin-tooltip{ 
 
 
    color: white;
    left: 0px;
     position: absolute;
    top: -13px;
   z-index: 4;
    opacity:0;
    display:flex;
}
  .shararin-tooltip:hover {
        opacity:1
    }

.shararin {
      left: 0;
      position: absolute;
      top: 0px;
      z-index:5;
      /*Chrome,Safari*/
-webkit-clip-path: url(../svg/shararin.svg);

/* Firefox*/
clip-path: url(../svg/shararin.svg#svgClip);

/* iOS support */
 -webkit-mask: url(../svg/shararin.svg);
}


.blood-tooltip:before  {  font-size: 12px;
      content:"الدم";  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);  
       border-radius: 6px;   z-index: 6;   padding: 5px;
}
.blood-tooltip{ 
 
 
    color: white;
    left: 0px;
     position: absolute;
    top: -13px;
   z-index: 4;
    opacity:0;
    display:flex;
}
  .blood-tooltip:hover {
        opacity:1
    }

.blood {
      left: 0;
      position: absolute;
      top: 0px;
      z-index:5;

-webkit-clip-path: url(../svg/shararin.svg);
clip-path: url(../svg/shararin.svg#svgClip);
 -webkit-mask: url(../svg/shararin.svg);
}


.skin-tooltip:before  {  font-size: 12px;
      content:"الجلد";  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);  
       border-radius: 6px;   z-index: 6;   padding: 5px;
}
.skin-tooltip{ 
 
 
    color: white;
    left: 0px;
     position: absolute;
    top: 0px;
   z-index: 3;
    opacity:0;
    display:flex;
}
  .skin-tooltip:hover {
        opacity:1
    }

.skin {
      left: 0;
      position: absolute;
      top: 0px;
      z-index:5;

      
-webkit-clip-path: url(../svg/skin.svg);
clip-path: url(../svg/skin.svg#svgClip);
 -webkit-mask: url(../svg/skin.svg);
       
}


@media screen and (max-width: 940px) {
    .add_nav li a {
        padding: 0px 8px;
        font-size: 9px;
    }
}





@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

.span-xs1, .span-sm1, .span-md1, .span-lg1, .span-xs2, .span-sm2, .span-md2, .span-lg2, .span-xs3, .span-sm3, .span-md3, .span-lg3, .span-xs4, .span-sm4, .span-md4, .span-lg4, .span-xs5, .span-sm5, .span-md5, .span-lg5, .span-xs6, .span-sm6, .span-md6, .span-xs7, .span-xs7, .span-sm7, .span-md7, .span-lg7, .span-xs8, .span-sm8, .span-md8, .span-lg8, .span-xs9, .span-sm9, .span-md9, .span-lg9, .span-xs10, .span-sm10, .span-md10, .span-lg10, .span-xs11, .span-sm11, .span-md11, .span-lg11, .span-xs12, .span-sm12, .span-md12, .span-lg12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing:border-box;
}

.span-xs1, .span-sm1, .span-md1, .span-lg1, .span-xs2, .span-sm2, .span-md2, .span-lg2, .span-xs3, .span-sm3, .span-md3, .span-lg3, .span-xs4, .span-sm4, .span-md4, .span-lg4, .span-xs5, .span-sm5, .span-md5, .span-lg5, .span-xs6, .span-sm6, .span-md6, .span-xs7, .span-xs7, .span-sm7, .span-md7, .span-lg7, .span-xs8, .span-sm8, .span-md8, .span-lg8, .span-xs9, .span-sm9, .span-md9, .span-lg9, .span-xs10, .span-sm10, .span-md10, .span-lg10, .span-xs11, .span-sm11, .span-md11, .span-lg11, .span-xs-12, .span-sm12, .span-md12, .span-lg12 {
    float: right;
}

.span-xs12 {
    width: 100%;
}

.span-xs11 {
    width: 91.66666667%;
}

.span-xs10 {
    width: 83.33333333%;
}

.span-xs9 {
    width: 75%;
}

.span-xs8 {
    width: 66.66666667%;
}

.span-xs7 {
    width: 58.33333333%;
}

.span-xs6 {
    width: 50%;
}

.span-xs5 {
    width: 41.66666667%;
}

.span-xs4 {
    width: 33.33333333%;
}

.span-xs3 {
    width: 25%;
}

.span-xs2 {
    width: 16.66666667%;
}

.span-xs1 {
    width: 8.33333333%;
}

.span-xs12-pull {
    right: 100%;
}

.span-xs11-pull {
    right: 91.66666667%;
}

.span-xs10-pull {
    right: 83.33333333%;
}

.span-xs9-pull {
    right: 75%;
}

.span-xs8-pull {
    right: 66.66666667%;
}

.span-xs7-pull {
    right: 58.33333333%;
}

.span-xs6-pull {
    right: 50%;
}

.span-xs5-pull {
    right: 41.66666667%;
}

.span-xs4-pull {
    right: 33.33333333%;
}

.span-xs3-pull {
    right: 25%;
}

.span-xs2-pull {
    right: 16.66666667%;
}

.span-xs1-pull {
    right: 8.33333333%;
}

.span-xs0-pull {
    right: auto;
}

.span-xs12-push {
    left: 100%;
}

.span-xs11-push {
    left: 91.66666667%;
}

.span-xs10-push {
    left: 83.33333333%;
}

.span-xs9-push {
    left: 75%;
}

.span-xs8-push {
    left: 66.66666667%;
}

.span-xs7-push {
    left: 58.33333333%;
}

.span-xs6-push {
    left: 50%;
}

.span-xs5-push {
    left: 41.66666667%;
}

.span-xs4-push {
    left: 33.33333333%;
}

.span-xs3-push {
    left: 25%;
}

.span-xs2-push {
    left: 16.66666667%;
}

.span-xs1-pushh {
    left: 8.33333333%;
}

.span-xs0-push {
    left: auto;
}

.span-xs12-offset {
    margin-right: 100%;
}

.span-xs11-offset {
    margin-right: 91.66666667%;
}

.span-xs10-offset {
    margin-right: 83.33333333%;
}

.span-xs9-offset {
    margin-right: 75%;
}

.span-xs8-offset {
    margin-right: 66.66666667%;
}

.span-xs7-offset {
    margin-right: 58.33333333%;
}

.span-xs6-offset {
    margin-right: 50%;
}

.span-xs5-offset {
    margin-right: 41.66666667%;
}

.span-xs4-offset {
    margin-right: 33.33333333%;
}

.span-xs3-offset {
    margin-right: 25%;
}

.span-xs2-offset {
    margin-right: 16.66666667%;
}

.span-xs1-offset {
    margin-right: 8.33333333%;
}

.span-xs0-offset {
    margin-right: 0;
}



.span-xs12-offsetl {
    margin-left: 100%;
}

.span-xs11-offsetl {
    margin-left: 91.66666667%;
}

.span-xs10-offsetl {
    margin-left: 83.33333333%;
}

.span-xs9-offsetl {
    margin-left: 75%;
}

.span-xs8-offsetl {
    margin-left: 66.66666667%;
}

.span-xs7-offsetl {
    margin-left: 58.33333333%;
}

.span-xs6-offsetl {
    margin-left: 50%;
}

.span-xs5-offsetl {
    margin-left: 41.66666667%;
}

.span-xs4-offsetl {
    margin-left: 33.33333333%;
}

.span-xs3-offsetl {
    margin-left: 25%;
}

.span-xs2-offsetl {
    margin-left: 16.66666667%;
}

.span-xs1-offsetl {
    margin-left: 8.33333333%;
}

.span-xs0-offsetl {
    margin-left: 0;
}





@media (min-width: 480px) {

    .span-s1, .span-s2, .span-s3, .span-s4, .span-s5, .span-s6, .span-s7, .span-s8, .span-s9, .span-s10, .span-s11, .span-s12 {
        float: right;
    }

    .span-s12 {
        width: 100%;
    }

    .span-s11 {
        width: 91.66666667%;
    }

    .span-s10 {
        width: 83.33333333%;
    }

    .span-s9 {
        width: 75%;
    }

    .span-s8 {
        width: 66.66666667%;
    }

    .span-s7 {
        width: 58.33333333%;
    }

    .span-s6 {
        width: 50%;
    }

    .span-s5 {
        width: 41.66666667%;
    }

    .span-s4 {
        width: 33.33333333%;
    }

    .span-s3 {
        width: 25%;
    }

    .span-s2 {
        width: 16.66666667%;
    }

    .span-s1 {
        width: 8.33333333%;
    }

    .span-s12-pull {
        right: 100%;
    }

    .span-s11-pull {
        right: 91.66666667%;
    }

    .span-s10-pull {
        right: 83.33333333%;
    }

    .span-s9-pull {
        right: 75%;
    }

    .span-s8-pull {
        right: 66.66666667%;
    }

    .span-s7-pull {
        right: 58.33333333%;
    }

    .span-s6-pull {
        right: 50%;
    }

    .span-s5-pull {
        right: 41.66666667%;
    }

    .span-s4-pull {
        right: 33.33333333%;
    }

    .span-s3-pull {
        right: 25%;
    }

    .span-s2-pull {
        right: 16.66666667%;
    }

    .span-s1-pull {
        right: 8.33333333%;
    }

    .span-s0-pull {
        right: auto;
    }

    .span-s12-push {
        left: 100%;
    }

    .span-s11-push {
        left: 91.66666667%;
    }

    .span-s10-push {
        left: 83.33333333%;
    }

    .span-s9-push {
        left: 75%;
    }

    .span-s8-push {
        left: 66.66666667%;
    }

    .span-s7-push {
        left: 58.33333333%;
    }

    .span-s6-push {
        left: 50%;
    }

    .span-s5-push {
        left: 41.66666667%;
    }

    .span-s4-push {
        left: 33.33333333%;
    }

    .span-s3-push {
        left: 25%;
    }

    .span-s2-push {
        left: 16.66666667%;
    }

    .span-s1-push {
        left: 8.33333333%;
    }

    .span-s0-push {
        left: auto;
    }

    .span-s12-offset {
        margin-right: 100%;
    }

    .span-s11-offset {
        margin-right: 91.66666667%;
    }

    .span-s10-offset {
        margin-right: 83.33333333%;
    }

    .span-s9-offset {
        margin-right: 75%;
    }

    .span-s8-offset {
        margin-right: 66.66666667%;
    }

    .span-s7-offset {
        margin-right: 58.33333333%;
    }

    .span-s6-offset {
        margin-right: 50%;
    }

    .span-s5-offset {
        margin-right: 41.66666667%;
    }

    .span-s4-offset {
        margin-right: 33.33333333%;
    }

    .span-s3-offset {
        margin-right: 25%;
    }

    .span-s2-offset {
        margin-right: 16.66666667%;
    }

    .span-s1-offset {
        margin-right: 8.33333333%;
    }

    .span-s0-offset {
        margin-right: 0;
    }

    .span-s12-offsetl {
        margin-left: 100%;
    }

    .span-s11-offsetl {
        margin-left: 91.66666667%;
    }

    .span-s10-offsetl {
        margin-left: 83.33333333%;
    }

    .span-s9-offsetl {
        margin-left: 75%;
    }

    .span-s8-offsetl {
        margin-left: 66.66666667%;
    }

    .span-s7-offsetl {
        margin-left: 58.33333333%;
    }

    .span-s6-offsetl {
        margin-left: 50%;
    }

    .span-s5-offsetl {
        margin-left: 41.66666667%;
    }

    .span-s4-offsetl {
        margin-left: 33.33333333%;
    }

    .span-s3-offsetl {
        margin-left: 25%;
    }

    .span-s2-offsetl {
        margin-left: 16.66666667%;
    }

    .span-s1-offsetl {
        margin-left: 8.33333333%;
    }

    .span-s0-offsetl {
        margin-left: 0;
    }
}









@media (min-width: 768px) {

    .span-sm1, .span-sm2, .span-sm3, .span-sm4, .span-sm5, .span-sm6, .span-sm7, .span-sm8, .span-sm9, .span-sm10, .span-sm11, .span-sm12 {
        float: right;
    }

    .span-sm12 {
        width: 100%;
    }

    .span-sm11 {
        width: 91.66666667%;
    }

    .span-sm10 {
        width: 83.33333333%;
    }

    .span-sm9 {
        width: 75%;
    }

    .span-sm8 {
        width: 66.66666667%;
    }

    .span-sm7 {
        width: 58.33333333%;
    }

    .span-sm6 {
        width: 50%;
    }

    .span-sm5 {
        width: 41.66666667%;
    }

    .span-sm4 {
        width: 33.33333333%;
    }

    .span-sm3 {
        width: 25%;
    }

    .span-sm2 {
        width: 16.66666667%;
    }

    .span-sm1 {
        width: 8.33333333%;
    }

    .span-sm12-pull {
        right: 100%;
    }

    .span-sm11-pull {
        right: 91.66666667%;
    }

    .span-sm10-pull {
        right: 83.33333333%;
    }

    .span-sm9-pull {
        right: 75%;
    }

    .span-sm8-pull {
        right: 66.66666667%;
    }

    .span-sm7-pull {
        right: 58.33333333%;
    }

    .span-sm6-pull {
        right: 50%;
    }

    .span-sm5-pull {
        right: 41.66666667%;
    }

    .span-sm4-pull {
        right: 33.33333333%;
    }

    .span-sm3-pull {
        right: 25%;
    }

    .span-sm2-pull {
        right: 16.66666667%;
    }

    .span-sm1-pull {
        right: 8.33333333%;
    }

    .span-sm0-pull {
        right: auto;
    }

    .span-sm12-push {
        left: 100%;
    }

    .span-sm11-push {
        left: 91.66666667%;
    }

    .span-sm10-push {
        left: 83.33333333%;
    }

    .span-sm9-push {
        left: 75%;
    }

    .span-sm8-push {
        left: 66.66666667%;
    }

    .span-sm7-push {
        left: 58.33333333%;
    }

    .span-sm6-push {
        left: 50%;
    }

    .span-sm5-push {
        left: 41.66666667%;
    }

    .span-sm4-push {
        left: 33.33333333%;
    }

    .span-sm3-push {
        left: 25%;
    }

    .span-sm2-push {
        left: 16.66666667%;
    }

    .span-sm1-push {
        left: 8.33333333%;
    }

    .span-sm0-push {
        left: auto;
    }

    .span-sm12-offset {
        margin-right: 100%;
    }

    .span-sm11-offset {
        margin-right: 91.66666667%;
    }

    .span-sm10-offset {
        margin-right: 83.33333333%;
    }

    .span-sm9-offset {
        margin-right: 75%;
    }

    .span-sm8-offset {
        margin-right: 66.66666667%;
    }

    .span-sm7-offset {
        margin-right: 58.33333333%;
    }

    .span-sm6-offset {
        margin-right: 50%;
    }

    .span-sm5-offset {
        margin-right: 41.66666667%;
    }

    .span-sm4-offset {
        margin-right: 33.33333333%;
    }

    .span-sm3-offset {
        margin-right: 25%;
    }

    .span-sm2-offset {
        margin-right: 16.66666667%;
    }

    .span-sm1-offset {
        margin-right: 8.33333333%;
    }

    .span-sm0-offset {
        margin-right: 0;
    }

    .span-sm12-offsetl {
        margin-left: 100%;
    }

    .span-sm11-offsetl {
        margin-left: 91.66666667%;
    }

    .span-sm10-offsetl {
        margin-left: 83.33333333%;
    }

    .span-sm9-offsetl {
        margin-left: 75%;
    }

    .span-sm8-offsetl {
        margin-left: 66.66666667%;
    }

    .span-sm7-offsetl {
        margin-left: 58.33333333%;
    }

    .span-sm6-offsetl {
        margin-left: 50%;
    }

    .span-sm5-offsetl {
        margin-left: 41.66666667%;
    }

    .span-sm4-offsetl {
        margin-left: 33.33333333%;
    }

    .span-sm3-offsetl {
        margin-left: 25%;
    }

    .span-sm2-offsetl {
        margin-left: 16.66666667%;
    }

    .span-sm1-offsetl {
        margin-left: 8.33333333%;
    }

    .span-sm0-offsetl {
        margin-left: 0;
    }
}












@media (min-width: 992px) {

    .span-md1, .span-md2, .span-md3, .span-md4, .span-md5, .span-md6, .span-md7, .span-md8, .span-md9, .span-md10, .span-md11, .span-md12 {
        float: right;
    }


    .span-md12 {
        width: 100%;
    }

    .span-md11 {
        width: 91.66666667%;
    }

    .span-md10 {
        width: 83.33333333%;
    }

    .span-md9 {
        width: 75%;
    }

    .span-md8 {
        width: 66.66666667%;
    }

    .span-md7 {
        width: 58.33333333%;
    }

    .span-md6 {
        width: 50%;
    }

    .span-md5 {
        width: 41.66666667%;
    }

    .span-md4 {
        width: 33.33333333%;
    }

    .span-md3 {
        width: 25%;
    }

    .span-md2 {
        width: 16.66666667%;
    }

    .span-md1 {
        width: 8.33333333%;
    }

    .span-md12-pull {
        right: 100%;
    }

    .span-md11-pull {
        right: 91.66666667%;
    }

    .span-md10-pull {
        right: 83.33333333%;
    }

    .span-md9-pull {
        right: 75%;
    }

    .span-md8-pull {
        right: 66.66666667%;
    }

    .span-md7-pull {
        right: 58.33333333%;
    }

    .span-md6-pull {
        right: 50%;
    }

    .span-md5-pull {
        right: 41.66666667%;
    }

    .span-md4-pull {
        right: 33.33333333%;
    }

    .span-md3-pull {
        right: 25%;
    }

    .span-md2-pull {
        right: 16.66666667%;
    }

    .span-md1-pull {
        right: 8.33333333%;
    }

    .span-md0-pull {
        right: auto;
    }

    .span-md12-push {
        left: 100%;
    }

    .span-md11-push {
        left: 91.66666667%;
    }

    .span-md10-push {
        left: 83.33333333%;
    }

    .span-md9-push {
        left: 75%;
    }

    .span-md8-push {
        left: 66.66666667%;
    }

    .span-md7-push {
        left: 58.33333333%;
    }

    .span-md6-push {
        left: 50%;
    }

    .span-md5-push {
        left: 41.66666667%;
    }

    .span-md4-push {
        left: 33.33333333%;
    }

    .span-md3-push {
        left: 25%;
    }

    .span-md2-push {
        left: 16.66666667%;
    }

    .span-md1-push {
        left: 8.33333333%;
    }

    .span-md0-push {
        left: auto;
    }

    .span-md12-offset {
        margin-right: 100%;
    }

    .span-md11-offset {
        margin-right: 91.66666667%;
    }

    .span-md10-offset {
        margin-right: 83.33333333%;
    }

    .span-md9-offset {
        margin-right: 75%;
    }

    .span-md8-offset {
        margin-right: 66.66666667%;
    }

    .span-md7-offset {
        margin-right: 58.33333333%;
    }

    .span-md6-offset {
        margin-right: 50%;
    }

    .span-md5-offset {
        margin-right: 41.66666667%;
    }

    .span-md4-offset {
        margin-right: 33.33333333%;
    }

    .span-md3-offset {
        margin-right: 25%;
    }

    .span-md2-offset {
        margin-right: 16.66666667%;
    }

    .span-md1-offset {
        margin-right: 8.33333333%;
    }

    .span-md0-offset {
        margin-right: 0;
    }

    .span-md12-offsetl {
        margin-left: 100%;
    }

    .span-md11-offsetl {
        margin-left: 91.66666667%;
    }

    .span-md10-offsetl {
        margin-left: 83.33333333%;
    }

    .span-md9-offsetl {
        margin-left: 75%;
    }

    .span-md8-offsetl {
        margin-left: 66.66666667%;
    }

    .span-md7-offsetl {
        margin-left: 58.33333333%;
    }

    .span-md6-offsetl {
        margin-left: 50%;
    }

    .span-md5-offsetl {
        margin-left: 41.66666667%;
    }

    .span-md4-offsetl {
        margin-left: 33.33333333%;
    }

    .span-md3-offsetl {
        margin-left: 25%;
    }

    .span-md2-offsetl {
        margin-left: 16.66666667%;
    }

    .span-md1-offsetl {
        margin-left: 8.33333333%;
    }

    .span-md0-offsetl {
        margin-left: 0;
    }
}













@media (min-width: 1200px) {

    .span-lg1, .span-lg2, .span-lg3, .span-lg4, .span-lg5, .span-lg6, .span-lg7, .span-lg8, .span-lg9, .span-lg10, .span-lg11, .span-lg12 {
        float: right;
    }

    .span-lg12 {
        width: 100%;
    }

    .span-lg11 {
        width: 91.66666667%;
    }

    .span-lg10 {
        width: 83.33333333%;
    }

    .span-lg9 {
        width: 75%;
    }

    .span-lg8 {
        width: 66.66666667%;
    }

    .span-lg7 {
        width: 58.33333333%;
    }

    .span-lg6 {
        width: 50%;
    }

    .span-lg5 {
        width: 41.66666667%;
    }

    .span-lg4 {
        width: 33.33333333%;
    }

    .span-lg3 {
        width: 25%;
    }

    .span-lg2 {
        width: 16.66666667%;
    }

    .span-lg1 {
        width: 8.33333333%;
    }

    .span-lg12-pull {
        right: 100%;
    }

    .span-lg11-pull {
        right: 91.66666667%;
    }

    .span-lg10-pull {
        right: 83.33333333%;
    }

    .span-lg9-pull {
        right: 75%;
    }

    .span-lg8-pull {
        right: 66.66666667%;
    }

    .span-lg7-pull {
        right: 58.33333333%;
    }

    .span-lg6-pull {
        right: 50%;
    }

    .span-lg5-pull {
        right: 41.66666667%;
    }

    .span-lg4-pull {
        right: 33.33333333%;
    }

    .span-lg3-pull {
        right: 25%;
    }

    .span-lg2-pull {
        right: 16.66666667%;
    }

    .span-lg1-pull {
        right: 8.33333333%;
    }

    .span-lg0-pull {
        right: auto;
    }

    .span-lg12-push {
        left: 100%;
    }

    .span-lg11-push {
        left: 91.66666667%;
    }

    .span-lg10-push {
        left: 83.33333333%;
    }

    .span-lg9-push {
        left: 75%;
    }

    .span-lg8-push {
        left: 66.66666667%;
    }

    .span-lg7-push {
        left: 58.33333333%;
    }

    .span-lg6-push {
        left: 50%;
    }

    .span-lg5-push {
        left: 41.66666667%;
    }

    .span-lg4-push {
        left: 33.33333333%;
    }

    .span-lg3-push {
        left: 25%;
    }

    .span-lg2-push {
        left: 16.66666667%;
    }

    .span-lg1-push {
        left: 8.33333333%;
    }

    .span-lg0-push {
        left: auto;
    }

    .span-lg12-offset {
        margin-right: 100%;
    }

    .span-lg11-offset {
        margin-right: 91.66666667%;
    }

    .span-lg10-offset {
        margin-right: 83.33333333%;
    }

    .span-lg9-offset {
        margin-right: 75%;
    }

    .span-lg8-offset {
        margin-right: 66.66666667%;
    }

    .span-lg7-offset {
        margin-right: 58.33333333%;
    }

    .span-lg6-offset {
        margin-right: 50%;
    }

    .span-lg5-offset {
        margin-right: 41.66666667%;
    }

    .span-lg4-offset {
        margin-right: 33.33333333%;
    }

    .span-lg3-offset {
        margin-right: 25%;
    }

    .span-lg2-offset {
        margin-right: 16.66666667%;
    }

    .span-lg1-offset {
        margin-right: 8.33333333%;
    }

    .span-lg0-offset {
        margin-right: 0;
    }

    .span-lg12-offsetl {
        margin-left: 100%;
    }

    .span-lg11-offsetl {
        margin-left: 91.66666667%;
    }

    .span-lg10-offsetl {
        margin-left: 83.33333333%;
    }

    .span-lg9-offsetl {
        margin-left: 75%;
    }

    .span-lg8-offsetl {
        margin-left: 66.66666667%;
    }

    .span-lg7-offsetl {
        margin-left: 58.33333333%;
    }

    .span-lg6-offsetl {
        margin-left: 50%;
    }

    .span-lg5-offsetl {
        margin-left: 41.66666667%;
    }

    .span-lg4-offsetl {
        margin-left: 33.33333333%;
    }

    .span-lg3-offsetl {
        margin-left: 25%;
    }

    .span-lg2-offsetl {
        margin-left: 16.66666667%;
    }

    .span-lg1-offsetl {
        margin-left: 8.33333333%;
    }

    .span-lg0-offsetl {
        margin-left: 0;
    }
}









/******* resetters*******/

.nopadding-left {
    padding-left: 0px !important;
}

.nopadding-right {
    padding-right: 0px !important;
}

.nopadding-top {
    padding-top: 0px !important;
}

.nopadding-bottom {
    padding-bottom: 0px !important;
}

.nomargin-left {
    margin-left: 0px !important;
}

.nomargin-right {
    margin-right: 0px !important;
}

.nomargin-top {
    margin-top: 0px !important;
}

.nomargin-bottom {
    margin-bottom: 0px !important;
}

.nopadding-hor {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.nopadding-ver {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.nomargin-hor {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.nomargin-ver {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.pull-left {
    float:left !important
}
.pull-right {
    float:right !important
}
/************* resetters*********/

/* clearfix */
.clearfix:after {
    display: table;
    content: "";
    clear: both;
}