@font-face {
    font-family: Frank;
    src: url(FRANK.woff2),url(FRANK.woff),url(FRANK.TTF) ;
}
div#bot {
    font-size: 20pt;
    Xfloat: right;
    position: fixed;
    bottom: 0px;
    background-image: url(bot.gif);
    z-index: 4;
    width: 100px;
    height: 100px;
    left: 0;
    background-size: contain;
    display: none; 
    /* opacity: 0; */
    -webkit-opacity: 1;
}
.b1, .b2 {
    font-size: 54px;
    margin: 3px 3px;
    background: #fff;
    /* line-height: 48%; */
    cursor: pointer;
    float: right;
    font-family: 'Frank';
position: relative;}

div#cover {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgb(0 0 0 / 72%);
}
 
div#showarray, div#showarray2 {
    background: hsl(0deg 0% 98%);
    /* width: 40px; */
    height: 200;
    position: fixed; /**/
    overflow: hidden;
    float:left;
    right: 0;
    top: 0;
    z-index: 2;
    /* flex-flow: column wrap; */
    /* height: 100%; */
    /* display: flex; */
    /* flex-wrap: wrap; */
    font-family: Frank;
/* background: url('back221.jpg'); */text-align: center;border-radius: 12px 0px 0px 12px;}
div#close {
    position: fixed;
    left: 72px;
    background: #f00;
    font-size: 22px;
    cursor: pointer;
    /* z-index: 100; */
}

img {
    max-width: 600px;
    height: auto;
    width: 100%;
    /* border-width: 1px; */
    /* border-style: solid; */
    /* height: 4510px; */
}


div.b1 {
    font-size: 50px;

      
   position: relative;} 



#contain{
    width:1608px;
    width:100%;
    float: right;
    max-width: 600px;
    right: 0;
    position: absolute;
    
background: #fff;margin: 0;box-shadow: 2px 4px 11px 12px #00000085;}

p#contain {}

div#showarray2 {width: 600px;}

.b2 {
    /* margin: 3px 8px; */
    width: 79px;
    text-align: center;
}





div#bot2 {
    position: fixed;
    bottom: 0;
    width: 100px;
    height: 100px;
    z-index: 100;
    /* display: none; */
    right: 500px;
    background-image: url('bot.gif');
    background-size: 100%,100%;
    /* top: 0; */
    font-size: 32px;
    /* width: 300px; */
text-align: center;line-height: 280%;color: #fff;
    text-shadow: 0 0 4px #ff6f00,0 0 4px #ff6f00,0 0 4px #ff6f00;
    font-size: 180%;/* text-shadow: 1px 1px 2px black, 0 0 25px #ff9800, 0 0 5px darkblue; */cursor: pointer;}



.botTop {
    background: -webkit-linear-gradient(top, rgb(254, 231, 154) 0%, rgb(254, 193, 81) 100%);
    border-radius: 3vw;
    /* box-shadow: rgba(255, 255, 255, 0.8) 2px 3px 1px inset, rgb(95, 95, 95) 5px 5px 10px; */
    border: 1px solid rgb(214, 158, 49);
    color: rgb(133, 89, 46);
    cursor: pointer;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    font-stretch: normal;
    font-size: 5.5vw ;
    line-height: normal;
    font-family: Helvetica, Arial, sans-serif;
    margin: 0px 0px 2px;
    position: relative;
    
    width: 84%;
    text-decoration: unset;
    transition: left 0.5s, display 0.5s;
    left: 0px;
    /* height: 15vw; */
flex: 0 0 47%;padding: 2px 2px;}

  .botTop {font-size: 40%;}

  button#Search {font-size: 70%;}

div#introdction {
    z-index: 1000;
    position: fixed;
    max-width: 600px;
    height: 100%;
    display: block;
    font-size: 379%;
    text-align: center;
    top: 0px;
    box-shadow: rgba(0, 0, 0, 0.4) 6px 6px 3vw inset;
    color: rgb(255, 255, 255);
    text-shadow: rgb(0, 0, 0) 0px 0px 3vw;
    line-height: 116%;
    right: 0px;
    direction: rtl;
    background: url('back1.jpg'),repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(0, 0, 0, 0.03) 20px, rgba(0, 0, 0, 0.035) 40px), linear-gradient(rgba(80, 199, 255, 0.95), rgba(92, 187, 255, 0.95), rgba(0, 84, 109, 0.95));
;

background-position: top;background-repeat: no-repeat;width: 100%;background-size: 100% 50%,100%,100%,100%,100%,100%,100%,100%;display: none;}
  .botTop:hover {
    background: -webkit-linear-gradient(top, rgb(254, 193, 81) 0%, rgb(254, 231, 154) 100%);
}

div#Bots {position: relative;top: 39%;height: 61%;display: flex;flex-wrap: wrap;/* flex-direction: row; */WIDTH: 100%;justify-content: space-around;flex: 2 1 1 1 1 1 2;}

body {padding: 0;margin: 0;direction: rtl;
      background:  url(logoback.png),url('back_all_17.jpg') fixed, fixed;
      background-size: 50px, 20%,auto;
background-attachment:fixed}


a#help {
    font-size: 147%!important;
