body  {font-family: "Open Sans Hebrew",Arial, serif;font-size: 14px;color: #333333;margin: 0;background-color: #fff;}

h1    {font-size: 40px;color: #ffffff; width:100%; font-weight: bold;background-color: #243e5a;padding-top: 60px; padding-right:160px; padding-bottom: 30px;text-align: right;margin-top:0; margin-bottom: 50px;}
h2    {font-weight: 200; font-size: 50px;}
.mark {background-color:#258be8;border-color:#627eb1;  color:#FFF;padding:5px; border-radius:5px;}



/**************************Graphs**************************************************************************************/

.BarRange{background-color:#eee;width: 700px; height: 50px}


/*************************** Tabs  ******************************************************************************/



.tabs        { width: 130px;background: #d3d8da;cursor: pointer;text-align: center;transition: all 0.6s;padding:14px;color: #1f60a9; text-shadow: 0 0 10px #FFF;font-size: 13px;border-radius: 12px 12px 0 0;}
.tabs:hover  {background: #a2b7c0;color: #fff; z-index: 1000;}

.tabs_       {cursor: pointer;text-align: center; width: 150px;transition: all 0.6s;background: #258be8;padding:18px;color: #fff;font-size: 13px;border-radius: 8px 8px 0 0;-moz-border-radius: 8px 0 0;-webkit-border-radius: 8px 8px 0 0;}
.tabs_:hover { background: #243e5a; }

.tab        {background: #d3d8da;cursor: pointer;text-align: center;transition: all 0.6s;padding: 10px 10px;color: #627eb1;text-shadow: 0 0 10px #FFF;font-size: 16px; border-radius: 1px;}
.tab:hover  {box-shadow: 0 0 30px 3px #258be8 inset;background: #258be8;color: #fff;}


/****************************************************************************************************************/
/***************************Master TAGS Elements ******************************************************************************/
/**********************************************************************************************************************/


#TopHDR        { background-repeat: no-repeat;background-position: top; margin: 0; height:130px; direction: rtl;}

#menuBtn       { display:none; margin-right: 15px; margin-top: 22px;}
#privatTabMbl  { display:none; padding:20px 10px 10px 10px;border-radius:0  0 10px 10px  ;color: #fff; box-shadow:0 10px 5px 1px #eee inset; }
#MSMenuMbl     { display:none; margin-right: 15px; margin-top: 22px;}

#privatTab     { background: #222836; width: 100px; padding-top:10px; padding-bottom: 10px; border-radius:0  0 10px 10px  ;color: #fff; cursor: pointer; text-align: center;     }
#MSMenu        { background: #222836; margin-top:200px; border-radius: 8px 0 0 8px; height: 200px; padding-top: 20px; opacity: 0.8;}

#searching     { width: 250px;padding-top: 21px;vertical-align: top;text-align: right;}
#searchBox     { width:160px;height:40px;border:none; background-color:#eee; padding-right:10px;border-radius:0 5px 5px 0;}
#TM            { text-align: left;opacity: 0.9; margin-left: 15px; margin-top: 35px;}
.TMitem        { background: #88b300; border: 1px dotted #648204; color: #fff;   padding:12px 14px 14px 14px;text-shadow: 0 0 1px #333;font-size: 16px; margin: 3px; cursor: pointer;text-align: center;transition: all 0.5s;   border-radius:3px ;}
.TMitem:hover  { box-shadow: 0 0 3px 0px #88b300 ; background: #648204; color: #fff;  padding:18px 14px 18px 14px; }
.TMmPrvt       { padding:10px;height:50px; text-align:right; cursor: pointer; color:#fff;}
.TMmPrvt:hover { background-color: #1f60a9;}

#RM            { top: 0px; right:-250px;  width: 300px;height: 100%;z-index: 15;padding-right: 0px;color: #eee;text-align: left;font-size: 16px;transition-property: all;transition-duration: 0.2s, 0.1s;	position: fixed;}
#RM:hover      {  }

.RMitm         { box-shadow:0 0 1px 0px #333 inset ;border:1px dotted #333;  text-align: right; background:-webkit-linear-gradient(top,#374558 0%,#354355 50%); cursor:pointer;transition:all 2s;padding:12px 12px;color:#eee; text-shadow:0 0 1px #ccc;font-family: "Arial Narrow", Arial, sans-serif;font-size:18px; }
.RMitm:hover   { box-shadow:0 0 300px 30px #bf9b30 inset ;border:1px dotted #907141;}

.RMitm_        { text-align: right; cursor:pointer;color:#FFFFFF;transition:all 0.6s; padding:10px; color:#374558;  background:-webkit-linear-gradient(top,#eee 0%,#f8f8f8 100%);border:1px solid #374558;font-size:14px;}
.RMitm_:hover  { border:1px solid #222836;}


#xxx_main      { width: 100%;z-index: 10;min-height: 300px; margin: 0;color: #eee;background-color: #fff;text-align: center;font-size: 16px;padding-bottom:50px; transition: all 2s;}

#footerIMG     { background-image:url(/Themes/online/down1.png);background-position:260px 60px;background-repeat:no-repeat; background-size:500px 102px;height:150px;}
footer         { width: 100%;height: 400px;z-index: 19;color: #999;	background-color: #282d36;	text-align: left;	font-size: 17px; padding-top: 10px;}
.ftr           { transition: all 0.5s;color: #eee;background-color: #333; border-radius: 5px;text-align: center;border: 1px dotted #999; text-align: center;margin:5px; padding: 7px; cursor: pointer;}
.ftr:hover     { border-color: #eee;background-color: #abcc26;}
#Newsletter    { margin:0;height: 34px;padding: 6px 12px; direction:ltr; border-bottom-right-radius:0;border-top-right-radius:0;font-size: 14px; font-weight: 200;}
#NewsletterBtn { margin-left: -2px; height: 34px;padding: 0px 12px; border-bottom-left-radius:0;border-top-left-radius:0; }

#private:hover ~ #xxx_main  { opacity: 0.1; padding-top: 100px;}
#RM:hover      ~ #xxx_main  { opacity: 0.1; }
#TopHDR:hover  ~ #xxx_main  {background: #eee;}
footer:hover   ~ #xxx_main  {background: #eee;}

#NEXT          { margin-left: auto; margin-right: auto;width:900px;margin-top:10px; padding:9px; color:#1582dc;background-color: #f8f8f8;cursor:pointer;border:1px dotted #1582dc;border-radius: 7px; text-align: center;transition:all 0.8s; font-size: 20px;}
#NEXT:hover    { background-color:#1582dc;color:#f8f8f8;}

/********************************Products********************************************************************************/


.boxs          { transition: all 0.7s;background-color: #a3c5f4;border-radius: 30%;padding-top: 30px;text-align: center;padding-left: 15px;color: #fff;text-align: center;width: 220px;height: 220px;}
.boxs img      { border-radius: 1%;}
.boxs:hover    { border-radius: 25%;background-color: #5e9ff8;color: #eee;cursor: pointer;	border-color: #eee;}

.box           { transition: all 0.5s;width: 280px;color: #eee; background-color: #f8f8f8; border-radius: 12px;text-align: center;border: 1px dotted #999; text-align: center;margin:5px;  cursor: pointer;}
.box:hover     { border-color: #eee;border-radius: 5px;}

.Box1          { transition: all 0.5s;border-radius:10px 10px 0  0 ; background-color: white; background-repeat:no-repeat; background-position:center; cursor: pointer;text-align: center;width:278px; height:250px;  }
.Box1:hover    { height:300px; -webkit-filter: contrast(2);}
.Box1:hover ~ .Box2 {background-color: #258be8;color: #fff;}
.Box2          { transition: all 0.5s;border-radius: 0  0 10px 10px; cursor: pointer; background-color: #eee;  padding:25px 0px 25px 15px; text-align: left;width:278px; }
.Box2:hover    { background-color: #258be8;color: #fff;}

#listS         { width:1100px; text-align: center;}
.listS1        { height:100px; text-align: left;}
.listS2        { text-align:left; padding:5px;width:50%;font-weight: bold;font-size: 18px; }
.listS3        { transition: all 0.5s; }
.listS3:hover  { background-color: #f8f8f8;}

#listM         { width:1100px; }
.listM1        { transition: all 0.5s;width:400px;height:300px;}
.listM1:hover  { -webkit-filter: saturate(2);}
.listM2        { vertical-align:top;text-align:left; padding-top:40px; padding-left:20px;}



/****************************************************************************************************************/
/**************************** screen media ************************************************************************/
/****************************************************************************************************************/



@media only screen and (min-width : 1700px)  {                       /* big screen ----------- */

h1  {padding-right:350px;}

#Fdownsearch{padding-right:280px;}

#Boxs      {width:1400px;}
#listS     {width:1400px;}
#listM     {width:1400px;}

}

@media only screen and (min-width : 0px) and (max-width : 1050px) { /* Tablets & Strong SmartPhone ---- */

#TM {display:none;} #menuBtn{ display:block;}
#MSMenuMbl    {display:block;}  #MSMenu    {display:none;}
#TopHDR{  width:100%;height:100px; }
#Fdownsearch{padding-right:50px;}
#NEXT      {width: 90%;}

#listS     {width:90%;}
#listM     {width:90%;}

}


@media only screen and (min-width : 0px) and (max-width : 700px) {/* Simple SmartPhone ---- */
    
    #privatTabMbl {display:block;}  #privatTab {display:none;}
    #searching    {width: 200px; }
    #searchBox    {width: 120px; }
    .prvBtns      {display:none; }
  
}

@media only screen and (min-height : 1020px)  {   /* Long SmartPhone upside ---- */

    #xxx_main { padding-bottom: 100px;}     

}