background: linear-gradient(210deg, #fff4a2 0%, #efbc27 100%);line-height: 210%;/* background: url('back221.jpg'); *//* background-size: 9%; */text-shadow: 7px 6px 6px #000000a1;font-family: fangsong;text-shadow: rgb(255 255 255 / 50%) 0px 1px 0px;border-radius: 5px 0 0 5px;}



/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {

}


/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */

@media screen and (max-width: 692px) {

#contain{
box-shadow:none;}


div#bot2 {
    left:0;
    right: auto;}

    a#help {
    font-size: 250%!important;
Xbackground: linear-gradient(90deg, #ffe000 0%, #d9ff66 100%);/* line-height: 210%; */}

  
          div.b1::after ,div.b2::after {
            content: "";
          background:  url('back221.jpg'); 
            opacity: 0.2;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            /* z-index: -1; */   
          background-size: 13.1%;filter: hue-rotate(232deg);}
          
          
          #showarray{}
          #showarray,#showarray2{
          
          width: 330px  !important;
          
          display: none;
          
          height: 100vh;
          }
          
          div#bot {display:block;/* opacity: 98; */z-index: 100;-webkit-opacity: 1;}
          .b1,.b2{
              font-size: 70px !important;
              width: 31% !important;
              /* align-content: center; */
              text-align: center;
              /* padding: 17px !important; */
              /* line-height: 0% !important; */
              height: 10.5% !important;
              align-content: center;
              vertical-align: middle !important;
              }
          .b1{
           
          }
          .b2{
              FONT-SIZE: 62px !IMPORTANT;
              /* height: 36px !important; */
              padding: 0px;
              /* line-height: 0; */
          }
          
.botTop {font-size: 40%;}

  button#Search {font-size: 90%;}
      


div#content2 {
    display: none;
}
}


img {}

.b2::first-letter {
  font-size: 50px;
  color: rgb(0 0 0 / 62%);
}

button.botTop {flex-grow: 1;}

button.botTop {/* width: 50%; */}

.titel2 {background: linear-gradient(90deg, #fff4a2 0%, #efbc27 100%);font-weight: 900;color: #fff;text-shadow: 1px 1px 2px #0000005c, 0 0 3px #00008b85;}

div#chone1 {
    position: absolute;
    width: 59px;
    height: 55px;
    background: #ff0000;
    top: 2584px;
    right: 173px;
    /* border-radius: 12px; */
    /* border-style: solid; */
    /* border-width: 1px; */
    /* border-color: rgb(255 0 0 / 39%); */
    /* box-shadow: inset 0 0 9px 0 rgb(0 0 0 / 72%); */
    mix-blend-mode: plus-lighter;
    cursor: pointer;
}


@media screen and (min-width: 692px) {

div#showarray, div#showarray2 {
    right: 240px;
}


#contain{
    right: 238px;
}






div#bot2 {
    right: 738px;
}



.botTop {
    background: repeating-linear-gradient(309deg, transparent, transparent 10px, rgba(0, 0, 0, 0.03)10px, rgba(0, 0, 0, 0.015) 20px),-webkit-linear-gradient(top, rgb(254, 231, 154) 0%, rgb(254, 193, 81) 100%);
    border-radius: 14PX;
    box-shadow: rgba(255, 255, 255, 0.8) 2px 3px 1px inset, rgb(95, 95, 95) 5px 5px 10px;
flex: 0 0 47%;padding: 2px 2px;MARGIN: 1PX;

}


button.botTop {flex-grow: 1;font-family: b titr;font-size: 38%;}

div#introdction {
    max-width: 240px;
    font-size: 269%;
    background-position: top;
    width: 100%;
    display: block;
    background: url(sideArm.png),url('back1.jpg'),repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(0, 0, 0, 0.03) 20px, rgba(0, 0, 0, 0.035) 40px), linear-gradient(rgba(80, 199, 255, 0.95), rgba(92, 187, 255, 0.95), rgba(0, 84, 109, 0.95));
    background-position: bottom, 0 0;
    background-repeat: no-repeat;
    background-size: 68%, 100%,100%,100%,100%,100%,100%,100%,100%;
}

div#Bots {position: relative;top: 190px;height: 330px;display: flex;
flex-wrap: wrap;/* flex-direction: row; */WIDTH: 100%;
justify-content: space-around;flex: 2 1 1 1 1 1 2;/* FONT-FAMILY: b titr; */}



.titel2 {
    background: linear-gradient(90deg, #fff4a2 0%, #efbc27 100%);
    font-weight: 900;
    color: #ffffff;
    text-shadow: none;
    font-size: 100%;
    font-family: b titr;
	text-shadow: 1px 1px 2px #0000005c, 0 0 3px #00008b85;}
 
#Search , #img4, #help , #bot2{
    display : none !important;
}


	div#content2 {
	    position: fixed;
	    left: 0;
	    top: 0;
	    background: #fff;
	    width: 300px;
	    height: 100%;
	    overflow: scroll;
	}
	
	
	div#showarray, div#showarray2 {
	    width: 598px;
	    border-radius: 0px 0px 0px 12px;
	}
	

#content2 img {
    height: 1285px;
}   
} 


a#help {
.b2::first-letter {
  font-size: 50px;
  color: rgb(0 0 0 / 62%);
}